Solved

My javascript is not compatible with IE 8 and IE 9

Posted on 2014-03-03
5
388 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

828 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