Question

Trying to do a bit of jquery for a landing page I’m putting up. I’m absolutely horrible at JS so bear with me.

Here’s the page where I’m developing it:

http://kickstartyourbiz.info/

For the rotating numbers under the placeholder pic, I’m using the following code:

<script>

setInterval(function() {
  var min = 1000;
  var max = 100000;
  var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
  $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
  var newnumber = Math.round(number / .6);
  $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);
},
5000);

</script>

<div id="random_number"></div>

<div id="wtf"></div>

Few problems with this:

1) the numbers don’t load until five seconds, which I’m assuming is due to the interval. But how do I get the numbers to start showing/rotating as soon as the page loads?

2) when the numbers fade out, the lower “logo” section is brought up, then back down. I’m guessing this is because the <div> disappears when the fade out occurs, then comes back when it fades in again. What can I do to prevent this?

Lastly, I would also like to add a dollar sign to the beginning of the numbers, and, if it’s simple enough, put commas in every three numbers. So it would look something like this:

$93,029 – $163,029

Thanks for any help, really appreciate it!

EDIT:

Okay, think I might know what the issue is, to some extent…

So when I have this function:

function() {
  var min = 1000;
  var max = 100000;
  var firstnumber = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
  $('#random_number').text(firstnumber);
  var newnumber = Math.floor(firstnumber / .6);
  $('#wtf').text(newnumber);
}

and then try and call it with , nothing shows up on the page. But then when I use this code:

setInterval( function() {
  var min = 1000;
  var max = 100000;
  var firstnumber = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
  $('#random_number').text(firstnumber);
  var newnumber = Math.floor(firstnumber / .6);
  $('#wtf').text(newnumber);
},
5000);

It DOES show up on the page, but only after 5 seconds.

So I’m wondering why it won’t show up on the page without setInterval?

Answer 1

1. The numbers don’t load until five seconds

   The reason is that, you execute the function() {var min ... (450);} only after 5000 milliseconds.

   Replace:

   setInterval(function() {
       var min = 1000;
       var max = 100000;
       var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
       $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
       var newnumber = Math.round(number / .6);
       $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);
   },
   5000);
   

   With:

   $(document).ready(function () {
     var min = 1000;
     var max = 100000;
     var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
     $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
     var newnumber = Math.round(number / .6);
     $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);
   
     setInterval(function() {
       var min = 1000;
       var max = 100000;
       var number = 1 + Math.floor(Math.random() * (max - min + 1)) + min;
       $('#random_number').fadeIn(500).text(number).delay(4000).fadeOut(450);
       var newnumber = Math.round(number / .6);
       $('#wtf').fadeIn(500).text(newnumber).delay(4000).fadeOut(450);
     },
     5000);
   }
   

2. What can I do to prevent this?

   Consider using opacity instead of fadeOut as it takes away content from the DOM, which gives you the jump.

3. I would also like to add a dollar sign to the beginning of the numbers

   Consider using jQuery Number Format, a jQuery plugin, which does the same thing which you expect.