SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div appears onfocus

    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

    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" />
      <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>

  2. #2
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Your issue

    What I would do is use some inline JavaScript if it's for only one field, or a JS function if you need to do it many times. Here's what I would do.

    JavaScript:

    Code:
    function showDiv(idOfDiv) {
    
       document.getElementById(idOfDiv).style.display = 'block';
    }
    function hideDiv(idOfDiv) {
       document.getElementById(idOfDiv).style.display = 'none';
    }
    Then on any form field you can control the appearance of the div using the following:

    HTML Code:
    <input type="text" name="fieldName" id="field1" onfocus="showDiv('div1');" onblur="hideDiv('div1');" />
    
    
    <div id="div1" style="display:none;">A reminder of how to use this field</div>
    I didn't test this, but I've done this many times and this should work. Hope this helps.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •