Div appears onfocus

Discussion in 'JavaScript' started by joshdmitchell, Dec 26, 2007.

0
  1. #1
    Hi there,
    I have a javascript that is supposed to make a div appear or disappear depending on whether a form field in an adjacent div is active. As you can see in the code, when the form field in div "username" is selected, div "usernote" should appear. But it's not....any suggestions?

    Thanks!
    Josh

    
<!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" />
  <title>User Registration</title>
<style>
html, body {
  color: #000;
  background-color: #fff;
  font-size:15px;
}

form div.active {
  background-color: #F5F5DC;
  border: 0px solid #8a8;
}

#username
{
	font-family:Arial;
	font-weight:bold;
	padding-top: 1em;
	padding-bottom: 1em;
	width:300px;
	padding-left:20px;
}

#usernote
{
	font-weight: 400;
	font-family:Arial;
	padding: 0em;
	font-size:12px;
	width:300px;
}

#user_registration
{
	border:1px solid #6495ED;
	width:700px;
	background-color: #ECF1EF;
	margin-left:100px;
}

#user_registration p
{
	clear:both;
	margin-top:0px;
	margin-bottom:0px;
}

</style>
<script type="text/javascript"><!--
function hasClassName(el,c){
  c=c.replace(/\-/g,'\\-');
  return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
}
function addClassName(el,c){
  if(hasClassName(el,c)) return;
  var curClass=el.className||'';
  el.className=curClass+((curClass.length>0)?' ':'')+c;
}
function removeClassName(el,c){
  var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
  el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
}
function highlightElm(el,light){
  if(!el) return;
  if(light) addClassName(el,'active');
  else removeClassName(el,'active');
}
window.onload = function(){
	document.getElementById('field1').onblur = function() {
	document.getElementById('usernote').style.display = 'none';
	highlightElm(this.parentNode, false);
}
	document.getElementById('field1').onfocus = function() {
    document.getElementById('usernote').style.display = 'block';
    highlightElm(this.parentNode, true);
}
}

// -->
</script>


</head>
<body>
<table>
<form method="post" action="" id="user_registration" name="user_registration">

<tr>
<td>
<div id="username">
	Username
	<input type="text" id="field1" name="field1" size="30" tabindex="1">
	</div>
</td>
<td>
	<div id="usernote" style="display:none;">
	Your username can only contain letters (A-Z) or numbers (0-9)
	</div>
</td>

</tr>
</form>
</table>

</body>
</html>
    Code (markup):
     
    joshdmitchell, Dec 26, 2007 IP
  2. jronmo

    jronmo Guest

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You closed your form tag after name="user_registration".
    Also you didn't close the input tag, that's just a formality.
     
    jronmo, Dec 27, 2007 IP
  3. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">	

	function toggleMessage(nInput){

		var currField = nInput.parentNode.nextSibling.nextSibling;
		currField.style.display == "none" ? currField.style.display = "" : currField.style.display = "none";
	}

	function init(){

		var nForm = document.forms[0];
		var nSpan = nForm.getElementsByTagName('span');
		for (i=0; i<nSpan.length; i++)
			{
			 nSpan[i].style.display = "none";			 
			}
		var nLabel = nForm.getElementsByTagName('label');		
		for (i=0; i<nLabel.length; i++)
			{
			 nLabel[i].childNodes[1].onfocus = function(){toggleMessage(this)}				
			 nLabel[i].childNodes[1].onblur = function(){toggleMessage(this)}				
			}
	}

	onload=init;
	
</script>
<style type="text/css">

	 body {background-color: #fffacd; margin-top: 60px;}
	 form {width: 600px; margin: auto; font-family: arial; font-size: 12pt;}	
	 fieldset {background-color: #eee8aa; border: 1px solid #e6b280; padding-left: 8px; padding-bottom: 8px;} 
	 legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
	 label {font-family: arial; font-size: 12pt;}
	 form span {font-family: arial; font-size: 10pt; padding-left: 10px;}
	.submitBtn {background-color: #ffffff; border: solid 1px #000000; font-family: arial; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 5px;}
	
</style>
</head>
	<body>
		<form method="post" action="">
		   <fieldset>
			<legend>Registration Form</legend>

				<label>Username:&nbsp;<input type="text" name="username" size="30"></label>
				<span>Use letters (A-Z) or numbers (0-9) only</span>
				<br><br>
				<label>Password:&nbsp;<input type="password" name="password" size="30"></label>
				<span>Use letters (A-Z) or numbers (0-9) only</span>

				<input type="submit" name="submit" value="Submit" class='submitBtn'>
		   </fieldset>
		</form>		
	</body>
</html>
    Code (markup):
     
    Mike H., Dec 27, 2007 IP