Welcome to WebmasterWorld Guest from 54.198.147.221

Forum Moderators: open

Message Too Old, No Replies

Toggle layers using Javascript

     
3:42 pm on Jul 7, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:June 16, 2003
posts: 615
votes: 0


Have this code that by default hides a div layer. Any advice on how to show layer by default would be appreciated:

<script>
function describe(x) {
var description;
for (i = 0; i < x.parentNode.childNodes.length; i++) {
if (x.parentNode.childNodes[i].className == "sessiondescription") {
description = x.parentNode.childNodes[i];
break;
}
}
if (description.style.display == 'block') {
description.style.display = 'none';
return;
firstCell.className = 'start';
secondCell.className = 'end';

} else {
description.style.display = 'block';
return;
}
}
</script>

css:

.sessiondescription
{
display: block;
font: Arial;
font-size: 9pt;
font-weight: normal; margin: 5px 0;
}

5:26 pm on July 7, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Simply change the CSS for your
.sessiondescription
element to
display: none;

I assume that the

describe()
function is automatically run? You could also change that, to ensure that it does not run initially, which would improve the experience for anyone unable to parse/run JavaScript.
5:46 pm on July 7, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Also,
if (description.style.display == 'block') {
description.style.display = 'none';
return;
firstCell.className = 'start';
secondCell.className = 'end';

}

firstCell and secondCell will never get set in this condition, move return to the end.

if (description.style.display == 'block') {
description.style.display = 'none';
firstCell.className = 'start';
secondCell.className = 'end';
return;
}

5:58 pm on July 7, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Good catch, rocknbil!
7:58 pm on July 7, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:June 16, 2003
posts: 615
votes: 0


Thanks guys.

Moved the "return;" to the end of that statement, worked fine, but changing the .sessiondescription element to "none" doesn't create the change of open layer on page load.

Any other ideas?

5:02 pm on July 8, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Any advice on how to show layer by default would be appreciated:
.....
changing the .sessiondescription element to "none" doesn't create the change of open layer on page load.

Likely because Javascript isn't "aware" of an element's properties unless the properties are inline. See this thread [webmasterworld.com] for details. Also recently discussed in this thread [webmasterworld.com]. So if you were to put an alert here,

.....
description = x.parentNode.childNodes[i];
break;
}
alert(description.style.display);
}
if (description.style.display == 'block') {
.....

The alert may very well say "undefined" (good test to see what's going on.)

Try the following. You can use methods to get at the element by class name but I'm using getElementByID here for example, which is easier to target unique elements. You can just add an ID attribute to the element.

<p id="sessiondesc" class="sessiondescription">blah</p>

<script type="text/javascript">

window.onload=function() {
if (document.getElementById('sessiondesc') {
getElementById('sessiondesc').style.display='none';
}
};

function describe(x) {
............

6:11 pm on July 8, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:June 16, 2003
posts:615
votes: 0


Cool. Thanks for the input. I'll play around with that and trial and error my way there.
10:04 am on July 9, 2009 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 20, 2009
posts:133
votes: 0


try jquery:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});

});
</script>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
</head>
<body>
Click me!
<div></div>
</body>
</html>

4:41 pm on July 13, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:June 16, 2003
posts:615
votes: 0


nanat,

very cool! thanks.