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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Delay script from starting

    Hey i need some help delaying this script so it starts 5 seconds after the page loads not instantly.





    <script>


    $('#ad_1 > img').each(function(i,e){
    rotate($(this),600,4000,i);
    });
    function rotate(elem1,speed,timeout,i){
    elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
    var other;
    if(elem1.parent().attr('id') == 'ad_1')
    other = $('#ad_2').children('img').eq(i);
    else if(elem1.parent().attr('id') == 'ad_2')
    other = $('#ad_3').children('img').eq(i);
    else if(elem1.parent().attr('id') == 'ad_3')

    other = $('#ad_1').children('img').eq(i);

    other.animate({'marginLeft':'0px','width':'35px'},speed,


    function(){
    var f = function() { rotate(other,speed,timeout,i) };
    setTimeout(f,timeout);
    });
    });

    }

    });


    </script>

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Hey i need some help delaying this script so it starts 5 seconds after the page loads not instantly
    In your window onload event handler you can use setTimeout() to delay the execution of some code.

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    In your window onload event handler you can use setTimeout() to delay the execution of some code.
    that sounds like what i need can you show me an example please?

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    what don't you understand about the example in the link I posted?

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    what don't you understand about the example in the link I posted?
    oh sorry i did not notice the link :O

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Could i place a setTimeout before the code to cause a delay in it running?

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    could i also place a .delay(5000) in there somewhere? to give a 5 second gap before the start?

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Ant-B View Post
    Hey i need some help delaying this script so it starts 5 seconds after the page loads not instantly.
    Quote Originally Posted by Ant-B View Post
    Could i place a setTimeout before the code to cause a delay in it running?
    Like I said earlier - put it in your window onload event handler.

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Ant-B View Post
    Hey i need some help delaying this script so it starts 5 seconds after the page loads not instantly.





    Code:
    <script>
    
      
        $('#ad_1 > img').each(function(i,e){
            rotate($(this),600,4000,i);
        });
        function  rotate(elem1,speed,timeout,i){
            elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
                var other;
                if(elem1.parent().attr('id') == 'ad_1')
                other = $('#ad_2').children('img').eq(i);
    			else if(elem1.parent().attr('id') == 'ad_2')
    			other = $('#ad_3').children('img').eq(i);
    			else if(elem1.parent().attr('id') == 'ad_3')
    	
    			other = $('#ad_1').children('img').eq(i);
    	
                    other.animate({'marginLeft':'0px','width':'35px'},speed,		
    				
    				
    				function(){
                    var f = function() { rotate(other,speed,timeout,i) };
                    setTimeout(f,timeout);
                });
            });
    		
        }
    
      });      
    		  
            </script>
    Code:
    <script>
    function delayed(){
     $('#ad_1 > img').each(function(i,e){
            rotate($(this),600,4000,i);
        });
        function  rotate(elem1,speed,timeout,i){
            elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
                var other;
                if(elem1.parent().attr('id') == 'ad_1')
                other = $('#ad_2').children('img').eq(i);
    			else if(elem1.parent().attr('id') == 'ad_2')
    			other = $('#ad_3').children('img').eq(i);
    			else if(elem1.parent().attr('id') == 'ad_3')
    	
    			other = $('#ad_1').children('img').eq(i);
    	
                    other.animate({'marginLeft':'0px','width':'35px'},speed,		
    				
    				
    				function(){
                    var f = function() { rotate(other,speed,timeout,i) };
                    setTimeout(f,timeout);
                });
            });
    		
        }
    
     });    
    };  		  
            </script>
    <body onload="setTimeout(delayed,5000)">

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Code:
    <body onload="setTimeout(delayed,5000)">
    The risk with attaching the onload to the body is that images that are being preloaded (which is what I would normally do in this situation) might still be downloading when the body onload is triggered.

    I'm pretty sure that since images are downloaded in a parallel stream to the rest of the page, the window onload is triggered after the images have finished downloading as well.

    The last thing you want is for the animation to start before all the images are downloaded.

    Hence my suggestion to put the setTimeout() in the window's onload event handler.


  •  

    Posting Permissions

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