Hide Element Before DOM Loads ?

Greetings,

The following code hides some DIV elements which can later be displayed depending on user action.

The problem is, the DIV elements are displayed on the web page for a brief moment and then hidden. This is NOT the effect I want. The DIV elements should be hidden, not displayed for a brief moment and then hidden.

window.onload approach:


/*window.onload = function() {
hideElementsOnLoad();
}



function hideElementsOnLoad () {
// When the page loads, hide the form type help list and each form type.
var formTypeHelpList = document.getElementById("formtypehelp");
var uniGroupForm = document.getElementById("unigroupform");
var uniAffilForm = document.getElementById("uniaffilform");

formTypeHelpList.style.display="none";
uniGroupForm.style.display="none";
uniAffilForm.style.display="none";
}


So, I looked into using Prototype.js to solve the issue of the DIV elements being displayed for a brief moment then hidden. Using Prototype.js, the code above can be replaced with this. The benefit being, the elements are hidden right after the DOM loads but before images are loaded.


document.observe("dom:loaded", function() {
// When the page loads, hide the form type help list and each form type.
$('formtypehelp', 'unigroupform', 'uniaffilform').invoke('hide');
});


Unfortunately, Prototype's way still results in the elements being displayed on the page for a brief moment and then hidden. It's the same result the window.onload approach produced. :-(

Another approach would be to hide the DIV elements by default, by using CSS (display:none;). The DIV elements could then be displayed by using JavaScript (display:block;). But I would prefer not to use this approach since the DIV elements would not be visible to a JavaScript disabled device.

Perhaps it is possible to hide the DIV elements as the DOM is loading?

I am seeking suggestions on how to solve this problem. Thank you in advance.

Try using CSS

#hiddenElement{ display:none;}

If that's not what you want make sure that your function goes right as that div loads. If you use the body tag's onload event handler it will wait for the entire body to load before hiding the element.

You can load a stylesheet with javascript, before the body renders, either with a document.write or document.createElement script in the head of the document.

Ninnypants and mrhoo, thank you both for your suggestions. I'm going to play around with them and report back when I have a solution.

@ninnypants:
If that's not what you want make sure that your function goes right as that div loads.

Correct, I do NOT want the DIV elements to be hidden by default by way of CSS. If I did this, JavaScript disabled devices would not be able to view the DIV elements since there would be no way to remove the {display:none;} code.

make sure that your function goes right as that div loads.

Yes ! But how ?? How to hide an element as the DOM is loading - not after it has loaded?

Run your function in the head of your document. The only problem with this solution is that your script will probably throw an error because the elements are not defined. So you will want to test it in the head, and just below your divs.

<script type="text/javascript">
function yourFunction(){
your code....
}
// Your function will run as soon as the browser loads your code.
yourFunction();
</script>

Firstly, DOM ≠ window.

You don't need to hide anything as the DOM is loading. You need to hide it before the window starts rendering, which occurs after the DOM has loaded.

You have a couple of options…

• Use a js script in your doc head to add a second stylesheet (to the head) which contains the hide rules for the object being targeted.

Alternatively, you could use js to add the hide rule to the existing style element.

Due to browser inconsistencies, I'd advise adding the js stylesheet, rather than the rule, if taking this route.

• Use a DOMReady function, such as those available in the popular js frameworks, such as jQuery, YUI or lighter, less well known ones such as DLite.

www.jquery.com
http://developer.yahoo.com/yui
www.robertnyman.com/dlite

The DOMready function could be used to either add a hide class to the object(s) being targeted, or you could add the class in the markup itself, but set rules in the stylesheet which rely on a body className of 'js' to hide them.

e.g.
body.js .hidden {
display: none;
}

…

<div class="hidden">…</div>

Then you only need to use DOMReady to add a class of js to the body element.
This hides the object(s) using CSS, but makes the process dependent on the presence of js.