• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 407
  • Last Modified:

My javascript is not compatible with IE 8 and IE 9

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
smares323
Asked:
smares323
  • 3
  • 2
1 Solution
 
Robert SchuttSoftware EngineerCommented:
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
 
smares323Author Commented:
This fixed the problem.

setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds)+")", 1000);
0
 
Robert SchuttSoftware EngineerCommented:
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
 
Robert SchuttSoftware EngineerCommented:
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
 
smares323Author Commented:
I figured it out.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now