SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard Crowe's Avatar
    Join Date
    Nov 2001
    Location
    Huntsville
    Posts
    1,117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Show / Hide - Help make this re-usable

    I finally figured out how to get an area to "show" or "hide" depending on what is clicked. I need to do this for several form fields and would like to make this code re-usable, but I can't figure out how to pass a varialbe to the js function and then actually USE it. I'd actually like to make it work like this

    ONCLICK="showContainer(showORhide,whatIDtoshowORHide)
    ex: ONCLICK="showContainer(show,myarea)
    ex ONCLICK="showContainer(hide,thatarea)

    Here is the code I'm using. I'm a javascript newbie btw

    This is in the header
    Code:
    <STYLE>
    .hide { position: relative; visibility: visible; }
    </STYLE>
    <SCRIPT>
    function showContainer() {
      if (document.layers)
        document.Container.visibility = 'show';
      else {
        var g = document.all ? document.all.Container :
                  document.getElementById('Container');
        g.style.visibility = 'visible';
      }
    }
    
    
    function hideContainer() {
      if (document.layers)
        document.Container.visibility = 'hide';
      else {
        var g = document.all ? document.all.Container :
                  document.getElementById('Container');
        g.style.visibility = 'hidden';
      }
    }
    
    </SCRIPT>
    And this is my form where I call it.

    Code:
    <TABLE>
    <TR>
    <TD VALIGN="top">
    <FORM NAME="form0">
    Yes <INPUT TYPE="radio" NAME="yesno" ONCLICK="showContainer();" >
     No <INPUT TYPE="radio" NAME="yesno" ONCLICK="hideContainer();" >
    
    </TD>
    <TD>
    <SPAN ID="Container" class="hide">
    Check, Check<br>
    Junk Goes Here
    </SPAN>
    
    </FORM>
    
    </TD>
    </TR>
    </TABLE>
    Any help would greatly be appreciated.
    Chrispian H. Burks
    Nothing To Say

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here. toggleVis() relies on showObj() and hideObj(), but showObj() and hideObj() can be run independently. All three rely on getNode()
    Code:
    function getNode( oId )
    {
    	return ( document.layers ) ? document.layers[oId] : ( document.getElementById || document.all )( oId );
    }
    
    function toggleVis( oId )
    {
    	var o = getNode( oId );
    	var vis = ( document.layers ) ? o.visibility : ( o.currentStyle ) ? o.currentStyle.visibility : o.style.visibility;
    	if ( vis == 'hidden' || vis == 'hide' )
    		showObj( o );
    	else
    		hideObj( o );		
    }
    
    function hideObj( o )
    {
    	if ( typeof o == "string" ) o = getNode( o );
    	if ( document.layers )
    		o.visibility = 'hide';
    	else
    		o.style.visibility = 'hidden';
    }
    
    function showObj( o )
    {
    	if ( typeof o == "string" ) o = getNode( o );
    	if ( document.layers )
    		o.visibility = 'show';
    	else
    		o.style.visibility = 'visible';	
    }
    Last edited by beetle; Feb 13, 2003 at 11:00.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Wizard Crowe's Avatar
    Join Date
    Nov 2001
    Location
    Huntsville
    Posts
    1,117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks a million! That works perfectly.
    Chrispian H. Burks
    Nothing To Say


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
  •