SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Florida
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding layer dynamically, after user starts to type...

    ^title

    Basically what is going on is when you click on the input field, it will display the <div> just under it. What would I have to do in order to hide the same <div> as soon as the user starts typing into the input field?

    Here is some pretty basic code I'm using. Thanks for taking a look!

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    <!--
    .note{
    	background:#EDEDED;
    	border-left:1px solid #A5ACB2;
    	border-right:1px solid #A5ACB2;
    	border-bottom:1px solid #A5ACB2;
    	width:196px; padding:4px;
    	font: x-small Verdana, Arial, Helvetica, sans-serif;
    	color:#A5ACB2; 
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function toggleDiv(DivID, iState) // 1 visible, 0 hidden
    {
    	if(document.layers)//NN4+
    	{
    		document.layers[DivID].visibility = iState ? "show" : "hide";
    	}
        	else if(document.getElementById)	  //gecko(NN6) + IE 5+
        	{
            	var obj = document.getElementById(DivID);
            	obj.style.visibility = iState ? "visible" : "hidden";
        	}
        	else if(document.all)	// IE 4
        	{
            	document.all[DivID].style.visibility = iState ? "visible" : "hidden";
        	}
    }
    // -->
    </script>
    	
    <title>Test Document</title>
    </head>
    <body>
    
    <div><input type="text" class="bginput" name="teamtitle" value="" size="30" maxlength="85" tabindex="1" onClick="toggleDiv('notetag1',1);" /></div>
    <div class="note" id="notetag1" style="visibility:hidden;">Start typing a username...</div>
    
    </body>
    </html>

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ken,

    I hope you're having warmer weather than we are

    There are many ways to do this - here's one way:
    Code:
    <div class="note" id="notetag1" style="visibility:hidden;" onkeydown="toggleDiv(this.id, 0)">Start typing a username...</div>
    Note that the "if(document.layers)" may cause more problems than it solves. Unless you specifically have to support NN4 then I would get rid of that

  3. #3
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Florida
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pretty windy here now, a storm is about to come in. Thanks for that, for some reason I kept thinking onChange and not onkeydown.

    That snippet is from an old javascript book. Supporting NN4 is not something I'm worried about, I'll end up deleting that part of the function. Thanks for your reply Mike, it was much appreciated.


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
  •