Skip navigation
Currently Being Moderated

Flash of Unstyled Content (FOUC) on Jquery mobile site

Dec 4, 2012 2:45 PM

Tags: #jquery #dreamweaver #mobile #javascript #html5 #cs6

So our mobile website is getting a FOUC on load and any page click. Site is m.whitewatertours.com and it happens any time an external css is added to the <head>, code here:

 

<link rel="stylesheet" href="twt_mobile.css">

 

I've tried several things like:

 

1) adding <script type="text/javascript"></script> right before my <link...> (mentioned in this post: http://forums.adobe.com/message/3800999#3800999) - this did nothing

 

2) replaced <link...> with

<link rel="stylesheet" type="text/css" media="print" href="print.css">

<style type="text/css" media="screen">@import "twt_mobile.css";</style>

as suggested on this website: http://www.bluerobot.com/web/css/fouc.asp/ - still did not help

 

3) adding the css as an import - looks like this:

<style type="text/css">

@import url("twt_mobile.css");

</style> - did not help

 

4) I read this page 2X and it is beyond my comprehension what needs to be done:

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unst yled-content

 

Appreciate any insight on the matter!

Thanks, Jenny

 
Replies
  • Currently Being Moderated
    Dec 4, 2012 3:08 PM   in reply to TribJenny

    You could use jQuery on document load to hide the footer or other offending region for a few seconds while scripts and CSS files have time to fully load.   

     

    Example of jQuery .hide .slide & .fadeIn effects:

    http://alt-web.com/DEMOS/jQuery-slide-n-fadeIn-demo.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2012 4:51 PM   in reply to TribJenny

    If you don't have it already, this goes inside your <head> tags:

     

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

    </script>

     

    This function goes above references to CSS and other scripts in your page.

     

    <script type="text/javascript">

    $(document).ready(function(){
          $('#header').hide().delay(2500).fadeIn (1000);
    //delay, fadeIn rate in milliseconds. Use higher values for slower transitions//
    });
    </script>

     

    Obviously, you'll need to change #header to an applicable ID in your own pages. For example, if you want to hide your #footer ID, use that instead of #header.   If you want to hide a class, use .footer.


    Nancy O.


     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 12:50 PM   in reply to TribJenny

    Sorry the JS didn't work.  I'm starting to think that @media queries and @font-face rules are simply causing some browsers/devices to puke.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 4:15 PM   in reply to TribJenny

    Glad to hear you sorted this out.

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points