Good trick, will reuse, thanks ^^ Michel Belleville
2009/11/4 Richard D. Worth <rdwo...@gmail.com> > 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. >> > >
