Geek asks and answers

Avoiding FOUC on dynamically generated jQuery UI tabs

I dynamically create multiple tabs using jQuery UI tabs - the tabs are created using the foreachon the browse page as follows (some code markup):

<script type="text/javascript"> 
$(function($) {
   $('#plants').tabs('paging', { follow: true } );
});
</script>

<div id="plants">
    <ul>
    <?php foreach ($plants as $row):
      echo '<li><a href="#tabs-'.$row->plant_id.'">'.$row->plant_name.'</a></li>';
      endforeach; ?>
    </ul>
    <?php if (!empty($plants)):
          foreach ($plants as $row): ?>
        <div class="block" id="tabs-<?php echo $row->pet_id; ?>">
             <div class="grid_6">
                            <p>
                <?php echo '<h1>'.$row->pet_name.'</h1>'; ?>
                                etc...
                </p>
                     </div>
                 </div>
               <?php
               endforeach;
               else:
               endif; ?>
</div>

As above, the tabs are fine. The problem is that this is a good idea for Flash Out of Unstyled Content. This happens in IE, Chrome, FF.

I tried the CSS parameter in the jQuery documentation, didn't work.

There's a simple JS out there that inserts the CSS style into <head>and then applies {display:none}to a specific one id, but that makes my panels fade, waiting for user interaction. I need the first panel, which will be visible to the user when loading, as well as other tabs on top - without a rough FOUC.

- , FOUC jQuery? , , , , .

/ !

+3
3

, tabs() , , ....


$(document).ready(function() {

    //fire off the tabs
    $(function() {
        $( "#tabs" ).tabs();
    });

});

, ajax, - ajax, jquery.tmpl.

0

( <html>) , DOM , , DOM , html:

$('html').css('visibility','hidden');
$(function() {
    $('html').css('visibility','visible');
    $('#tabs').tabs();
});

, html , javascript head, DOM (, body).

+2

JQuery UI docs offer:

...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized

Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:

<div id="example" class="ui-tabs">
  ...
  <div id="a-tab-panel" class="ui-tabs-hide"> </div>
  ...
</div>

Not sure if you have tried this, or if it is really relevant.

+1
source

More articles:


All Articles