Solved

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

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

730 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