Passing Argument to a function...

[wsjb78]

Hiya,

I'm not a JS guru but I need to have a countdown script on one of my sites. Basically it should countdoung to a certain hour and then start all over again.

I went to www.hotscripts.com and found a great script which does exactely that. However there is one drawback in it. The script takes the user's system time and not the servertime. So I need to adjust that.

js.countdownjs.php

var myCountdown = new Array();
var repeat = false;



function offset() {
<?
$currentDate = mktime();
$currentDate = $currentDate*1000;
?>

// Get user's computer time
var systemtime = new Date();

// Calculate offset between the two
var offset = <? echo $currentDate; ?>-systemtime;
}

function checkPlural(noun, value) {
noun = ((value == 1) || (value == 0)) ? noun : (noun += "s");
return noun;
}

function updateDisplay(text, id) {
var tag = document.getElementById(id);
if (tag.firstChild) {
tag.firstChild.nodeValue = text;
}
else {
textNode = document.createTextNode(text);
tag.appendChild(textNode);
}
return;
}

function doCountdown(offset) {
for (i = 0; i < myCountdown.length; i++) {
if (!myCountdown[i].expired) {
var currentDate = today = new Date(today.getTime() + offset)
var eventDate = myCountdown[i].eventDate;
var timeLeft = new Date();
timeLeft = eventDate - currentDate;
msPerDay = 24 * 60 * 60 * 1000;
msPerHour = 60 * 60 * 1000;
msPerMin = 60 * 1000;
msPerSec = 1000;
daysLeft = Math.floor(timeLeft / msPerDay);
hoursLeft = Math.floor((timeLeft % msPerDay) / msPerHour);
minsLeft = Math.floor(((timeLeft % msPerDay) % msPerHour) / msPerMin);
secsLeft = Math.floor((((timeLeft % msPerDay) % msPerHour) % msPerMin) / msPerSec);
day = checkPlural("day", daysLeft);
hour = checkPlural("hour", hoursLeft);
minute = checkPlural("minute", minsLeft);
second = checkPlural("second", secsLeft);
if ((daysLeft == 0) && (hoursLeft == 0) && (minsLeft == 0) && (secsLeft == 0)) {
updateDisplay(myCountdown[i].onevent, myCountdown[i].tagID);
}
else {
if (daysLeft <= -1) {
updateDisplay(myCountdown[i].afterevent, myCountdown[i].tagID);
myCountdown[i].expired = true;
}
else {
updateDisplay("offset: " + offset + " ---- " + hoursLeft + " h " + minsLeft + " min " + secsLeft + " s " +
myCountdown[i].event, myCountdown[i].tagID);
repeat = true;
}
}
}
}
if (repeat) {
repeat = false;
window.setTimeout("doCountdown()", 1000);
}
else {
return;
}
}


Ok, some explanation:

1.) The ending is .php and loading it works fine!
2.) Because the ending is .php I can use PHP within the JS
3.) The variable "offset" in the function "offset" is calculated correctly (I think) -- I have created the function offset in the hope I can pass the value for offset into the other function

The problem is I cannot pass that value of "offset" into the "doCountdown" funciton.

Anyone knows how to do that?

[Fang]

Try:
Last line in function offset() : return offset;
and
window.setTimeout("doCountdown(offset())", 1000);

[Khalid Ali]

Did you realize that your code will only compare server time and users machine time once,????
because once the page is loaded then there is no way for server to send data to the page unless page requests such data?.

Using HTML+JS for such task will bring down your network(imagine every second a request being sent to the server...:D )

You may be able to do this using a java applet

[wsjb78]

well, I need the offset only once to calculate the time difference between the server and the client machine... you see, I want to have a countdown to like 18:00 GMT but I cannot use the client's time because very likely he's not in GMT so it need to be calculated to what time he has as 18:00 GMT

[wsjb78]

Fang:

It doesn't work...

what I need to accomplish is what in PHP is done like that:

[php]
$offset = 1234556;

function doCountdown($offset) {
$time = $offset - 123;
echo $time;
}
[php]

I just need to pass the variable "offset" somehow into that doCountdown function... that's all..... offset needn't to be a function...

[Khalid Ali]

create a variable in php

say
$phpOffset="";
do your php calculation ,
then have this line in the onload event of the body tag

now once you have calculated the ofset create this string in php

$onloadEvent; = "onload = \"doCountdown($offset)\";";

<body <?php echo $onloadEvent; ?>>

what happend when document loads it will have this value in onload

<body onload ="doCountdown(XXXX)">

hence solution to your problem

[wsjb78]

How can I get the client time into a PHP variable or differently said how can I assign a JS variable to PHP?

[Khalid Ali]

Did u even read my first response?

There is no way you can pass a variable value to php except submitting the document to server.
You have to understand the difference.

php executes itself before page is loaded into your browser,and JavaScript is executed once all the data from php is sent to browser.so both have completely separate domains to work in.

[wsjb78]

I read your response and I need to retrieve the server time only once....
Once I have retrived the server time I can use it in conjunction with the user systemtime to calculate the offset.

So I can take then the user systemtime add the offset to it and with that I can calculate the time left to a certain event regardless of timezones the users are in.

[wsjb78]

So, I got a solution now for that problem:

jscountdown.inc

var mycountdown = new Countdown();
with (mycountdown) {
tagID = "JSCountDown";
setEventDate(2010, 1, 1, 21, 18, 45);
event = "left for today's drops!";
onevent = "The dropping begins.";
afterevent = "Good Luck!";
}
addCountdown(mycountdown);


jscountdown.js

var myCountdown = new Array();
var repeat = false;

function checkPlural(noun, value) {
noun = ((value == 1) || (value == 0)) ? noun : (noun += "s");
return noun;
}

function updateDisplay(text, id) {
var tag = document.getElementById(id);
if (tag.firstChild) {
tag.firstChild.nodeValue = text;
}
else {
textNode = document.createTextNode(text);
tag.appendChild(textNode);
}
return;
}

function doCountdown() {
for (i = 0; i < myCountdown.length; i++) {
if (!myCountdown[i].expired) {
var currentDate = new Date();
var eventDate = myCountdown[i].eventDate;
var timeLeft = new Date();
timeLeft = eventDate - currentDate - offset;
msPerDay = 24 * 60 * 60 * 1000;
msPerHour = 60 * 60 * 1000;
msPerMin = 60 * 1000;
msPerSec = 1000;
daysLeft = Math.floor(timeLeft / msPerDay);
hoursLeft = Math.floor((timeLeft % msPerDay) / msPerHour);
minsLeft = Math.floor(((timeLeft % msPerDay) % msPerHour) / msPerMin);
secsLeft = Math.floor((((timeLeft % msPerDay) % msPerHour) % msPerMin) / msPerSec);
day = checkPlural("day", daysLeft);
hour = checkPlural("hour", hoursLeft);
minute = checkPlural("minute", minsLeft);
second = checkPlural("second", secsLeft);
if ((daysLeft == 0) && (hoursLeft == 0) && (minsLeft == 0) && (secsLeft == 0)) {
updateDisplay(myCountdown[i].onevent, myCountdown[i].tagID);
}
else {
if (daysLeft <= -1) {
updateDisplay(myCountdown[i].afterevent, myCountdown[i].tagID);
myCountdown[i].expired = true;
}
else {
updateDisplay(daysLeft + " " + day + " " + hoursLeft + " " + hour +
" " + minsLeft + " " + minute + ", and " +
secsLeft + " " + second + " left until " +
myCountdown[i].event, myCountdown[i].tagID);
repeat = true;
}
}
}
}
if (repeat) {
repeat = false;
window.setTimeout("doCountdown()", 1000);
}
else {
return;
}
}


function setEventDate(year, month, day, hour, minute, second) {
this.eventDate = new Date(year, month - 1, day, hour, minute, second);
return;
}

function addCountdown(countdown) {
myCountdown[myCountdown.length] = countdown;
return;
}

function Countdown() {
this.tagID = "";
this.eventDate = new Date();
this.setEventDate = setEventDate;
this.event = "";
this.onevent = "";
this.afterevent = "";
this.expired = false;
}


index.php

<? $serverDate = mktime()*1000; ?>

<html>
<head>
<title>Countdown Script</title>
<script type="text/javascript">
var serverDate = <?php echo $serverDate; ?>;
var currentDate = new Date();
var offset = serverDate - currentDate;
var offset = offest/1000;
</script>
<script type="text/javascript" src="jscountdown.js.php"></script>
<script type="text/javascript" src="jscountdown.inc.js.php"></script>
</head>
<body onload="doCountdown()">
<div align="center" id="JSCountDown"></div>
</BODY>
</HTML>


jsCountdown Info:

jsCountdown: Readme

/*

jsCountdown: A live (real time) countdown script that countdown right to the second.

Version: 1.0
Released on: 11/07/2003
Copyright (C) 2003 Toh Zhiqiang
Web Site: http://www.tohzhiqiang.per.sg/projects/jscountdown/

This script is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This script is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

*/