asked on

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>

Robert Schutt

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.

ASKER CERTIFIED SOLUTION

smares323

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Schutt

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.

Robert Schutt

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.

smares323

ASKER

I figured it out.