Welcome to WebmasterWorld Guest from 54.160.221.82

Forum Moderators: open

Message Too Old, No Replies

Layers appear and disappear, but ...

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

New User

10+ Year Member

joined:Apr 8, 2004
posts:12
votes: 0


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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


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