Solved

Seeking javascript based countdown timer that allows for multiple simultaneous instances on the same page

Posted on 2013-02-07
4
557 Views
Last Modified: 2013-02-08
I have a page on a site that I'm maintaining which displays multiple "time left until the end of the auction" values that are in the following format:

12d 1h 2m 49s
8d 21h 34m 12s
7d 3h 50m 8s

Each of these different time values are displayed in their own table row, and I was wondering if it might be possible for me to add some javascript to the page that would animate the values so that they decrement -- so that you can actually see the timers counting down.  How would I implement something like this?

Note that I don't really have the option of changing the time format that I'm currently using, .. so ideally, I'm looking for something that would work with what I already have.

Thanks in advance,
- Yvan
0
Comment
Question by:egoselfaxis
  • 2
  • 2
4 Comments
 
LVL 5

Accepted Solution

by:
Pyromanci earned 500 total points
ID: 38865740
You can use http://keith-wood.name/countdown.html

And just do multiple instances. It has a lot of formatting and layout customization options to it.

ie.

	$('.selector').countdown({
		until: targetForCountdown,
		layout: '{dn}d {hn}h {mn}m {sn}s'
	});

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 38868324
This is great -- exactly what I was looking for.  Thanks so much!

Just one last question -- My dates (that I'm seeding the function with) are currently in Unix date/time format, .. which is resulting in countdown timers that are obviously incorrect.

How would I convert/format the Unix date/times so that the timer counts down correctly?

$('#timer1').countdown({ until: 1361036439 });

(I'm using PHP, btw)

Thanks,
- Yvan
0
 

Author Comment

by:egoselfaxis
ID: 38868344
Nevermind -- I just figured it out!
$rawtime = "'+$rema[days]d +$rema[hours]h +$rema[minutes]m +$rema[seconds]s'";

Open in new window


 Thanks again!

- Yvan
0
 
LVL 5

Expert Comment

by:Pyromanci
ID: 38868413
A simpler way would be something like if your using php 5:

$('#timer1').countdown({
until: new Date('<?php echo date('c', 1361036439);?>')
});
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now