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!

IE11 jQuery html() does not function inside SVG element

Works in Chrome, etc.
Screenshot should explain the situation.
The SVG's content has been changed in the DOM, but the 'DOM Explorer' is reporting the original rect is still there (it's being shown).
Interestingly enough, Safari 7 on OS X also exhibits the same behavior.

I faced the same problem.
A quick fix is to use jQuery empty() instead of html('');
e.g.,
var svg = d3.selectAll("svg");
svg.each(function() {
// does not work in IE $(this).html('');
$(this).empty();
});

Overwrite width of an div element with jquery - IE bug?

I have problem with a very simple jquery script - it works with all browsers except IE. Basically I want to change the width of a div element with jquery. IE explorer seems to ignore the change. Here is the complete script (only at certain pages, I want to have that change):
<script>
$( document ).ready(function() {
var a, url = document.URL;;
a = document.createElement( 'a' );
a.href = url;
if (a.pathname == '/index.php/somepage')
$("div.component.message").css("width","700px");
});
</script>
The part that doesn't work is with IE (IE 11/ Edge):
$("div.component.message").css("width","700px");
If I put something else in the if clause like an alert it will be executed. The width change does work in Opera, Chrome oder Firefox.
I solved the problem in the php file, which might be better than doing it with javascript in the first place, still I'd like to know if I simply made a stupid mistake or if it is a problem with IE in general.

window.location.pathname returns the leading slash after the hostname in all versions of IE
The <a> tag is only that returns the path without the slash in IE (and Opera as well).
Check Javascript .pathname IE quirk?

You've written double semi-colon at this
var a, url = document.URL;;
This might be a problem. Correct it.

Getting unload to work cross-browser's with a button

I am wondering if I can have the unload method in Javascript do a button.click; or a document.getElementById('target').click(), now I am working on different methods for different browsers but I can't seem to get them it working together.
The reason for this is I want to clear the information in the browser but I can't seem to get the unload method to work right. But I don't even know if the unload method is capable of doing a button.click or a document.getElementById('target').click(); Is there like a list of things this method can or cannot do? Here is the code I am trying to get working:
window.onunload=leave;
function leave() {
// For Internet Explorer only.
if (navigator.appName == "Explorer"){
document.getElementById('kioskform:broswerCloseSubmit').click();
}
// For Chrome only
if (navigator.appName == "Chrome"){
// add code for Chrome to use.
}
// for Safari only
if (navigator.appName == "Safari"){
// add code for Safari to use
}
// for Firefox only
if (navigator.appName == "Firefox"){
// add code for Firefox to use
}
}
So far the only thing working is IE but the other web browsers are not liking the code in the document. But I want to try other methods for the other browsers I am working with. But I can't seem to get browser detection to work at all, any idea's or suggestions or advice is greatly appreciated thank you.

Some browsers (Chrome / FF) does not support the window.onunload method.
See: http://bugs.jquery.com/ticket/10509

Render an iFrame dynamically in Firefox

I generate an iFrame dynamically like this
var iframe=document.createElement('iframe');
document.body.appendChild(iframe);
var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
iframedoc.body.innerHTML="HI";
Fiddle: http://jsfiddle.net/Pbj7S/
It works in Google Chrome, Opera, Safari, but not in Firefox.
Any idea why?

This works :
var iframe=document.createElement('iframe');
document.body.appendChild(iframe);
setTimeout(function(){
var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
iframedoc.body.innerHTML="HI";
}, 10);
The problem was that you were trying to access the iframe document before it was available in the DOM.
The delay isn't important, the important point is that browsers update the display (and some js accessible objects in the case of Firefox) only after the js thread has finished working.

Nothing like that is necessary. You do not need to use timeout or anything for firefox to behave like chrome. In your code just set the source to 'javascript:' would do it. Example bellow:
iframe.src = 'javascript:';
or just use:
iframe.src = 'about:';
don't set with blank. Will work just fine in firefox, chrome, opera, etc....