Miva Merchant SEO, eCommerce, Miva Modules, Custom Web Apps, and Miva Merchant troubleshooting.
miva certified developers

Miva Merchant & Miva Script News

A flash of unstyled content when a webpage loads is ugly and annoying, and easily fixed.


As helpful as jQuery and other website plugins can be, a common issue is unstyled web page content coming up a moment before everything looks good. Luckily there's an easy five minute fix to keep unstyled content hidden until it's ready.

Computer Stuff, Website Tips & Tricks


This addresses the unstyled content flash issue where javascript functions are applying CSS to content that has already loaded. You see a flash of unstyled primordial web sludge content before the javascript (in my case a jQuery plugin) can style everything.

This solution uses jQuery and will not work on sites that don't already have jQuery loaded. If your site is run  by a CMS such as Wordpress or eCommerce solution like Miva Merchant, chances are jQuery is already being used.

The solution: hide the unstyled content until it's ready to be displayed. 

Example - see a demo

The example below uses CSS to force the left menu display to none when the page loads based on the .left-menu class.

.left-menu {
display: none;
}

After the javascript has executed, the left menu is "turned on" using the jQuery show() function.

$('.left-menu').delay(2000).show(0);
// this one has a delay built in, just for example

In my case, I had to hide left menu content until the styles were applied by a jQuery plugin called Easytree.js. My javascript call is like this:

$('.left-menu').show(0).easytree();

Here's the full demo page with the same code that you'll see by clicking on the demo link above:

<!DOCTYPE html>
<html>
<head>
<style>
.left-column {
float: left;
padding: 0 10px 0 10px;
}
.left-menu {
display: none;
}
.menu-content {
float: left;
border-left: 1px solid orange;
padding-left: 10px;
width: 70%;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<;h3>Menu: 2 second delay</h3>
<ul class="left-menu">
<li>Choice A</li>
<li>Choice B</li>
<li>Choice C</li>
</ul>
</div>
<div class="menu-content">
<h3>Menu Displays When Ready</h3>
<p>
The script below pauses for two seconds before the menu will be shown.
</p>
<p>
The .delay(2000) in the javascript forces a 2 second delay just for the example. If you were using this for real, you would change the javascript by removing .delay(2000) and adding the function you are waiting for.
</p>
<p>
In my case, it was a jQuery tree plugin (easytree.js) that was flashing content. The initializing function call is easytree() and the content flash was solved like this:
</p>
<p>
$('.left-menu').show(0).easytree();
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$('.left-menu').delay(2000).show(0);
</script>
</body>
</html>

overall rating:
my rating: log in to rate

css flash html javascript jquery

Please log in to leave a comment.

The blog posts on Scot's Scripts are served by Scot's Blogger, a Miva Merchant blogging module that makes it easy to create a Wordpress style blog, rich content, and extra pages in your Miva Merchant store.