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!
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.