Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

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

    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

    Code:
    $(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

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    $(window).load will wait until the whole document, including images, has been loaded.

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

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    $(document).ready(function() {
    happens before window.load

    if that doesn't do it well enough you can try:
    Code:
    <style type="text/css">
    .form_wrap {
    display: none;
    }
    </style>
    <noscript>
    <style type="text/css">
    .form_wrap {
    display: block;
    }
    </style>
    </noscript>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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

  • #5
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    As already stated in my previous post, you are supposed to replace $(window).load with $(document).ready.

  • #6
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •