Hiding elements onload, prevent flicker?

[vincea]

Hey everyone,

Got a question:

i'm running some menus using the jquery toolkit effects and when I load the page obviously they are in their "down" state. I have tried the body onload="" and setting the divs to "display:none" onload. Although this is a logical solution the divs flicker onload because they are going from display: block to display:none and I don't want that.

Is there a different way to do this? maybe a way to collapse the menus on load, i dont know.  am i confusing anyone? i know i am confusing myself. lol

[Zane]

just set them to display: none in your stylesheet
the stylesheet is loaded when the page is loaded

[vincea]

yes i know i tried that... then in the onclick link i used a function to set display to block but then it just appears, so the point of using the blind effect from the jquery library was pointless.

the onclick:

[code]<li><a href="#" alt="Active Members" onClick="$('#sub').BlindToggleVertically(1000, null, 'bounceout');">Active Members</a></li>[/code]

the css:

[code]#sub2 li a {
font-size: 12px;
width: 140px;
display: block;
margin: 0 0 0 420px;
padding: 0 0 0 5px;
background: #333333;
opacity: .8;
}[/code]

the problem is.. the display is in a "li a" so using a function say for example:

[code] function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
[/code]

doesn't work because it will only change the display for "#sub {" not "#sub li a {"

anyone?

[Zane]

well instead of giving an id as a parameter
pass 'this'

and you'll already have the element
for instance
[code]
<a href="#" alt="Active Members" onClick="toggle_visibility(this)">

function toggle_visibility(obj) {
if(obj.style.display == 'none')
obj.style.display = 'block';
else
obj.style.display = 'none';
}
[/code]

and secondly you could use a ternary for your function to shorten it
[code]
function toggle_visibility(obj) {
    obj.style.display = obj.style.display == 'none'?'block':'none';
}
[/code]

[vincea]

ahhh ok thanks alot  :D