3

I dynamically create multiple tabs using jQUery UI tabs -- the tabs are created using a foreach on a view page as follows (some codeigniter 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 formed fine. Problem is the good ol' Flash Of Unstyled Content. It happens on IE, Chrome, FF.

I've tried the CSS option on the jQuery documentation, didn't work.

There's a simple JS that inserts a CSS style on <head> and then applies a {display:none} on a specific id -- but that makes my panels disappear, waiting for user interaction. I need the first panel to be visible to the user on load, along with the other tabs on the top -- without the darn FOUC.

Does anyone know how to definitely resolve FOUC on jQuery UI tabs? It's really not looking good and I may have to abandon tabs altogether if I can't resolve this.

Any pointers/roadmaps are much appreciated!

pepe
  • 9,799
  • 25
  • 110
  • 188

3 Answers3

2

Hide the entire page (the <html> element) before the DOM is ready, then once the DOM is ready you make the html element visible again:

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

This works because the html element is available by the time this javascript is encountered in the head, before any other DOM elements (like body) are available.

Stefan
  • 3,850
  • 2
  • 26
  • 39
1

JQuery UI docs suggest:

...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 indeed relevant.

Ross
  • 18,117
  • 7
  • 44
  • 64
  • thanks but i tried it and it made no difference -- i wonder if there's a way of loading the other tabs on demand via ajax - any idea? – pepe Mar 14 '11 at 22:27
0

I found that firing the tabs() function inside a document ready in the head tag prevented that unstyled flash of tabs for me....


$(document).ready(function() {

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

});

A different approach I used for getting the tabs to show up via ajax, is a ajax request that writes the tabs via jquery.tmpl.

Peter
  • 2,276
  • 4
  • 32
  • 40
  • interestingly that made things worse, the flash actually takes longer with the document.ready instruction -- this happened both when putting – pepe Mar 15 '11 at 23:32
  • What else are you loading in terms or scripts? – Peter Mar 16 '11 at 09:56
  • I'm just using the jquery Ajax request... Jquery template writes the tabs, then I fire the tabs... It's all jquery... – Peter Mar 16 '11 at 09:59
  • thanks I'll take a look at using jQ ajax on this - do you have any link to documentation/tut on how to implement it the way you did? or all you did was use the code you mention above? – pepe Mar 16 '11 at 23:32
  • email me at petroz at mac dot come and Ill send you the script. – Peter Mar 17 '11 at 00:01
  • 1
    You have 2 nested `document.ready()` since `$()` is a shortcut for `$(document).ready()`. http://api.jquery.com/ready/ – Stan Dec 21 '12 at 11:02