Develop Reference

countdown timer not working properly for seconds

I am creating a countdown timer for bidding auction, for single product it is working but when I make it dynamic for all products it is showing the timer but seconds are not changing, though the timer is working properly, but timer is not running in frontend as you can see in this link http://proffice.in/bidapp/ please help me with the javascript error. The error showing I console:
Uncaught TypeError: Cannot set property 'innerHTML' of null on this line document.getElementById("cntdwn_"+show_id).innerHTML = DisplayStr;
on countdown.js
<?php
while($pro_data = $db->jas_fetch_array($products)){
$closedate = date_format(date_create($pro_data['selling_end_date']), 'm/d/Y H:i:s');?>
<script>
TargetDate = "<?php echo $closedate ?>";
ForeColor = "#04BFBF";
show_id="<?=$pro_data["id"]?>";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%%d:%%H%%H:%%M%%M:%%S%%S";
FinishMessage = "Bidding closed!";
</script>
<script language="JavaScript" src="<?=$wwwroot;?>assets/js/countdown.js"></script>
<?php } ?>
// here is my coutdown.js file
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<b>" + s + "</b>";
}
function CountBack(secs,show_id) {
if (secs < 0) {
document.getElementById("cntdwn_"+show_id).innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn_"+show_id).innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor,show_id) {
document.write("<span id='cntdwn_"+show_id+"' style='background-color:" + backcolor +
"; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(show_id)=="undefined")
show_id = "";
if (typeof(TargetDate)=="undefined")
TargetDate = "21/06/2017 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor,show_id);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs,show_id);
// console is showing error in this line
document.getElementById("cntdwn_"+show_id).innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

What you are doing is that you are just creating your script using the loop. But not creating the Div where you need to show the counter, which is of course, your counter.
Please check whether any div with id "cntdwn_" with your corresponding show_id exists or not. In your url, I was not able to find on the page. Hope it helps. Let me know if it doesn't. :)

Adding Google Calendar event end time to script

I have a script which lists Google Calendar events with the start time, name and description but I would like to have the end time too so it reads;
5:00pm - 6:00pm - Event title - event description
Rather than just what it has at the moment which is just the start time and not the end time.
This is the script I have:
$(document).ready(GCalEvents());
function GCalEvents() {
var datenow = new Date();
var curyear = datenow.getFullYear();
var curmonth = datenow.getMonth() + 1;
var curdate = datenow.getDate();
var curhour = datenow.getHours();
var curmin = datenow.getMinutes();
var curtz = datenow.getTimezoneOffset();
//curtz = -480;
var plusmin = "-";
if (curtz <= 0) {
plusmin = "%2B";
}
curtz = Math.abs(curtz);
var curtzmin = curtz % 60;
curtz = parseInt(curtz / 60);
if (curtzmin < 10) { curtzmin = "0" + curtzmin; }
if (curtz < 10) { curtz = "0" + curtz; }
datenow = curyear + "-" + curmonth + "-" + curdate + "T" + curhour + "%3A" + curmin + "%3A00" + plusmin + curtz + "%3A" + curtzmin;
var url = "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";
// var url = "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";
$.getJSON(url, function(data) {
var event_start_date_new = new Date();
event_start_date_new.setDate(event_start_date_new.getDate() - 1);
for(i in data['items']) {
item = data['items'][i];
// event title
var event_title = item.summary;
var event_description = item.description;
// event start date/time
var event_start_date = new Date(item.start.dateTime);
// format the date and time
var month = event_start_date.getMonth();
var day = event_start_date.getDay();
var date = event_start_date.getDate();
var daysArr = new Array();
daysArr[0] = "Sunday";
daysArr[1] = "Monday";
daysArr[2] = "Tuesday";
daysArr[3] = "Wednesday";
daysArr[4] = "Thursday";
daysArr[5] = "Friday";
daysArr[6] = "Saturday";
var monthsArr = new Array();
monthsArr[0] = "January";
monthsArr[1] = "February";
monthsArr[2] = "March";
monthsArr[3] = "April";
monthsArr[4] = "May";
monthsArr[5] = "June";
monthsArr[6] = "July";
monthsArr[7] = "August";
monthsArr[8] = "September";
monthsArr[9] = "October";
monthsArr[10] = "November";
monthsArr[11] = "December";
var hour = event_start_date.getHours();
var min = event_start_date.getMinutes();
if (min < 10) { min = "0" + min; }
if (hour < 11) {
var ampm = "am";
if (hour == 0) { hour = 12; }
} else {
var ampm = "pm";
if (hour > 12) { hour = hour - 12; }
}
if (hour < 10) { hour = " " + hour; }
var event_start_str = daysArr[day] + ", " + monthsArr[month] + " " + date;
var event_time_str = hour + ":" + min + " " + ampm;
if (event_start_date.getDate() != event_start_date_new.getDate()) {
event_start_str = "<div class=\"calendar_date\"><strong>" + event_start_str + "</strong></div>";
event_start_date_new = event_start_date;
} else {
event_start_str = "";
};
// Render the event
$("#gcal-events").last().before("<div class=\"calendar_item\"><li>" + event_time_str + " - " + event_title + "<p><small>" + event_description + "</small></p></ul>" + "</li></div>");
}
});
};
If anyone is able to help with that to reversion the current script, that would be great.

The Events resource returns start and end dates as well (JSON format that has date, dateTime, timeZone attributes).
Based on your code, you're not using the end attribute which is why you're not having any values for the end date displayed. Your code for the start date is alright, so you can just re-implement it for the end attribute.
Hope this helps!

How do I get custom message within Date / Time?

I am attempting to display a greeting before the date / time depending on what time of day it is.
Good Morning
Good Afternoon
Good Evening
I have that message working.
I also want to have the date and time displayed as "It is TIME on DATE."
Whenever I try to change something with the time date code I can no longer get it to display even that.
Any advice would be helpful.
function MakeArray(n) {
this.length = n;
}
monthNames = new MakeArray(13);
monthNames[1] = "January";
monthNames[2] = "February";
monthNames[3] = "March";
monthNames[4] = "April";
monthNames[5] = "May";
monthNames[6] = "June";
monthNames[7] = "July";
monthNames[8] = "August";
monthNames[9] = "September";
monthNames[10] = "October";
monthNames[11] = "November";
monthNames[12] = "December";
dayNames = new MakeArray(8);
dayNames[1] = "Sunday";
dayNames[2] = "Monday";
dayNames[3] = "Tuesday";
dayNames[4] = "Wednesday";
dayNames[5] = "Thursday";
dayNames[6] = "Friday";
dayNames[7] = "Saturday";
function dayPart(oneDate) {
var theHour = oneDate.getHours();
if (theHour < 12) {
return "Good morning";
}
if (theHour < 18) {
return "Good afternoon";
}
return "Good evening";
}
function customDateString(oneDate) {
var theDay = dayNames[oneDate.getDay() + 1],
theMonth = monthNames[oneDate.getMonth() + 1],
theYear = oneDate.getYear();
theYear += (theYear < 100) ? 1900 : 0;
return theDay + ", " + theMonth + " " + oneDate.getDate() + ", " + theYear;
}
var today = new Date();
alert(dayPart(today) + "." + customDateString(today));
On jsFiddle

Try this as your function:
function customDateString(oneDate) {
var theDay = dayNames[oneDate.getDay() + 1]
var theMonth = monthNames[oneDate.getMonth() + 1]
var theYear = oneDate.getFullYear()
theYear += (theYear < 100) ? 1900 : 0
return 'It is ' + new Date().timeNow() + ' on ' + theMonth + " " + oneDate.getDate() + ", " + theYear + '. ';
}
With this prototype:
Date.prototype.timeNow = function () {
return ((this.getHours() < 10)?"0":"") + this.getHours() +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
}
Demo
getFullYear returns a four-digit year, instead of just getYear which, for example, would return 14 in the year 2014.

JS Countdown not working in IE and Safari

I have a javascript countdown which doesn't seem to be working on IE nor on safari, all tested on windows 7, works fine with chrome and firefox. I'm not looking to change to a jQuery countdown due to certain restrictions on the website so really looking to get this working across all browsers.
<script language="JavaScript">
TargetDate = "January/01/2014 12:00 am";
BackColor = "";
ForeColor = "#000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "<span class='finish'>Finished!</span>";
</script>
<script language="javascript">
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<span class='digit'>" + s + "</span>";
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style=' font-weight:bold; background-color:" + backcolor +
"; color:" + forecolor + "'> </span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>
Countdown just displays as NaN. Any help greatly appreciated.

The following line is returning NaN
var dthen = new Date(TargetDate);
Your best bet, to ensure it'll work across browsers is to use the following Date constructor:
new Date(year, month, day, hours, minutes, seconds, milliseconds);
So, dthen will become:
var dthen = new Date(2014, 0, 1, 12, 0, 0, 0);
You may want to define those values at the top, like you have with TargetDate but this should put you on the right track.

Javascript Countdown changes

I'm basically using a javascript countdown for one of my websites, it contains everything i need, however i want to expand on it but i am relatively new to js. Basically, it shows a message once the countdown has completed which is great, however i want to show a message alongside the countdown which is removed with the countdown when it reaches 0.
Example: "New Year in, {Countdown}" so the new year text along with the countdown should be removed when it hits 0 and replaced with the finished text.
Here is the script i am using:
<script language="JavaScript">
TargetDate = "January/01/2014 12:00 am";
BackColor = "";
ForeColor = "#000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "<span class='finish'>Finished!</span>";
</script>
<script language="javascript">
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<span class='digit'>" + s + "</span>";
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style=' font-weight:bold; background-color:" + backcolor +
"; color:" + forecolor + "'> </span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>
Any help in getting this would be greatly appreciated!
Thanks :)

I think this is your ansswer, excuse If I didnt get ur question right.
DisplayFormat = "New Year in, {%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds}.";

I see you've got the simple answer, but here's a jQuery plugin if you'd like to have it a bit cleaner: http://jsfiddle.net/chrisdanek/C59hN/1/
Just target an element with date inside and will be turned into a counter
$('p.counter').countdownCounter({
format : 'New Year in %%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds!',
});
Edit: I’ve created a separate page for the plugin http://cou.io/code/countdown/ and added a few options.