Showing and Hiding Elements


JavaScript programmers also find a lot of use for the visibility property, which enables you to toggle the visibility of elements. Here's how we used that property in Chapter 12, "Working with Forms, Buttons, Check Boxes, and Radio Buttons," (Listing 12-13.html) to show and hide some extra controls (if using Netscape Navigator, you'll need version 6.0 or later):

 <HTML>      <HEAD>          <TITLE>Showing and hiding controls</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function checkClicked(check)   {   if(check.checked) {   document.form1.button1.style.visibility= "visible"   document.form1.button2.style.visibility= "visible"   } else {   document.form1.button1.style.visibility= "hidden"   document.form1.button2.style.visibility= "hidden"   }   }   function hideButtons()   {   document.form1.button1.style.visible = false   document.form1.button2.style.visible = false  }                  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Showing and hiding controls</H1>          <FORM NAME="form1">              <INPUT TYPE="BUTTON" VALUE="Check spelling" NAME="button1" STYLE="visibility: graphics/ccc.gif hidden">              <INPUT TYPE="BUTTON" VALUE="Change case" NAME="button2" STYLE="visibility: graphics/ccc.gif hidden">              <BR>              <INPUT TYPE="TEXT" NAME="text1">              <INPUT TYPE = "CHECKBOX" NAME = "check1" ONCLICK = "checkClicked(this)">Show graphics/ccc.gif all options           </FORM>      </BODY>  </HTML> 


Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net