Develop Reference

DOM Ready in IE 9

I am surprised that there are very few articles online addressing this issue. I am trying to create the famous "DOM ready" event for IE 9 and 10 in vanilla JavaScript and here's my code (stripped down to it's core):
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
document.getElementById("toggled").innerHTML = "ready";
alert("Stop!");
}
}
Now the problem I am experiencing in Internet Explorer is that the readyState is turned to "interactive" before the element "toggled" even exists in the DOM. When the page is paused and the alert is called the document is still completely blank. I am pretty sure this is a bug, since it works fine in IE 11. Does anyone know how to overcome this problem?
Thanks in advance!

window.addEventListener not working on IE8

Im trying to add a window.addEventListener to trrigger a 'pageShow' event...I added this to suppport IE 8,9,10,11 , firefox and chrome....
The below piece of code works fine for chrome and IE 11 but fails for IE 8...
Please provide some suggestion how to handle this?
if (!window.addEventListener){
alert('Not Window')
window.attachEvent('onpageShow',checksession,false);
}
else{
alert('Window')
window.addEventListener('pageshow',checksession,false);
}

Is there a way to get IE 10+ to fire an event when the overflow of an element changes?

I want to test if a div is overflowing. The following code works for webkit and Firefox.
var div = $("#myDivWithOverflow")[0];
var OnOverflowChanged = function(){
alert("OnOverflowChanged");
}
if (div.addEventListener) {
// webkit
div.addEventListener ('overflowchanged', OnOverflowChanged, false);
// firefox
div.addEventListener ('overflow', OnOverflowChanged, false);
}
As far as I can see IE10+ has support for the addEventListener method, but does not react on either of the above events.
Is there a way to achieve this in IE?
Update: I've created a fiddle which illustrates clearer what I want to achieve:
http://jsfiddle.net/AyKarsi/sB36r/1/
Unfortunately, the fiddle does not work at all in IE due to some security restrictions

Currently, overflowchanged are only supported on Webkit browsers.
A work around can be to check for mutation events (notably DOMAttrModified) and check if the overflow changed.
div.addEventListener("DOMAttrModified", function() {
// check overflow value
}, false);
This won't trigger on screen resize, so it may not do exactly what you're looking for. But it's somewhere you can dig for a solution.
On MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events
On Microsoft site: http://msdn.microsoft.com/en-us/library/ie/dn265032(v=vs.85).aspx

Javascript/jQuery not working in IE

This code works in all browsers except for IE. Anything I can do to add support for it?
<script type="text/javascript">
$(document).ready(function() {
var currentArrayNum = 2;
$('#names').on({
blur: function() {
currentArrayNum += 1;
var name = $("<p><input class='input' type='text' name='guests[]' value='' /></p>");
var nullFields = 0;
$(this).closest('div#names').find('input.input').each(function(){
if($(this).val() == ""){
nullFields++;
}
});
console.log(nullFields);
if(nullFields <= 1){
$('#names').append(name.fadeIn(500));
$('#leftbox').scrollTop($('#leftbox')[0].scrollHeight);
}
}
}, 'input');
});
</script>
It should mean that extra input fields are added. You can see it in action (in FF, Chrome, Safari etc) under 'Enter names for the guestlist' here.
EDIT
Tested in IE9 but doesn't work for me.
I should also ask if there's a way of testing in different versions of IE (and othe browsers) on a Mac?

Note that in some (all?) versions of IE, you need to have developer ("F12") tools open for console.log to work, otherwise console is undefined and so console.log() throws an error.
That may be your issue.

I know your question is about a week old but Im not sure if you found a solution or the reason for the cross-browser issues. I was recently working on a custom modal pop up window and I needed to find my scrollTop. Trust me, I love jQuery to death and I use it everyday but sometimes you need to use some good ol' javaScript. I.E accesses the body of the DOM differently than say Chrome or FF.
//I.E.
document.documentElement.scrollTop;
//Chrome, FF, etc.
document.body.scrollTop;
Basically, create a script that detects the user's browser and then include a conditional statement that will assign the value the appropriate way.
//Detect Browser
if (clientBrowser == "IE") {
currTopPos = document.documentElement.scrollTop;
} else {
currTopPos = document.body.scrollTop;
}
I created a script for one of the current projects Im working on, let me know if you would like to take a look at it.

Mouseover calls multiple scripts

I am using 2 different scripts for a site of mine. One for modern browsers and one for IE.
Both use mouseover. How do I call both scripts? My code is:
onmouseover="mouseoversound.playclip(); playSound(0);"
That does not work yet I am unsure how to call both.

you can detect the IE like this,
onmouseover="Play()"
In Play function detect the browser ( http://www.javascriptkit.com/javatutors/navigator.shtml ) and call relevant function,
function Play(){
if (navigator.appName == 'Microsoft Internet Explorer'){
//your function for IE
}else{
// your function for other browsers
}
}