homepage Welcome to WebmasterWorld Guest from 54.166.255.168
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

    
Toggle layers using Javascript
dertyfern

10+ Year Member



 
Msg#: 3947759 posted 3:42 pm on Jul 7, 2009 (gmt 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;
}

 

DrDoc

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



 
Msg#: 3947759 posted 5:26 pm on Jul 7, 2009 (gmt 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.

rocknbil

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



 
Msg#: 3947759 posted 5:46 pm on Jul 7, 2009 (gmt 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;
}

DrDoc

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



 
Msg#: 3947759 posted 5:58 pm on Jul 7, 2009 (gmt 0)

Good catch, rocknbil!

dertyfern

10+ Year Member



 
Msg#: 3947759 posted 7:58 pm on Jul 7, 2009 (gmt 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?

rocknbil

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



 
Msg#: 3947759 posted 5:02 pm on Jul 8, 2009 (gmt 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) {
............

dertyfern

10+ Year Member



 
Msg#: 3947759 posted 6:11 pm on Jul 8, 2009 (gmt 0)

Cool. Thanks for the input. I'll play around with that and trial and error my way there.

nanat

5+ Year Member



 
Msg#: 3947759 posted 10:04 am on Jul 9, 2009 (gmt 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>


dertyfern

10+ Year Member



 
Msg#: 3947759 posted 4:41 pm on Jul 13, 2009 (gmt 0)

nanat,

very cool! thanks.

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