...

View Full Version : Show / Hide divs



Skaidon
12-20-2003, 04:13 PM
OK, I have worked off of this : tutorial (http://www.olate.com/tutorials/view/132), but, I would like to have multiple divs on the page, opening and closing independantly.

How would I go about doing this?

Thanks

Skaidon
12-20-2003, 07:11 PM
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

Oakendin
12-20-2003, 08:40 PM
Here's some code I've worked with in the past. Maybe it'll help you out:



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

Skaidon
12-21-2003, 11:21 AM
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

Roy Sinclair
12-22-2003, 09:20 PM
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.

Skaidon
12-23-2003, 09:38 AM
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.

Roy Sinclair
12-23-2003, 08:50 PM
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.

Skaidon
12-23-2003, 09:51 PM
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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum