Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
Solved

# My javascript is not compatible with IE 8 and IE 9

Posted on 2014-03-03
Medium Priority
403 Views
My javascript is not compatible with IE 8 and IE 9

<script type="text/javascript">
var oneHour = 60 * 60, // 60 seconds * 60 minutes
twentyMins = 20 * 60, // 20 minutes * 60 seconds
oneMin = 60, // 60 seconds
fiveSecs = 5;

{
countDown('linkappears', '<a href="index.cfm"><input type="button" value="continue" name="cbutton" /></a>', fiveSecs);
}

function countDown(elID, output, seconds)
{
var mins,
secs = seconds,
{
return n > 9 ? n : '0' + n;
};

// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); //  60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;

document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time until link appears: ' + hours + ':' + mins + ':' + secs;

// instead of returning, just don't call setTimout if we are done
if (seconds !== 0)
{
seconds -= 1;
// there is no need to pass a string to setTimout, you just pass the function name,
// followed by the timeout in ms, followed by any params
setTimeout(countDown, 1000, elID, output, seconds);
}

}
</script>

<div style="margin:10px; 0; 10px; 10px;" id="linkappears"></div>
0
Question by:smares323
[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
• 3
• 2

LVL 35

Expert Comment

ID: 39901685
IE only supports setTimeout with 2 arguments, not the extra 'callback function arguments'. You can find some discussion/explanation and a generic solution here: https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

Here's another take on it;
So the 'problem' is in the line:
``````setTimeout(countDown, 1000, elID, output, seconds);
``````

To solve in your situation you could also just make those 3 extra arguments into global variables (not the best solution so I won't post that)...

OR, if you want a bit nicer solution you can wrap it all in a plugin-like object, this way it should also be possible more easily to put more than 1 timed link on a page:
``````<script type="text/javascript">

var oneHour = 60 * 60, // 60 seconds * 60 minutes
twentyMins = 20 * 60, // 20 minutes * 60 seconds
oneMin = 60, // 60 seconds
fiveSecs = 5;

var myCountDown = function(elID, output, seconds) {

var elmnt = document.getElementById(elID);
countDown();

{
return n > 9 ? n : '0' + n;
}

function countDown()
{
var hours,
mins,
secs = seconds;

// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); //  60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;

elmnt.innerHTML = (seconds === 0) ? output : 'Time until link appears: ' + hours + ':' + mins + ':' + secs;

// instead of returning, just don't call setTimout if we are done
if (seconds !== 0)
{
seconds -= 1;
setTimeout(countDown, 1000);
}
}

};

{
new myCountDown('linkappears', '<a href="index.cfm"><input type="button" value="continue" name="cbutton" /></a>', fiveSecs);
};

</script>
``````
This is tested in IE8 and FireFox (up-to-date version).

PS: not sure if it's relevant but your div style contains an error, should probably be:
``````style="margin:10px 0 10px 10px;"
``````

PS2: also not sure about putting a button in an <a> tag, it works in FireFox but it looks invalid to me and doesn't seem to work in IE8.
0

Accepted Solution

smares323 earned 0 total points
ID: 39901807
This fixed the problem.

setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds)+")", 1000);
0

LVL 35

Expert Comment

ID: 39901823
That is one of the solutions discussed on that MDN link I posted, but frankly it's the worst solution you could choose. That last piece of code I posted should be a much better choice going forward into the future of javascript instead of stepping back.
0

LVL 35

Expert Comment

ID: 39901850
PS, I meant the link to developer.mozilla.org (MDN = Mozilla Developer Network), look under "Passing string literals". They explain it much better than I ever could. Basically calling setTimeout like that is compared directly with the 'evil' eval.
0

Author Closing Comment

ID: 39914451
I figured it out.
0

## Featured Post

Question has a verified solution.

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

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
###### Suggested Courses
Course of the Month6 days, 17 hours left to enroll