countdown

allworknoplay · 04-03-2009, 04:53 AM

Hey guys/gals:

I have a question for you JS pro's....

I've found some countdown JS scripts but you have to set the time ahead of time near the <header>, so it seems like a one shot deal. Like if you were counting down for say a movie opening.

You would set the target date once, and then the script would count down. But I need multiple(random) countdown's....

I generate a random number of rows, each would have a different countdown though. So I was wondering what is the best way to do this? I'll provide a quick example:

Code:

#   User-logged-In    Username
------------------------------
1      100 sec        James Dolan
2      55 sec         John Smith
3      75 sec         Jane Doe

The "user-logged-in" column is where you would see the countdown.

I am in no way a javascript expert. In fact I'm not even a novice. I don't know JS at all..

So I am definitely pleading for help. Would anyone have any suggestions?

Krik · 04-03-2009, 06:32 AM

HTML Code:

setTimeout("myfunc();", 1000);

that code with after 1 second run the "mufunc" function. If I have that inside of the "myfunc" function it will every second run the "myfunc" function in an indefinite loop.

If you wish to have it end after a variable number of loops

HTML Code:

var stopcount = 93;
var loopcount = 0;
function myfunc() {
loopcount++;
    if (loopcount == stopcount) {
    clearTimeout(counter);
    }
    else {
    counter = setTimeout("myfunc();", 1000);
    }
}

As you can see it looks a lot like PHP the only difference is in the internal functions. Basically any time I need to do something with javascript I go to google and type in javascript and the name of the equivalent PHP function and I usually find the javascript function or if it don't exist the work around that people have made to do the same thing.

EDIT
I should note that officially 1000 is a second. But in testing I have seen as little as 990 make a full second. So you may need to adjust. Of course I suspect this is based on the individual computer. If your going to count more than 10 minutes worth maybe reload the page and use the servers time to correct discrepancies.

allworknoplay · 04-03-2009, 02:39 PM

Thanks, Krik!

That looks pretty simple, however, I'm not sure I know how to use that properly. Here is what I put on my page, if I can get it to display just 1 countdown, I should be able to figure out how to put it in a loop.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>




<script type="text/javascript">

var stopcount = 93;
var loopcount = 0;
function myfunc() {
loopcount++;
    if (loopcount == stopcount) {
    clearTimeout(counter);
    }
    else {
    counter = setTimeout("myfunc();", 1000);
    }
}
</script>


<script type="text/javascript">
setTimeout("myfunc();", 1000);
</script>



</body>
</html>

Krik · 04-03-2009, 09:20 PM

Try this

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">

var stopcount = 93;
var loopcount = 0;
function myfunc() {
loopcount++;
    if (loopcount == stopcount) {
    clearTimeout(counter);
    loopcount = 0;
    }
    else {
    counter = setTimeout("myfunc();", 1000);
    document.getElementById('mycount').innerHTML = loopcount;
    }
}
function setval() {
stopcount = document.getElementById('endval').value;
loopcount = 0;
myfunc();
}
</script>
</head>
<body onload="myfunc()">
<div id="mycount"></div>

<form>
<input type="text" id="endval" value="">
<button type="button" onclick="setval()">Click Me</button>
</form>
</body>
</html>

All I did was make the onload event start the function and setup a div to display the results.

Also added an input field to make a it so you can change "stopcount" and run that in the "myfunc" when you click the button

Note that the script is in the <head> tag, that is typically where you place it unless you make a separate file for it.

allworknoplay · 04-03-2009, 09:30 PM

Thanks Krik,

I kinda got it working. But it's counting UP instead of down?

Also, I can only get it to display in one row?

When I copy the DIV tags onto the other rows, it doesn't seem to make much of a difference?

you can check it out here.

http://www.gatebattle.com/countdown.html

Krik · 04-04-2009, 06:31 AM

Now here is were having good programing skills will come into play.

The first issue of counting down instead of up. While I do not wish to be coy in my answer the solution to that is the same as if you were doing it in PHP. Think of the "myfunc" function as a while or a foreach loop. And you have 93 rows of data that need to be looped through and you now wish to loop from the last row to the first. There is a slight difference but the same principle.

I could answer the question directly but as the solution to your second problem is so in depth it will role that solution in with it.

So getting that function to run for multiple rows this will rely heavily on your programing skill.

Is what will be needed, is every second each row needs to be looked at by the function and the value of each row decreased by one.

The real hassle is in communicating which DOM elements the function will be looking at for the value that it must change.

Now I am going to assume that you could have anywhere form 1 to 100's of rows that need to be counting down.

So first we need a good naming convention usually setting element id's that have numbers in them helps. So have PHP make <div> element ids starting at 1. So "mycount1", mycount2, ect. And then have PHP pass the last number to javascript.

PHP Code:


			
<?php
$rowcount = 15;
?>
<script type="text/javascript">
var rowcount = <?php echo $rowcount; ?>;
</script>

That "rowcount" in javascript can be set in the last line of the web page if needs be and a javascript function in the head of the page will still be able use it. This is one of the rare exceptions to what I said earlier about placing javascript in the <head> of your page.

So with the number of rows of data set we can now make the javascript function that will count down for all rows.

HTML Code:

<script type="text/javascript">
var nextrow = 1;
var endcount = true;
function multiCountDown(){
    if (nextrow <= rowcount) {
        if (document.getElementById('mycount'+nextrow).innerHTML != 0) {
            document.getElementById('mycount'+nextrow).innerHTML = document.getElementById('mycount'+nextrow).innerHTML - 1;
            endcount = false;
        }
        nextrow++;
        multiCountDown();
    }
    else {
        if(!endcount) {
            nextrow = 1;
            endcount = true;
            counter = setTimeout("multiCountDown();", 1000);
        }
        else {
            clearTimeout(counter);
        }
    }
}
</script>

Of course run the "multiCountDown()" funtion in the onload event.

Note the countdown function will stop once all the rows are at 0.

allworknoplay · 04-04-2009, 05:32 PM

Quote:

Originally Posted by Krik

Now here is were having good programing skills will come into play.

The first issue of counting down instead of up. While I do not wish to be coy in my answer the solution to that is the same as if you were doing it in PHP. Think of the "myfunc" function as a while or a foreach loop. And you have 93 rows of data that need to be looped through and you now wish to loop from the last row to the first. There is a slight difference but the same principle.

I could answer the question directly but as the solution to your second problem is so in depth it will role that solution in with it.

Ok, I kinda understand, does it have to do with the counter iterator? So instead of $i++ it should be $-- so it counts down?

I also changed the "nextrow <= rowcount" to "nextrow >= rowcount".

Here's my current code, I added an extra row to show what the DIV tags are displaying so that you don't have to do a view page source...I'm not getting any output though....

Also, I guess I should have mentioned this, the countdown will typically start at 100 seconds then down to 0 for each row. It kinda depends on what is in the DB, but for this example, we could just say 100 seconds as the starting number....

http://www.gatebattle.com/countdown.html

Code:

<?php
$rowcount = 4;
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
var rowcount = <?php echo $rowcount; ?>;
</script>

<script type="text/javascript">
var nextrow = 1;
var endcount = true;
function multiCountDown(){
    if (nextrow >= rowcount) {
        if (document.getElementById('mycount'+nextrow).innerHTML != 0) {
            document.getElementById('mycount'+nextrow).innerHTML = document.getElementById('mycount'+nextrow).innerHTML - 1;
            endcount = false;
        }
        nextrow--;
        multiCountDown();
    }
    else {
        if(!endcount) {
            nextrow = 1;
            endcount = true;
            counter = setTimeout("multiCountDown();", 1000);
        }
        else {
            clearTimeout(counter);
        }
    }
}
</script>

</head>

<body onload="multiCountDown()">





<p>Rowcount is set to: $rowcount  = 4; </p>
<table width="750" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="center">#</div></td>
    <td><div align="center">Countdown</div></td>
    <td><div align="center">Username</div></td>
    <td><div align="center">Location</div></td>
  </tr>
  <? for($i=0;$i<$rowcount;$i++) { 
  
  $mycount = "mycount" . "$i";
  
  ?>
  <tr>
    <td><div align="center"><? echo $i; ?></div></td>
    <td><div align="center"><div id="<? echo $mycount; ?>"></div></div></td>
    <td><div align="center">johnd</div></td>
    <td><div align="center">NY</div></td>
  </tr>
    <tr bgcolor="#EEEEEE">
    <td><div align="center"></div></td>
    <td><div align="center">Show DIV code, ID is: ID="<? echo $mycount; ?>" </div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <? } ?>
</table>



</body>
</html>

Krik · 04-04-2009, 07:06 PM

Ok this is a case of needing to walk through a couple things

First merge the two <script> sections

HTML Code:

<script type="text/javascript">
var rowcount = <?php echo $rowcount; ?>;
var nextrow = 1;
var endcount = true;
function multiCountDown(){
    if (nextrow >= rowcount) {
        if (document.getElementById('mycount'+nextrow).innerHTML != 0) {
            document.getElementById('mycount'+nextrow).innerHTML = document.getElementById('mycount'+nextrow).innerHTML - 1;
            endcount = false;
        }
        nextrow--;
        multiCountDown();
    }
    else {
        if(!endcount) {
            nextrow = 1;
            endcount = true;
            counter = setTimeout("multiCountDown();", 1000);
        }
        else {
            clearTimeout(counter);
        }
    }
}
</script>

Next, understanding DOM is a part of what is going on here. "getElementById" is exactly that "get element by id" and "innerHTML" is exactly that as well. So "getElementById('mycount1').innerHTML" is "get element id of mycount1's inner HTML". And if you look at your page that elements innerHTML is ''. So '' - 1 = ''. So it is working.

Also if your start "nextrow" at 1 having an element of "mycount0" means the javascript will never look at it. So either start your row naming at 1 or make "nextrow" 0.

Krik · 04-04-2009, 07:58 PM

I thought I should give you some code that has some performance improvement.

You may want to ignore this till you get the above working.

In my previous code for some dumb reason I made the function work like a loop. I am not sure why I did that as a loop would run faster.

So the following code uses a for loop and in so doing condenses the code more.

Also each loop does takes a fraction of time to run. So I have made the code reduce the timer by a fraction of a second for each additional row that must be looped through.

HTML Code:

<script type="text/javascript">
var rowcount = 4;
function multiCountDown(){

var endcount = true;
    for (var nextrow = 1; nextrow <= rowcount; nextrow++) {
        if (document.getElementById('mycount'+nextrow).innerHTML != 0) {
            document.getElementById('mycount'+nextrow).innerHTML = document.getElementById('mycount'+nextrow).innerHTML - 1;
            endcount = false;
        }
    }
    if(!endcount) {
        var sectimer = Math.round(1000 - (rowcount / 2 ));
        counter = setTimeout("multiCountDown();", sectimer);
    }
    else {
        clearTimeout(counter);
    }
}
</script>

allworknoplay · 04-04-2009, 08:12 PM

Thanks Krik,

I am currently looking at your recent code to try to get that working. I'll also take a look at this one too....

Also, thanks for taking the time to work with me on this, as I said earlier, my knowledge of JS is that of a cockroach...so thanks for having patience with me..

allworknoplay · 04-04-2009, 08:37 PM

Ok, I decided to work on your latest code since well...I wasn't even able to get your other code to work... lol...

I am getting a NaN now?

http://www.gatebattle.com/countdown.html

Also, I fixed my loop to start at 1 instead of 0.

Code:

<?php
$rowcount = 4;
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
var rowcount = 4;

function multiCountDown(){

var endcount = true;
    for (var nextrow = 1; nextrow <= rowcount; nextrow++) {
        if (document.getElementById('mycount'+nextrow).innerHTML != 0) {
            document.getElementById('mycount'+nextrow).innerHTML = document.getElementById('mycount'+nextrow).innerHTML - 1;
            endcount = false;
        }
    }
    if(!endcount) {
        var sectimer = Math.round(1000 - (rowcount / 2 ));
        counter = setTimeout("multiCountDown();", sectimer);
    }
    else {
        clearTimeout(counter);
    }
}
</script>

<style type="text/css">
<!--
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #333333; }
.style5 {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style8 {font-size: 10px}
.style9 {color: #333333}
-->
</style>
</head>

<body onLoad="multiCountDown()">
<p>Rowcount is set to: $rowcount  = 4; </p>
<table width="750" border="0" cellspacing="3" cellpadding="1">
  <tr bgcolor="#e0e0e0">
    <td height="20"><div align="center" class="style4">#</div></td>
    <td><div align="center" class="style4">Countdown</div></td>
    <td><div align="center" class="style4">Username</div></td>
    <td><div align="center" class="style4">Location</div></td>
  </tr>
  <? for($i=1;$i<=$rowcount;$i++) { 
  
  $mycount = "mycount" . "$i";
  
  ?>
  <tr>
    <td><div align="center" class="style5"><? echo $i; ?></div></td>
    <td><div align="center"><div id="<? echo $mycount; ?>"><span class="style6"><span class="style8"><span class="style9"></span></span></span></div></div></td>
    <td><div align="center" class="style5">johnd</div></td>
    <td><div align="center" class="style5">NY</div></td>
  </tr>
    <tr bgcolor="#EEEEEE">
    <td><div align="center"></div></td>
    <td><div align="center" class="style5">Show DIV code, ID is: ID="<? echo $mycount; ?>" </div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <? } ?>
</table>



</body>
</html>

Krik · 04-04-2009, 09:26 PM

The "innerHTML" of the "mycount1" div is

HTML Code:

<span class="style6"><span class="style8"><span class="style9"></span></span></span>

So "<span class="style6"><span class="style8"><span class="style9"></span></span></span> - 1 = NaN".

If you must have all those spans, which looking at them I question their propose but make a mess of your code, set the id of the one the holds the numeric value to mycount1, mycount2 ect.

Also looking at your code again you still havn't place a numeric value inside of any element for the javascript to retrieve and modify. All 4 starting numbers must be there or nothing will happen.

allworknoplay · 04-04-2009, 09:42 PM

Quote:

Originally Posted by Krik

The "innerHTML" of the "mycount1" div is

HTML Code:

<span class="style6"><span class="style8"><span class="style9"></span></span></span>

So "<span class="style6"><span class="style8"><span class="style9"></span></span></span> - 1 = NaN".

If you must have all those spans, which looking at them I question their propose but make a mess of your code, set the id of the one the holds the numeric value to mycount1, mycount2 ect.

Also looking at your code again you still havn't place a numeric value inside of the any element for the javascript to retrieve and modify. All 4 starting numbers must be there or nothing will happen.

Ok I removed the SPAN's, now it's just blank?

Krik · 04-04-2009, 09:47 PM

Here is the entire sample code I have been testing with. I used your original post and made the javascript work with it.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">
var rowcount = 4;
function multiCountDown(){

var endcount = true;
    for (var nextrow = 1; nextrow <= rowcount; nextrow++) {
        if (document.getElementById('mycount'+nextrow).innerHTML != 0) {
            document.getElementById('mycount'+nextrow).innerHTML = document.getElementById('mycount'+nextrow).innerHTML - 1;
            endcount = false;
        }
    }
    if(!endcount) {
	    var sectimer = Math.round(1000 - (rowcount / 2 ));
        counter = setTimeout("multiCountDown();", sectimer);
    }
    else {
        clearTimeout(counter);
    }
}
</script>

</head>

<body onload="multiCountDown()">

<table width="750" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="center">#</div></td>
    <td><div align="center">Countdown</div></td>
    <td><div align="center">Username</div></td>
    <td><div align="center">Location</div></td>
  </tr>

  <tr>
    <td><div align="center">1</div></td>
    <td><div align="center"><div id="mycount1">85</div></div></td>
    <td><div align="center">johnd</div></td>
    <td><div align="center">NY</div></td>
  </tr>
  <tr>

    <td><div align="center">2</div></td>
    <td><div align="center"><div id="mycount2">9</div></div></td>
    <td><div align="center">janed</div></td>
    <td><div align="center">NY</div></td>
  </tr>
  <tr>
    <td><div align="center">3</div></td>

    <td><div align="center"><div id="mycount3">2051</div></div></td>
    <td><div align="center">jakep</div></td>
    <td><div align="center">CT</div></td>
  </tr>
  <tr>
    <td><div align="center">4</div></td>
    <td><div align="center"><div id="mycount4">30</div></div></td>

    <td><div align="center">johns</div></td>
    <td><div align="center">CT</div></td>
  </tr>
</table>

</body>
</html>

allworknoplay · 04-04-2009, 09:50 PM

Quote:

Originally Posted by Krik

The "innerHTML" of the "mycount1" div is

HTML Code:

<span class="style6"><span class="style8"><span class="style9"></span></span></span>

So "<span class="style6"><span class="style8"><span class="style9"></span></span></span> - 1 = NaN".

If you must have all those spans, which looking at them I question their propose but make a mess of your code, set the id of the one the holds the numeric value to mycount1, mycount2 ect.

Also looking at your code again you still havn't place a numeric value inside of any element for the javascript to retrieve and modify. All 4 starting numbers must be there or nothing will happen.

Sorry for the messy code, I don't need the SPAN's, I just wanted to make the layout look nicer and then once I figure it out, I would go back in and clean up the code.

I thought I was calling the element correctly? In the countdown column, I have this DIV tag...

Code:

<div align="center"><div id="<? echo $mycount; ?>"></div></div>

allworknoplay · 04-04-2009, 09:52 PM

Wow your code works! Not surprisingly! LOL...

Here is you code working..

http://www.gatebattle.com/countdown2.html

I need to compare both codes now and see what's the difference....

Krik · 04-04-2009, 09:53 PM

Quote:

I thought I was calling the element correctly? In the countdown column, I have this DIV tag

You are call them correctly bu the <div>'s are all blank. So blank minus 1 or '' -1 equals (=) what?

Blank.

Put a number in those divs, and only a number.

allworknoplay · 04-04-2009, 10:00 PM

Quote:

Originally Posted by Krik

You are call them correctly bu the <div>'s are all blank. So blank minus 1 or '' -1 equals (=) what?

Blank.

Put a number in those divs, and only a number.

OHHH!!! I get it now! Yes now mine works too now that I put in the numbers.

I THOUGHT that the JS code is what contained the "start number" for the countdown....

SMACKS HEAD!!!

What I also like about this code is it's clean and readable. It's not 100 lines long...

Thank you so much! I hope I can repay you somehow down the road!!!

Krik · 04-04-2009, 10:10 PM

You have no idea the entertainment you have provided.

From my post today at 1:06PM

Quote:

And if you look at your page that elements innerHTML is ''. So '' - 1 = ''. So it is working.

I am laughing so hard I am crying.

I was siting here screaming at the monitor "you need a number" and everyone here was thinking I had finally gone mad. Once I showed it to them, they all were doubled over with laughter.

Hope I wasn't to harsh but it is very funny.

allworknoplay · 04-04-2009, 10:17 PM

Quote:

Originally Posted by Krik

You have no idea the entertainment you have provided.

From my post today at 1:06PM

I am laughing so hard I am crying.

I was siting here screaming at the monitor "you need a number" and everyone here was thinking I had finally gone mad. Once I showed it to them, they all were doubled over with laughter.

Hope I wasn't to harsh but it is very funny.

haha no problem. At least I was able to bring you some entertainment with my below newbie status questions....

You made my day buddy!

Hope you have a great weekend!!