Solved

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

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

839 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