HTML Software Showing a Blank Page
Web templates with a fade-in css script
When opening the template HTML pages in wysiwyg software a blank page is displayed. This is caused by the fade-in css and fade Javascript.
See Also…
See Also…
Fix for the empty page
This blank page view is caused by the template fade-in script. To work around this, edit the "style.css" and near the top change the "#fadediv" to "#fadedivxxx". Be sure to change this class name back when you are done editing to allow your webpages to fade-in.
Script for the fade-in
In addition to the css code used for the webpage fade-in, a jQuery script is included in the "javascripts-footer.js" that does the actual fade-in function. This file may be in your template "includes" folder.
What is the fade script for?
This script allows the template webpages to fade-in. In some web browsers the page elements may "jump" as they load and this script hides them for 0.5 seconds as the page loads so they fade-in instead.
Templates that include this script
To see if your template includes the fade-in script, look in your .css file (style.css) and look for a class called #fadediv near the top, or check in your "javascripts-footer.js" (in the "includes" folder) for the jQuery function $("#fadediv").fadeOut("fast").
Removing the fade-in
If you do not want to use the fade function it can be removed a few different ways:
- Option #1: Edit the following line in your "style.css" near the top on about line #45:
...edit from the following...
#fadediv { background-color: #FFFFFF; position: absolute; top: 0; left: 0; z-index: 22000; height: 100%; width: 100%; }
...to this instead...
#fadediv { background-color: transparent; position: absolute; top: 0; left: -10; z-index: -10; height: 2px; width: 2px; }
- Option #2: Remove the following in each of your HTML pages near the top just after the <body> tag:
<div id="fadediv"></div>
- If you only do Option #1: above, do not remove the following function in the "javascripts-footer.js" or it may cause webpage loading errors:
If you do Option #2: above, you will need to remove the following code in your "javascripts-footer.js" to prevent any webpage loading errors:
// PAGE FADE IN SCRIPT
$(window).load(function() {
$("#fadediv").fadeOut("fast");
});
- Option #3: You can do both option #1 and #2, and then remove the script in the "javascripts-footer.js". In this case you can then remove the entire line for the #fadediv class in your "style.css".