See http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content
<http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content>- Richard On Wed, Nov 4, 2009 at 10:21 AM, Newbie <hjohn...@geolearning.com> wrote: > I am working on an accordian side navigation jquery piece and I am > unable to get it to operate exactly how I want. > > The menu was originally designed by Roshan Bhattarai and can be viewed > at http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html > > The original design does not degrade well since the div containing the > drop down menu information is set to display:none using CSS- but > another forum poster suggested that the css selector be removed and > the hiding function be set in the jquery. > > This is the code that was added to perform this function: > > $("div.menu_body").hide(); > > The code works to some extent, however the div does appear on the page > for a split second on refresh or on page load and then diseappears. > > I am thinking I either did something wrong, am missing something, or > could put that bit of code somewhere else in the script for the div to > truly be hidden until the visible header is clicked. > > The whole point of adding this code is so the accordian menu degrades > gracefully- if there is another way for the entire menu to be viewable > with javascript turned off, please detail the steps. > > I have downloaded the newest version of jquery. > > Here is the entire script for the menu. > > <script type="text/javascript" language="javascript" src="/javascript/ > jquery.js"></script> > <script type="text/javascript"> > <!--//---------------------------------+ > // Developed by Roshan Bhattarai > // Visit http://roshanbh.com.np for this script and more. > // This notice MUST stay intact for legal use > // ---------------------------------> > $(document).ready(function() > {$("div.menu_body").hide(); > //slides the element with class "menu_body" when paragraph with > class > "menu_head" is clicked > $("#firstpane p.menu_head").click(function() > { > $(this).css({backgroundImage:"url(down.png)"}).next > ("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp > ("slow"); > $(this).siblings().css({backgroundImage:"url(left.png)"}); > }); > //slides the element with class "menu_body" when mouse is over the > paragraph > $("#secondpane p.menu_head").mouseover(function() > { > $(this).css({backgroundImage:"url(down.png)"}).next > ("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp > ("slow"); > $(this).siblings().css({backgroundImage:"url(left.png)"}); > }); > }); > </script> > > The site is on a private server behind a firewall so I cannot share > the site but I can provide as much information as possible to solve > this issue. > > An example of that preload or "flashing" upon refresh of the page with > this type of code is viewable on this website: > http://docs.jquery.com/Effects/hide - If you view the demo where it > stated "Click to hide me too" and continue to watch that line will > refreshing the page, you will see the hidden information for a split > second and then it will hide. I am wondering and trying to find a way > to prevent that flash of hidden information to be viewable at all. >
