(Jquery) simple issue of div displaying before "display:none" rendered

[gribbs100]

Hello Guys,

I have a pretty simple issue here but not sure what to do.

I have a div that I want to fade in on a page so in order to do that, it has to be set to display:none first but, I want to do that in jquery, not css.

The reason is that in the rare chance that the visitor has js tuned off, well then the div would never show up at all if the css had display none. So I set the jquery to change the display to "none" and then after that, fade in the same div.

The problem is that when you load the page, for a split second, you see the div ( before it renders the display:none") and then it fades in. It looks kind of buggy.

Is there a way to avoid this issue? I don't want to set display:none in the css.

To be honest, I have seen a ton of high end sites that use a lot of jquery and you would think they would know to set it up this way. You turn off js and the entire site never gets to display at all. that is definitely a wrong approach and very risky.

Is there a simple way to fix this? Here is my simple JS

$(window).load(function() {

    
	$(".form_wrap").css("display","none"); 
	
	
	  $('.form_wrap').delay(700).fadeIn(1100);
				
					
			 });

The "display:none" just doesnt trigger fast enough and you see the content for a split second.

thanks

[venegal]

$(window).load will wait until the whole document, including images, has been loaded.

What you really want to use here is $(document).ready.

[harbingerOTV]

$(document).ready(function() {

happens before window.load

if that doesn't do it well enough you can try:

<style type="text/css">
.form_wrap {
display: none;
}
</style>
<noscript>
<style type="text/css">
.form_wrap {
display: block;
}
</style>
</noscript>

[gribbs100]

harbingerOTV,

i would like to try your 1st approach of $(document).ready(function() { but, do i use that plus the $(window).load(function() { ?

How would I code this?

Thanks

[venegal]

As already stated in my previous post, you are supposed to replace $(window).load with $(document).ready.

[gribbs100]

Thank you