Advanced Search

Results 1 to 3 of 3

Thread: setTimeout command breaking simple number ticker...

  1. #1
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default setTimeout command breaking simple number ticker...

    Hi all,

    I have a couple of simple number scrolling functions that currently work just fine. If you copy the code below into your editor, you'll see that when the page loads, the top number scrolls up to 49 and the bottom scrolls up to 98.

    My question, is that I want to wrap these two functions in a larger function and apply setTimeout events to each of the functions to give each a second or two delay upon when the page loads, before the numbers start scrolling. Attempting to either wrap the two functions into a setTimeout or even wrap these two functions into a larger function just ends up breaking the scrolling number animations. There's likely a syntax issue I'm messing up here but how would you all accomplish this? Thanks in advance!


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
            <meta name="apple-mobile-web-app-capable" content="YES" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
            <meta name="format-detection" content="telephone=no" />
          
            <style>
                   body {}
                   .placeit {font-size:26px;}
    
            </style>
    
    
    
    </head>
    <body onload="scrollUp();scrollUpTwice();">
    
    
            <div class="placeit"><span id="numbers">0</span><sup>%</sup></div>
            <div class="placeit"><span id="numbersTwo">0</span><sup>%</sup></div>
    
    
    	<script type="text/javascript" charset="utf-8">
    
                   var nums = document.getElementById('numbers');
                   var numsTwo = document.getElementById('numbersTwo');
                   var value = parseFloat(nums.innerHTML);
                   var valueTwo = parseFloat(numsTwo.innerHTML);
                   var timeoutTimer = 10;
    	       var timeoutTimerTwo = 30;
    
           
    		function scrollUp() {
                           // the top value in the y-axis
                           if(value < 49) {
                                   value += 1;
                                   document.getElementById('numbers').innerHTML = value.toFixed(1);
                              if(value < 49) {
                                          // timeoutTimer will get reduced to zero
                                          // if needed put in a check and a min value
                                          
                                      countdown = setTimeout('scrollUp()', timeoutTimer);
                              }
                           }
                   }
         
                  
                   function scrollUpTwice() {
                           // the top value in the y-axis
                           if(valueTwo < 98) {
                                   valueTwo += 1;
                                   document.getElementById('numbersTwo').innerHTML = valueTwo.toFixed(1);
                                   if(valueTwo < 98) {
                                          // timeoutTimer will get reduced to zero
                                          // if needed put in a check and a min value                          
    
             
    
                                          countdown = setTimeout('scrollUpTwice()', timeoutTimerTwo);
                                   }
                           }
                   }
    
    
    	</script>
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,709
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
            <meta name="apple-mobile-web-app-capable" content="YES" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
            <meta name="format-detection" content="telephone=no" />
          
            <style>
                   body {}
                   .placeit {font-size:26px;}
    
            </style>
    
    
    
    </head>
    <body>
    
    
            <div class="placeit"><span id="numbers">0</span><sup>%</sup></div>
            <div class="placeit"><span id="numbersTwo">0</span><sup>%</sup></div>
    
    
    	<script type="text/javascript" charset="utf-8">
    window.onload = function(){setTimeout(function(){
                   var nums = document.getElementById('numbers');
                   var numsTwo = document.getElementById('numbersTwo');
                   var value = parseFloat(nums.innerHTML);
                   var valueTwo = parseFloat(numsTwo.innerHTML);
                   var timeoutTimer = 25;
    	       var timeoutTimerTwo = 30;
    
           
    		function scrollUp() {
                           // the top value in the y-axis
                           if(value < 49) {
                                   value += 1;
                                   document.getElementById('numbers').innerHTML = value.toFixed(1);
                              if(value < 49) {
                                          // timeoutTimer will get reduced to zero
                                          // if needed put in a check and a min value
                                          
                                      countdown = setTimeout(scrollUp, timeoutTimer);
                              }
                           }
                   }
         
                  
                   function scrollUpTwice() {
                           // the top value in the y-axis
                           if(valueTwo < 98) {
                                   valueTwo += 1;
                                   document.getElementById('numbersTwo').innerHTML = valueTwo.toFixed(1);
                                   if(valueTwo < 98) {
                                          // timeoutTimer will get reduced to zero
                                          // if needed put in a check and a min value                          
    
             
    
                                          countdown = setTimeout(scrollUpTwice, timeoutTimerTwo);
                                   }
                           }
                   }
    setTimeout(scrollUp, 1500);scrollUpTwice();
    }, 1000);}
    	</script>
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Shammus (04-27-2013)

  4. #3
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Thanks John, that worked exactly as needed. I was trying to wrap each of the smaller functions - scrollUp and scrollUpTwice in their own setTimeout functions which resulted in the numbers scrolling up to "1%" but going no higher.

    As always, your help is greatly appreciated!!

Similar Threads

  1. Script to post a number then another number
    By PatrikIden in forum Looking for such a script or service
    Replies: 4
    Last Post: 02-11-2012, 11:29 PM
  2. breaking news xrumer blast breaking captcha code
    By GefsIllishemi in forum The lounge
    Replies: 0
    Last Post: 01-22-2010, 05:13 PM
  3. Simple Controls Gallery: number of images
    By tastegw in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-20-2009, 07:26 AM
  4. Resolved Simple Controls Gallery: number of photos doesn't show in IE7
    By Polbel in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 05-17-2009, 06:52 AM
  5. Breaking out of Iframe
    By Rohan72 in forum PHP
    Replies: 5
    Last Post: 02-18-2007, 05:39 PM

Bookmarks

Posting Permissions

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