Solved

My javascript is not compatible with IE 8 and IE 9

Posted on 2014-03-03
5
394 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
[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
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

739 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