homepage Welcome to WebmasterWorld Guest from 54.205.207.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Layers appear and disappear, but ...
kreeves

10+ Year Member



 
Msg#: 3708 posted 2:40 pm on May 13, 2005 (gmt 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.

 

Bernard Marx

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3708 posted 9:46 pm on May 13, 2005 (gmt 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>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved