CSS and jquery loading

Question

I am working in a project and experienced a bug (may be a normal condition) that when I tried to load the home page of the website but the div that I hides from the jquery is shown to me then got hidden when the full page gets loaded.

I know this happened because of slow response of the server but I want that this should not be happened at any case.What should I do to make sure that the div should remain hidden; by default.

the code I am using right know is pretty straight forward:

$(document).ready(function(){
    $('#divId').hide();
});

this code works fine almost all the time i.e my div remains in hidden mode, but sometimes it gets shown up for a couple of seconds then gets hidden, so is there any technique to make sure that div should be in hidden mode every time (100%)

Thanks and one more thing because I am new in server side scripting may be I forgot something, so please consider it. Thanks

Answer 1

Why not simply hide it with CSS and if you need it then use jQuery to show it. Either put an in-line style below, or assign it a class/id and give it the below style to the class/id.

style="display: none;"

You'll never need to hide it on load this way.

Answer 2

Some CSS will do the trick:

#divId {
    display: none;
}

...and you're done.

Answer 3

why dont you hide it in the html markup

style="display:none;"

Answer 4

Set the div as hidden with stylesheets.

<div id="divID" style="display:none">