vincea Posted December 14, 2006 Share Posted December 14, 2006 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 Link to comment https://forums.phpfreaks.com/topic/30657-hiding-elements-onload-prevent-flicker/ Share on other sites More sharing options...
Zane Posted December 14, 2006 Share Posted December 14, 2006 just set them to display: none in your stylesheetthe stylesheet is loaded when the page is loaded Link to comment https://forums.phpfreaks.com/topic/30657-hiding-elements-onload-prevent-flicker/#findComment-141244 Share on other sites More sharing options...
vincea Posted December 14, 2006 Author Share Posted December 14, 2006 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? Link to comment https://forums.phpfreaks.com/topic/30657-hiding-elements-onload-prevent-flicker/#findComment-141394 Share on other sites More sharing options...
Zane Posted December 14, 2006 Share Posted December 14, 2006 well instead of giving an id as a parameterpass 'this'and you'll already have the elementfor 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] Link to comment https://forums.phpfreaks.com/topic/30657-hiding-elements-onload-prevent-flicker/#findComment-141425 Share on other sites More sharing options...
vincea Posted December 15, 2006 Author Share Posted December 15, 2006 ahhh ok thanks alot :D Link to comment https://forums.phpfreaks.com/topic/30657-hiding-elements-onload-prevent-flicker/#findComment-141514 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.