The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> countdown timer issue
Meto2k
post Nov 12 2020, 07:13 PM
Post #1





Group: Members
Posts: 6
Joined: 12-November 20
Member No.: 27,633



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 12 2020, 07:18 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



There's some JavaScript also maybe? In what way do you want to edit the time?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Meto2k
post Nov 12 2020, 07:26 PM
Post #3





Group: Members
Posts: 6
Joined: 12-November 20
Member No.: 27,633



https://ibb.co/bWRJ85t

I uploaded a screenshot how it looks like
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Meto2k
post Nov 12 2020, 07:30 PM
Post #4





Group: Members
Posts: 6
Joined: 12-November 20
Member No.: 27,633



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 12 2020, 07:37 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah. But we need to see the actual script you use. And we need to know what you want to change.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Meto2k
post Nov 12 2020, 07:40 PM
Post #6





Group: Members
Posts: 6
Joined: 12-November 20
Member No.: 27,633



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);
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 12 2020, 08:19 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



Do you have a link to the site that provided the script? There should be some documentation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Meto2k
post Nov 12 2020, 08:26 PM
Post #8





Group: Members
Posts: 6
Joined: 12-November 20
Member No.: 27,633



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 12 2020, 08:47 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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

This post has been edited by Christian J: Nov 13 2020, 08:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Meto2k
post Nov 13 2020, 09:00 AM
Post #10





Group: Members
Posts: 6
Joined: 12-November 20
Member No.: 27,633



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 13 2020, 11:42 AM
Post #11


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:48 AM