Menu
I'm using jQuery UI Tabs. How should I prevent the flicker of loading content while also making sure that the content is visible when javascript is disabled?
I've tried adding a .js class to the body when the doc is loaded but as the tabs are loaded at the same time as the class being added there is still the flicker of content.
#container{display:none;}
<div id="container">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#tabs').tabs();
$('#container').show();
});
</script>
859
this is what I do. put a class of no-js on your html tag and then put the following code just after the html tag:
<script>
// Sets 'js' on html element and removes 'no-js' if present (here to prevent flashing)
(function(){
document.documentElement.className = document.documentElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + (' js ');
})();
</script>
This method allows you to have other classes on your html tag if required. Use the no-js class in your styles for pages that don't have js enabled.
styles example:
#container {
display:none;
}
.no-js #container
{
display: block;
}
<html class="nojs">
...
<head>
<script>
document.documentElement.className = "js";
</script>
</head>
...
<style>
#container {display:none;}
.nojs #container { display: block;}
</style>
this will make your content visible even when js is not available on your device. This approach is almost the same performed by H5BP + Modernizr and, as aside benefit, it will prevent the JS FOUC (flash of unstyled content due to js later execution).
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
