Jquery UI interface looks ugly before document.ready

Question

HTML elements show earlier then onload or document.ready is fired.

All jQuery UI widgets load on document.ready and it makes page look ugly for few first seconds.

Possible option to deal with it - hide elements before they are pimped out with jQuery UI and show them with JS after load. But in case JS is turned off - user will not see any elements neither standard HTML nor jQuery UI.

What is the best practice to work with it?

Answer 1

If you look at the jQuery UI documentation, let's take tabs for example, if you look at the Theming tab, you can see the classes to apply to avoid the flash of unstyled content:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Note: This isn't the best practice, but if you want to avoid showing the content, it's an option, here's another:

You can hide the elements via CSS, give those wrapping <div> elements a class, let's say .startsUgly which in your stylesheet has:

.startsUgly { display: none; }

....and show them in JavaScript, e.g. $(".startsUgly").show();

Then to handle those JavaScript disabled users, some <noscript> magic:

<noscript>
  <style type="text/css">.startsUgly { display: block; }</style>
</noscript>

this way, those with JavaScript disabled simple don't get the display: none effect, they'll still see the content.

Answer 2

First of all, the jQuery UI classes in the documentation only apply after document.ready. You can style them all you like, but you will not get rid of the flash of unstyled content. The classes are useful for theming the UI, not for affecting how things look before the UI is in place.

Second, the noscript tag is basically to be avoided, for a wealth of reasons: 1) It doesn't really tell you if javascript is on or not. For example, it could be enabled in the browser but blocked by a firewall. 2) It's a block level tag, so there are only certain places where it can validly appear. It's not an all-purpose solution. 3) The tag doesn't differentiate between degrees of javascript implementation on different systems.

You were closer to the best practice in your original post. The trick is to do both the hiding and the showing in javascript. First, style your page so that it will look acceptable with javascript disabled. Then, to prevent the flash of unstyled content, do the hiding of the ugly elements in javascript before document.ready (this is the critical part) by assigning a class to the html element:

jQuery('html').addClass('blahblah');

Because the html element exists already, it's valid to work with it before document.ready. Then, like Nick says, put the offending elements in a div with the class "startsugly" and then put a line in your css that hides the offending elements:

.blahblah .startsugly {display: none;}

The point here is that the display:none only comes into play when javascript is enabled. Users with it disabled will still be able to access your content. Then, after document.ready, put in your jQuery UI "pimping" functions, and show the offending element again:

$(".startsUgly").show();

although if it's content that's only conditionally visible in an accordion or a tab structure, this last step might even be unnecessary.