Countdown NOT working with IE

[yuufa10182006]

Hi,

I'm wondering how ca I make this countdown timer that I add to my website works in IE (Internet Explorer) browser?

I already check it with Google Chrome and Firefox and its working fine.

<center>
<script language="JavaScript">
TargetDate = "7/1/2012 00:00 AM UTC+09:00";
BackColor = "transparent";
ForeColor = "red";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "<b>It is finally here!</b>";
</script>

Target Date: July 01, 2012 @ 00:00 AM KST

<script language="JavaScript">
function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
 document.write("<span id='cntdwn' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>
</center>

I add it at the sidebar of my forum.
Link:
ygladies.com/forums/

Hope someone can help me with this.

Thanks in advance guys! And more power!

[jscheuer1]

IE doesn't support the:

TargetDate = "7/1/2012 00:00 AM UTC+09:00";

date/time string format as input for the Date() object.

What you can do to achieve the same effect, and this is supported in all browsers, not just IE, is to replace that line with these two lines:

TargetDate = new Date("7/1/2012 00:00")
TargetDate.setMinutes(TargetDate.getMinutes() - TargetDate.getTimezoneOffset() - 9 * 60);

The second line converts to UTC time by subtracting the timezoneOffset and then converts to the chosen time zone by subtracting the chosen timezone's offset from UTC time. This is essentially what the simpler unsupported (in IE) syntax is doing, just in a way that can be understood by all browsers.

[yuufa10182006]

WOW! Thanks Sir! You save me!~

Having a hard time with this compatibility issues of the browsers TT_TT

Anyways, thanks again~

[yuufa10182006]

Hi,

I just find out that when I tried to use that code. I can't seem to edit the font color and background-color?

Is there a certain good to edit it too?

This is the updated one with the code you shared Sir:

<style type="text/css">
        #cntdwn {
                position: relative;
                top: -50px;
}
</style>

<script language="JavaScript">
        TargetDate = "7/5/2012 00:00 AM";
	TargetDate.setMinutes(TargetDate.getMinutes() - TargetDate.getTimezoneOffset() - 9 * 60);
        BackColor = "transparent";
        ForeColor = "#ffffff";
        CountActive = true;
        CountStepper = -1;
        LeadingZero = true;
        DisplayFormat = "<b>%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.</b>";
        FinishMessage = "<b>Blackjacks, 2NE1 is back!!!</b>";
</script>

<div class="countdownIMG" align="center">
        <img src="http://i221.photobucket.com/albums/dd65/yuufa10182006/YGLcountdown04.gif" alt="I Love You Countdown" /><br>

        <script language="JavaScript">
                function calcage(secs, num1, num2) {
                s = ((Math.floor(secs/num1))%num2).toString();
                        if (LeadingZero && s.length < 2)
                                s = "0" + s;
                                return "<b>" + s + "</b>";
                }

                function CountBack(secs) {
                        if (secs < 0) {
                        document.getElementById("cntdwn").innerHTML = FinishMessage;
                        return;
                        }

                        DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
                        DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
                        DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
                        DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

                        document.getElementById("cntdwn").innerHTML = DisplayStr;

                        if (CountActive)
                                setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
                        }

                function putspan(backcolor, forecolor) {
                        document.write("<span id='cntdwn' style='background-color:" + backcolor +
                                "; color:" + forecolor + "'></span>");
                }

                if (typeof(BackColor)=="undefined")
                        BackColor = "white";

                if (typeof(ForeColor)=="undefined")
                        ForeColor= "black";

                if (typeof(TargetDate)=="undefined")
                        TargetDate = "12/31/2020 5:00 AM";

                if (typeof(DisplayFormat)=="undefined")
                        DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";

                if (typeof(CountActive)=="undefined")
                        CountActive = true;

                if (typeof(FinishMessage)=="undefined")
                        FinishMessage = "";

                if (typeof(CountStepper)!="number")
                        CountStepper = -1;

                if (typeof(LeadingZero)=="undefined")
                        LeadingZero = true;


                CountStepper = Math.ceil(CountStepper);
                        if (CountStepper == 0)
                                CountActive = false;
                                var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
                                putspan(BackColor, ForeColor);
                                var dthen = new Date(TargetDate);
                                var dnow = new Date();

                        if(CountStepper>0)
                                ddiff = new Date(dnow-dthen);

                        else
                                ddiff = new Date(dthen-dnow);

                        gsecs = Math.floor(ddiff.valueOf()/1000);

                        CountBack(gsecs);

        </script>

</div>

Hope you can still help me with this one. And Thank you in advance.

[jscheuer1]

There's an error in the targetDate value. Change this:

        TargetDate = "7/5/2012 00:00 AM";

to:

        TargetDate = new Date("7/5/2012 00:00 AM");

Once you do that, the:

        BackColor = "transparent";
        ForeColor = "#ffffff";

will work.