|
CSS - Password Strength Bar
Hi again (and sorry for the many questions)...I guess I'm really enjoying this stuff.
I have a small snippet of code that displays a password strength meter, but I can't seem to control the height of the colored bar -- anything under 20px, and the bar doesn't change size. If I put in 100px, the bar gets bigger. Ideally, I'm looking to get the bar to a height of 2-3px. Here's the partial code from my webform... Thanks, Josh Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<style>
#passwordStrength
{
float:left;
}
.strength1
{
width:50px;
height:2px;
background:#ff0000;
}
</style>
<script>
function passwordStrength(password)
{
var desc = new Array();
desc[1] = "Very Weak";
var score = 0;
//if password not empty than give 1 point
if (password.length > 0) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
</head>
<body>
<div id="password">
<input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/>
</div>
<div id="passwordDescription"></div>
<div id="passwordStrength" class="strength0"></div>
</body>
</html>
Similar TutorialsI've never had to create a password field before now. I've done some research and found a basic code, but it doesn't seem to cover all the bases that I have to. Can anyone help me accomplish the following: Quote: default state is with password field ("OFF"). when visitor enters the password, the password text and field should disappear and a number of links to PDF files should appear ("ON" state). please no reload of the page. Also, this needs to be compatible with IE6. All assistance is greatly appreciated because I'm truly at a loss with this one!! |
|||||||