Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show / Hide divs

    OK, I have worked off of this : tutorial, but, I would like to have multiple divs on the page, opening and closing independantly.

    How would I go about doing this?

    Thanks

  • #2
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I have some different code now, but can't quite get it to work.
    Javascript:
    function reveal(e, divToShowHide) // The 'e' is a Netscape event handling requirement
    {
    // Store off the HTMLElement for easy reference
    var d = document.getElementById( divToShowHide );

    // Get the ID of the button which caused the event
    var ename = window.event.srcElement.id;

    // Create a boolean which says whether the form is currently on display or not
    var onShow = ( d.style.display == "" || d.style.visibility == "visible" );

    // If on display, revert to original
    if( onShow )
    {
    document.getElementById( ename ).value = "Buy Template";
    d.style.display = 'none';
    d.style.visibility = 'hidden';
    }
    // Otherwise show the order form and change button text
    else
    {
    document.getElementById( ename ).value = "Hide Order Form";
    d.style.display = '';
    d.style.visibility = 'visible';
    }
    }
    And the code used to call it:
    <input class="hide" type="button" id="mdReveal" value="Buy Template" onClick="reveal('mdstyle');" />
    <div id="mdstyle" style="display:'none'; visibility:hidden;">
    Hidden Content here
    </div>
    <script language="JavaScript">document.getElementById('mdstyle').style.display = 'none';</script>
    Now, when clicking the input button, nothing happens. I'd like this to work on both IE and Mozilla Firebird.

    If anyone has any ideas, they would be greatly appreacited.

    Thanks

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's some code I've worked with in the past. Maybe it'll help you out:

    Code:
    <html>
    <head>
    	<title>Show - Hide Layer Javascript Code</title>
    <script language="JavaScript1.2" type="text/javascript">
    	function showLayer(layer_divid) {
    		if (document.layers){	// NS 4
    			document.layers[layer_divid].visibility = "show";
    		} else if (document.all){	//	ie
    			document.all(layer_divid).style.visibility = "visible";
    		} else if (document.getElementById){	//	NS 6+
    			document.getElementById(layer_divid).style.visibility = "visible";
    		}
    	}
    	
    	function hideLayer(layer_divid) {
    		if (document.layers){	// NS 4
    			document.layers[layer_divid].visibility = "hide";
    		} else if (document.all){	//	ie
    			document.all(layer_divid).style.visibility = "hidden";
    		} else if (document.getElementById){	//	NS 6+
    			document.getElementById(layer_divid).style.visibility = "hidden";
    		}
    	}
    	
    	function changeLayerContents(layer_divid,newContent) {
    		if (document.layers){	// NS 4
    			alert("I haven't figured out a way for it to work in Netscape 4.  Use Another browser please!");
    		} else if (document.all){	//	ie
    			document.all(layer_divid).innerHTML = newContent;
    			if(document.all(layer_divid).style.visibility == "hidden") showLayer(layer_divid);
    		} else if (document.getElementById){	//	NS 6+
    			document.getElementById(layer_divid).innerHTML = newContent;
    			if(document.getElementById(layer_divid).style.visibility == "hidden") showLayer(layer_divid);
    		}
    	}
    </script>
    </head>
    
    <body>
    <div style="position: relative; color: red; size: -3; visibility: hidden;" id="text_layer" nohref>This is a test layer</div><br><br>
    <a href="javascript:showLayer('text_layer');">Click here</a> to show layer.<br>
    <br>
    <a href="javascript:hideLayer('text_layer');">Click here</a> to hide layer.<br>
    <br>
    <a href="javascript:changeLayerContents('text_layer','This is now new content.');">Click here</a> to change contents of layer.<br>
    
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for that code, it works great, with the exception of the layers height still being there, so I made some modifications and now it doesn't work in IE, heres my code:
    function showLayer(layer_divid) {
    if (document.layers){ // NS 4
    document.layers[layer_divid].visibility = "show";
    document.layers[layer_divid].height = "auto";
    } else if (document.all){ // ie
    document.all(layer_divid).style.visibility = "visible";
    document.all(layer_divid).style.height = "auto";
    } else if (document.getElementById){ // NS 6+
    document.getElementById(layer_divid).style.visibility = "visible";
    document.getElementById(layer_divid).style.height = "auto";
    }
    }

    function hideLayer(layer_divid) {
    if (document.layers){ // NS 4
    document.layers[layer_divid].visibility = "hide";
    document.layers[layer_divid].height = "0px";
    } else if (document.all){ // ie
    document.all(layer_divid).style.visibility = "hidden";
    document.all(layer_divid).style.height = "0px";
    } else if (document.getElementById){ // NS 6+
    document.getElementById(layer_divid).style.visibility = "hidden";
    document.getElementById(layer_divid).style.height = "0px";
    }
    }
    And the code that calls it:
    <div style="position: relative; size: -3; display:none; visibility:hidden; height:0px;" id="text_layer" nohref></div>
    <a href="javascript:showLayer('text_layer');">Click here</a> to show layer.<br>
    <br>
    <a href="javascript:hideLayer('text_layer');">Click here</a> to hide layer.<br>
    Any Idea on how I can fix this for IE?

    Thanks

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your "rewritten" script shouldn't be working in any browser, not just IE.

    You're setting "visibility: hidden", "display: none" and "height: 0px" for that layer but your script is only changing two of those items so your layer should never become visible. Why not just use ONE method of showing/hiding the element instead of three.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #6
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've got it fixed, working in all browsers now:
    function showLayer(layer_divid) {
    if (document.layers){ // NS 4
    document.layers[layer_divid].visibility = "show";
    document.layers[layer_divid].height = "100%";
    document.layers[layer_divid].display = "block";
    } else if (document.all){ // ie
    document.all(layer_divid).style.visibility = "visible";
    document.all(layer_divid).style.height = "100%";
    document.all(layer_divid).style.display = "block";
    } else if (document.getElementById){ // NS 6+
    document.getElementById(layer_divid).style.visibility = "visible";
    document.getElementById(layer_divid).style.height = "auto";
    document.getElementById(layer_divid).style.display = "block";
    }
    }

    function hideLayer(layer_divid) {
    if (document.layers){ // NS 4
    document.layers[layer_divid].visibility = "hide";
    document.layers[layer_divid].height = "0px";
    document.layers[layer_divid].display = "none";
    } else if (document.all){ // ie
    document.all(layer_divid).style.visibility = "hidden";
    document.all(layer_divid).style.height = "0px";
    document.all(layer_divid).style.display = "none";
    } else if (document.getElementById){ // NS 6+
    document.getElementById(layer_divid).style.visibility = "hidden";
    document.getElementById(layer_divid).style.height = "0px";
    document.getElementById(layer_divid).style.display = "none";
    }
    }
    This way, the size of the div isn't noticeable when it isn't visible.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This way, the size of the div isn't noticeable when it isn't visible.
    Using the "display" property all by itself does that, all the rest is just excess code.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    New Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I tested that, and it wasn't working on one of the browsers (can't remember which, was either Firebird or IE), this way definately works for me and some other people I have got to test it, so I'm happy


  •  

    Posting Permissions

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