Custom Javascript not firing in internet explorer 9 and 10

Question

First of all this is the script located in the head of my document.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var e, t = document.querySelectorAll("div.bounceInDown");
        for (var n = 0, r = t.length; n < r; n++) {
            e = Math.round(Math.random() * 7e3) + "ms";
            t[n].style.animationDelay = e;
            t[n].style.WebkitAnimationDelay = e
        }
    }, false)
</script>

Now I have a class called "bounceInDown" which has a keyframe animation. All the div elements that have this secondary class applied should bounce down when the website has loaded. Now, the script there makes the bounce with different delay values. It just doesnt work in internet explorer. No idea why. What is wrong with my code?

It works in all browsers except IE

Please format the code so that it is readable (i.e. use multiple lines and proper indentation). Thank you! — Felix Kling, Jun 12 '13 at 12:23
http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript addEventListener not suitable for IE. — user2239256, Jun 12 '13 at 12:25
@user2239256 addEventListener is supported as of IE9 though: http://msdn.microsoft.com/en-us/library/ie/ff975245%28v=vs.85%29.aspx — Olly Hodgson, Jun 12 '13 at 12:38
Ok I see, so what exactly can I do to fix this? The issue is with IE9 and IE10. I just cant make it work — Damian, Jun 12 '13 at 12:40
I am betting your IE is running in IE7 mode. Hit F12 and look at what mode it is running in. — epascarello, Jun 12 '13 at 12:40
Have you tried the simple things, e.g. putting `console.log("DOMContentLoaded");` at the start of the function, just to make sure it actually happens in IE9/10? Are there errors in the console? — Olly Hodgson, Jun 12 '13 at 12:42
The thing is I just need the animation to fire off at different delays for my audio players. This is the only code I could think of. — Damian, Jun 12 '13 at 12:48
I opened the page in IE 9 and I see 4 errors in the console. You got errors! Plus you have jQuery on the page so why are you not just using jQuery's ready? — epascarello, Jun 12 '13 at 12:49
ya but they are unrelated to what is happening epascarello. one or two are related to fontface, the other one to soundmanager. The latter is not an error, for some reason IE sees it as one though. Keep in mind that im using css3 keyframe animations not javascript for animation. Javascript is just used to fire off the players at different delays — Damian, Jun 12 '13 at 12:51
@Damian I get errors in soundmanager.js and general.js (and the FB scripts, but that's because the corporate firewall blocks Facebook). — Olly Hodgson, Jun 12 '13 at 12:52
my site js and all works smoothly. No idea why its showing those errors. Its just this once code that doesnt work. Now I wrapped it in jquery read function, not working either — Damian, Jun 12 '13 at 13:00
@Olly Hodgson $(document).ready(function() { var e,t=document.querySelectorAll("div.bounceInDown");for(var n=0,r=t.length;n — Damian, Jun 12 '13 at 13:01
Isn't animation delay IE10+? I think that would be a problem with IE9. when you get it to run. — epascarello, Jun 12 '13 at 13:06
It's showing errors because there are errors, e.g. in the last one you're trying to do something to an element that doesn't exist. Anyway, what steps have you taken to debug that .ready() code? Are you outputting `e` and then `t[n].style.animatio‌nDelay` to the console to make sure they're acting as expected? — Olly Hodgson, Jun 12 '13 at 13:10
@Olly Hodgson, not sure. I just started with js so im not very sure what to do or how to do it — Damian, Jun 12 '13 at 13:20
Ok since no one knows the issue I will simply try and fix this with CSS3 — Damian, Jun 12 '13 at 13:30
@Damian The simplest way is to add `console.log(e);` to your script after you set `e`'s value. Then a few lines later `console.log(t[n].style.animationDelay)`. Open the dev tools, run the script and see what is output. Have a good read of http://net.tutsplus.com/tutorials/tools-and-tips/a-peek-at-internet-explorers-developer-tools/ too. — Olly Hodgson, Jun 12 '13 at 13:37

score 0 · Accepted Answer · answered Jun 12 '13 at 13:44

Well for starters IE9 doesn't support animation, that was only added in IE10 :p

Aside from that, it's possible that it's starting the animation before the DOMContentLoaded event has had a chance to update the delay. Rather than setting the animation in CSS and adjusting the delay in JS, try setting the entire animation in JS:

t[n].style.animation = "yourAnimationName 1s "+e;

(Replace that 1s with your animation duration)

Custom Javascript not firing in internet explorer 9 and 10

1 Answers1