Solved

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

Posted on 2013-02-07
4
536 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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 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

18 Experts available now in Live!

Get 1:1 Help Now