Welcome to WebmasterWorld Guest from 50.19.156.19

Forum Moderators: open

Message Too Old, No Replies

Layers appear and disappear, but ...

     

kreeves

2:40 pm on May 13, 2005 (gmt 0)

10+ Year Member



In my example, I've got two one parent layer and two child layers.

Here's the code.

function flipLinks (id) {
var x = document.getElementById(id)

if (x.style.visibility == 'hidden')
{
x.style.visibility = 'visible'
x.style.height = '';
}
else
{
x.style.visibility = 'hidden'
x.style.height = '0px'
}
}
function hideLinksOnLoad() {
var hide = new Array("testLinks",
"testLinks2")

for (i=0;i<hide.length;i++)
{
document.getElementById(hide[i]).style.visibility = 'hidden'
}
}

Here's the HTML

[code]<html>
<head>
<script src="tree.js"></script>
</head>
<body onload="hideLinksOnLoad()">
<layer>
<table border="0">
<tr>
<td>
<a href="#" onclick="flipLinks('testLinks')">Test</a>
</td>
</tr>
<tr>
<td>
<layer id="testLinks">
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
</layer>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="flipLinks('testLinks2')">Test</a><br />
</td>
</tr>
<tr>
<td>
<layer id="testLinks2">
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
</layer>
</td>
</tr>
</table>
</layer>
</body>
</html>

I'm trying to make it so that when they click the first link, it will push the 2nd link and everything below it down. However, it just hides it and there's a bunch of space inbetween the first and second link when both of the child layers are hidden.

Bernard Marx

9:46 pm on May 13, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<layer> tags?! They went out with the Backstreet Boys.
Only spported, I believe, by Netscape 4 (1% of browsers - or less).
Use <div>.

The CSS property you should use for this is "display".
Moreover, you don't need to initialise the display values in an onload handler. These can be set via stylesheet. These can't be read directly from the element's style object in the toggling function, but that's no problem, we just test for the presence¦absence of a property string..


!elm.style.display
=> string is empty
=> stylesheet value used
=> element is not currently displayed.

--------------------------
<html>
<head>
<style>
#testLinks{ display:none;}
</style>
<script>
function togDisplay(id, bool)
{
var style = document.getElementById(id).style;
style.display = style.display? '':'block';
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>
<a href="#" onclick="togDisplay('testLinks')">Test</a>
</td>
</tr>
<tr>
<td>
<div id="testLinks">
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
- <a href="#">Test</a><br />
</div>
</td>
</tr>
</table>
</body>
</html>