TalkPHP
 
 
Account Login
Latest Articles
» The basic usage of PHPTAL, a XML/XHTML template library for PHP
» Vulnerable methods and the areas they are commonly trusted in.
» Simple way to protect a form from bot
» The Basics On: How Session Stealing Works
» How to keep your forms from double posting data
IRC Channel
IRC Speech Bubble Join the friendly bunch on IRC...
(#TalkPHP on Freenode)

...Also available via a web interface.

See this thread for information on the TalkPHP Free Hugs Initiative™. Subject to availability.
Associates
Associates
CSS Tutorials
Reply
 
LinkBack Thread Tools Search this Thread Display Modes
Old 04-03-2009, 04:53 AM   #1 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default countdown

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?
allworknoplay is offline  
Reply With Quote
Old 04-03-2009, 06:32 AM   #2 (permalink)
The Contributor
 
Join Date: Feb 2009
Posts: 65
Thanks: 0
Krik is on a distinguished road
Default

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.
Krik is offline  
Reply With Quote
Old 04-03-2009, 02:39 PM   #3 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

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>
allworknoplay is offline  
Reply With Quote
Old 04-03-2009, 09:20 PM   #4 (permalink)
The Contributor
 
Join Date: Feb 2009
Posts: 65
Thanks: 0
Krik is on a distinguished road
Default

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.
Krik is offline  
Reply With Quote
The Following User Says Thank You to Krik For This Useful Post:
allworknoplay (04-03-2009)
Old 04-03-2009, 09:30 PM   #5 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

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
allworknoplay is offline  
Reply With Quote
Old 04-04-2009, 06:31 AM   #6 (permalink)
The Contributor
 
Join Date: Feb 2009
Posts: 65
Thanks: 0
Krik is on a distinguished road
Default

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.
Krik is offline  
Reply With Quote
The Following User Says Thank You to Krik For This Useful Post:
allworknoplay (04-04-2009)
Old 04-04-2009, 08:12 PM   #7 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

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 is offline  
Reply With Quote
Old 04-04-2009, 08:37 PM   #8 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

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>
allworknoplay is offline  
Reply With Quote
Old 04-04-2009, 09:26 PM   #9 (permalink)
The Contributor
 
Join Date: Feb 2009
Posts: 65
Thanks: 0
Krik is on a distinguished road
Default

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.
Krik is offline  
Reply With Quote
Old 04-04-2009, 09:42 PM   #10 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

Quote:
Originally Posted by Krik View Post
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?
allworknoplay is offline  
Reply With Quote
Old 04-04-2009, 09:47 PM   #11 (permalink)
The Contributor
 
Join Date: Feb 2009
Posts: 65
Thanks: 0
Krik is on a distinguished road
Default

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>
Krik is offline  
Reply With Quote
Old 04-04-2009, 09:50 PM   #12 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

Quote:
Originally Posted by Krik View Post
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 is offline  
Reply With Quote
Old 04-04-2009, 09:52 PM   #13 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

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....
allworknoplay is offline  
Reply With Quote
Old 04-04-2009, 09:53 PM   #14 (permalink)
The Contributor
 
Join Date: Feb 2009
Posts: 65
Thanks: 0
Krik is on a distinguished road
Default

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.
Krik is offline  
Reply With Quote
The Following User Says Thank You to Krik For This Useful Post:
allworknoplay (04-04-2009)
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 01:52 AM.

 
     

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Inactive Reminders By Icora Web Design