I have a number of dropdowns and divs that are hidden when the page loads and can be toggled with a click or mouseover, but some of them flash b/c the javascript does not run in time. I have their display initially set to block and then I use javascript/prototype to find the element and hide it. I have tried loading these "hider" functions using dom:loaded but there is still flashing. This is an example of a dropdown prototype initialization funtion. From http://www.makesites.cc/programming/by-makis/simple-drop-down-menu-with-prototype/:

var DropDownMenu = Class.create(); DropDownMenu.prototype = { initialize: function(menuElement) { menuElement.childElements().each(function(node){ // if there is a submenu var submenu = $A(node.getElementsByTagName("ul")).first(); if(submenu != null){ // make sub-menu invisible Element.extend(submenu).setStyle({display: 'none'}); // toggle the visibility of the submenu node.onmouseover = node.onmouseout = function(){ Element.toggle(submenu); } } }); } };

Is there a better way to hide div's or dropdowns to avoid this flashing?