0

The problem is that the content for the jQuery accordion frequently renders before the accordion. While this only occurs for a short time its messy and I would like it to execute perfectly. I've researched this and have found very few similar issues reported. I'm looking for suggestions on possible causes for this type of problem. I realize that my question is vague but at the moment I'm out of ideas as to possible causes.

To see the effect got to this page and click on the image then watch as the next page renders. Very often you will see, fleetingly admittedly, the list of the contents before its covered by the accordion.

Additional Information:

  1. This symptom is inconsistent. Sometimes the page renders perfectly sometimes not.
  2. The content is created from a Wordpress template. I can't see why this would make a difference.
dorich
  • 1,059
  • 1
  • 17
  • 25

2 Answers2

3

Well, it appears that the styles are not applied when the page loads. I'm not sure ir JS is adding some extra classes, but you could try either applying the css styles before the js runs, or just hide the div acordion, and then show if after the load is completed. something like:

CSS

#accordion{display:none;}

JS

$(function(){
 $('#accordion').fadeIn('slow'); //of maybe .slideDown()
});

That could give you an extra effect and will give your site time to load the styles and do it's magic.

IngGaberick
  • 319
  • 1
  • 9
  • I would have checked this answer as well as the answer from Nabil Kadimi but it seems you can only check one answer. Anyway this was very helpful. – dorich Aug 12 '13 at 17:05
1

This is refered to as the FOUC (Flash of Unstyled Content), and the only solution to my knowledge --when you are dealing with jQuery FOUC-- is to hide the element with CSS when it's not yet styled, and show it with jQuery when you think the flash has finished.

Sometimes you don't see the FOUC, it's because your browsers grabs the JS files from the cache and styles everything very fast, there is no network delay.

Similar situation

Community
  • 1
  • 1
Nabil Kadimi
  • 10,078
  • 2
  • 51
  • 58
  • From the link I went back to Carl Sandberg's [solution][1] to the problem and used it to solve the problem.[1][http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content] – dorich Aug 12 '13 at 17:06
  • You mean http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content – Nabil Kadimi Aug 12 '13 at 18:20
  • I think the URL's go to the same page. Apologies but what's your point? & thx for the help. – dorich Aug 13 '13 at 01:13