Help - Search - Members - Calendar
Full Version: countdown timer issue
HTMLHelp Forums > Programming > Client-side Scripting
Meto2k
Hi all,

I am building my own website ( very beginner so allready sorry ) but I encountered a problem with a ready to use time counter.

the code is as follow

<div class="date_countdown">
<div id="timer">
<div id="days" class="date"></div>
<div id="hours" class="date"></div>
<div id="minutes" class="date"></div>
<div id="seconds" class="date"></div>
</div>

it shows
DAYS
-413
HOURS
11
MINUTES
43
SECONDS
51

and it is still counting down... My question here is how can I edit the time? whatever I try didnt work
pandy
There's some JavaScript also maybe? In what way do you want to edit the time?
Meto2k
https://ibb.co/bWRJ85t

I uploaded a screenshot how it looks like
Meto2k
QUOTE(pandy @ Nov 12 2020, 07:18 PM) *

There's some JavaScript also maybe? In what way do you want to edit the time?



https://ibb.co/bWRJ85t

I added a image so you can see it better.

Well I would like to have a countdown for a product. But I can't find the source of the date settings.
pandy
Yeah. But we need to see the actual script you use. And we need to know what you want to change.
Meto2k
QUOTE(pandy @ Nov 12 2020, 07:37 PM) *

Yeah. But we need to see the actual script you use. And we need to know what you want to change.





(function ($) {

$.fn.downCount = function (options, callback) {
var settings = $.extend({
date: null,
offset: null
}, options);

// Throw error if date is not set
if (!settings.date) {
$.error('Date is not defined.');
}

// Throw error if date is set incorectly
if (!Date.parse(settings.date)) {
$.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
}

// Save container
var container = this;

/**
* Change client's local date to match offset timezone
* @return {Object} Fixed Date object.
*/
var currentDate = function () {
// get client's current date
var date = new Date();

// turn date to utc
var utc = date.getTime() + (date.getTimezoneOffset() * 60000);

// set new Date object
var new_date = new Date(utc + (3600000*settings.offset))

return new_date;
};

/**
* Main downCount function that calculates everything
*/
function countdown () {
var target_date = new Date(settings.date), // set target date
current_date = currentDate(); // get fixed current date

// difference of dates
var difference = target_date - current_date;

// if difference is negative than it's pass the target date
if (difference < 0) {
// stop timer
clearInterval(interval);

if (callback && typeof callback === 'function') callback();

return;
}

// basic math variables
var _second = 1000,
_minute = _second * 60,
_hour = _minute * 60,
_day = _hour * 24;

// calculate dates
var days = Math.floor(difference / _day),
hours = Math.floor((difference % _day) / _hour),
minutes = Math.floor((difference % _hour) / _minute),
seconds = Math.floor((difference % _minute) / _second);

// fix dates so that it will show two digets
days = (String(days).length >= 2) ? days : '0' + days;
hours = (String(hours).length >= 2) ? hours : '0' + hours;
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

// based on the date change the refrence wording
var ref_days = (days === 1) ? 'day' : 'days',
ref_hours = (hours === 1) ? 'hour' : 'hours',
ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
ref_seconds = (seconds === 1) ? 'second' : 'seconds';

// set to DOM
container.find('.days').text(days);
container.find('.hours').text(hours);
container.find('.minutes').text(minutes);
container.find('.seconds').text(seconds);

container.find('.days_ref').text(ref_days);
container.find('.hours_ref').text(ref_hours);
container.find('.minutes_ref').text(ref_minutes);
container.find('.seconds_ref').text(ref_seconds);
};

// start
var interval = setInterval(countdown, 1000);
};

})(jQuery);
Christian J
Do you have a link to the site that provided the script? There should be some documentation.
Meto2k
QUOTE(Christian J @ Nov 12 2020, 08:19 PM) *

Do you have a link to the site that provided the script? There should be some documentation.


https://github.com/sonnyt/downCount/blob/ma...ry.downCount.js
Christian J
According to https://github.com/sonnyt/downCount it seems you need to change the null values here:

CODE
$.fn.downCount = function (options, callback) {
var settings = $.extend({
date: null,
offset: null
}, options);

to (for example) this:

CODE
$('.countdown').downCount({
    date: '08/27/2013 12:00:00',
    offset: -5
}, function () {
    alert('WOOT WOOT, done!');
});


EDIT: or am I looking at the same script? Not familiar with Github's layout. unsure.gif
Meto2k
QUOTE(Christian J @ Nov 12 2020, 08:47 PM) *

According to https://github.com/sonnyt/downCount it seems you need to change the null values here:

CODE
$.fn.downCount = function (options, callback) {
var settings = $.extend({
date: null,
offset: null
}, options);

to (for example) this:

CODE
$('.countdown').downCount({
    date: '08/27/2013 12:00:00',
    offset: -5
}, function () {
    alert('WOOT WOOT, done!');
});


EDIT: or am I looking at the same script? Not familiar with Github's layout. unsure.gif



=D thank you for the fast replies ! but the counter is not changing... still the same countdown as in the picture. I tried all available options but I think there may be a malfuntion somewhere.
Christian J
QUOTE(Meto2k @ Nov 13 2020, 03:00 PM) *

still the same countdown as in the picture.

The picture looks like if the target date expired 413 days ago. Have you set a target date, and is it correct?

In any case there should be plenty of other countdown timers on the web that you could use instead.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.