Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-02-07
4
Medium Priority
?
925 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 5

Accepted Solution

by:
Pyromanci earned 2000 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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

609 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