[Resolved] Countdown that doesn’t sucks not working in IE old versions

Have you ever tried this awesome jQuery countdown timer script with your web application?

Here is the original creator link & the demo page:

http://code.google.com/p/jquery-countdown/

Demo (works in firefox, chrome and ie 9):

http://jquery-countdown.googlecode.com/svn/trunk/index.html

But this awesome code it doesn’t not work with the old version of Internet Explorer (IE 7, IE 8).

Just to fix this issue one more developer edited the original code and gave us a solution for (firefox, chrome, IE 7 & IE 8).

https://github.com/dalpo/jquery-countdown

But for some reason the above developer code also didn’t work in IE 9.

So what i decide you know?. I decided to use both of them.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Countdown that doesn't sucks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script src="js/jquery.countdown-original.js" type="text/javascript" charset="utf-8"></script>

<!--[if IE 8]>
<script src="js/jquery.countdown-second.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
<!--[if IE 7]>
<script src="js/jquery.countdown-second.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->

<script type="text/javascript">
$(function(){
$('#counter').countdown({
image: 'img/digits.png',
startTime: '01:12:12:00'
});

$('#counter_2').countdown({
image: 'img/digits.png',
startTime: '00:10',
timerEnd: function(){ alert('end!'); },
format: 'mm:ss'
});
});
</script>
<style type="text/css">
br { clear: both; }
.cntSeparator {
font-size: 54px;
margin: 10px 7px;
color: #000;
}
.desc { margin: 7px 3px; }
.desc div {
float: left;
font-family: Arial;
width: 70px;
margin-right: 65px;
font-size: 13px;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div id="counter"></div>
<div>
<div>Days</div>
<div>Hours</div>
<div>Minutes</div>
<div>Seconds</div>
</div>
<br />
<br />
<br />
<div id="counter_2"></div>
<div>
<div>Minutes</div>
<div>seconds</div>
</div>
</body>
</html>

Here is the magic worked for me. I first put the original code then for IE7 & 8 (Sequence is important here).  So in any browser including IE 9 will work with the original code and then if is IE 7 & 8 will take the next line of code respectively.


<script src="js/jquery.countdown-original.js" type="text/javascript" charset="utf-8"></script>

<!--[if IE 7]>
<script src="js/jquery.countdown-second.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->

<!--[if IE 8]>
<script src="js/jquery.countdown-second.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->

 

For your convenience i have given a demo and download link. Enjoy!

Download   Demo

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *