So one of the scripts I have in my website is a mouse hover script that changes color and image. However this is not behaving properly in IE so I would like to disable that script if the user is using IE.
How can i do that?
Example of what I want:
//if IE not detected(any other browser detected)
<script type="text/javascript" src="js/mousehover.js"></script>
//else (IE detected)
//do nothing / don't upload the script
It's probably better to debug the script, at least for IE8+.
If you really want to avoid loading a script on IE, though, I believe it's the only browser with ActiveXObject, so the simplest thing is probably just to put a guard around your code in mousehover.js:
if (typeof ActiveXObject !== "undefined") {
// IE, don't do the mouse hover stuff
}
Or if it's really important to you not to download that JS on IE, you can do that in two ways:
<script>
(function() {
if (typeof ActiveXObject === "undefined") {
var s = document.createElement('script');
s.src = "js/mousehover.js";
document.documentElement.appendChild(s);
}
})();
</script>
That will load the script only on non-IE. But note that any subsequent scripts you have will not wait for that script to load, so if there are dependencies, you'll need to watch for them.
or using document.write:
<script>
if (typeof ActiveXObject === "undefined") {
document.write('<scr' + 'ipt src="js/mousehover.js"></scr' + 'ipt>');
}
</script>
...which will maintain load order, but can't be used in XHTML.
ActiveXObject? I was trying to handle all versions of IE.You can use conditional comments:
<![if !IE]>
<script type="text/javascript" src="js/mousehover.js"></script>
<![endif]>
<!--> at the top and prefix <!-- at the bottom. Furthermore, this will only affect IE 9 and lower, not IE10+.
mousehover.js and explain what's "not working", if it has a reasonable size?