Solved

My javascript is not compatible with IE 8 and IE 9

Posted on 2014-03-03
5
378 Views
Last Modified: 2016-04-20
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;
                  
                  window.onload = function()
                  {
                            countDown('linkappears', '<a href="index.cfm"><input type="button" value="continue" name="cbutton" /></a>', fiveSecs);
                  }

                  function countDown(elID, output, seconds)
                  {
                      var mins,
                    secs = seconds,
                    pad = function (n)
                        {
                        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;
   
                // pad any numbers less than 9 with a leading 0
                      secs = pad(secs);
                      mins = pad(mins);
                      hours = pad(hours);

                      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
Comment
Question by:smares323
  • 3
  • 2
5 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
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);

Open in new window


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();

        function pad (n)
        {
            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;

            // pad any numbers less than 9 with a leading 0
            secs = pad(secs);
            mins = pad(mins);
            hours = pad(hours);

            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);
            }
        }

    };

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

</script>

Open in new window

This is tested in IE8 and FireFox (up-to-date version).

Any questions/concerns, just ask.

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

Open in new window


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

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

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

Expert Comment

by:Robert Schutt
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

by:Robert Schutt
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

by:smares323
ID: 39914451
I figured it out.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

759 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now