A couple more things i learned today about using the DOM: First, when you are creating elements using createElement, you can usually set your attributes by using myElement.setAttribute(attributeName, “attributeValue”). Well, I had a bitch of a time today trying to figure out why nothing was happening in IE with the onclick attribute for an ‘A’ element I was creating. In all the mozillas everything worked fine…the onclick function i was assigning was firing correctly.
It turns out, IE expects you a function, not a string value for the onclick reference. Mozilla browsers will parse the string for the function so you dont get an error. There’s a couple of different ways to reconcile this, but the easiest and most cross-browser compatible I found was to just directly assign the onclick handler a function literal:
myNewElement.onclick = function(){
//dostuff
}
Even more of a pain in the ass was when i was dynamically generating a ‘IFRAME’ using createElement. again, IE was giving me problems…this time i could NOT get the border around the new iframe to go away for anything…i was setting both the frameborder and border properties to “0″ (and even tried “no”), and it would work in mozilla, but not IE. I tried some CSS stuff, that didnt work either. Finally i tried using frameBorder=0 instead….and it worked. Damn platform-dependent case sensitivity.
javascripting still SUCKS, even with the DOM and its methods.
Posted by flashape at 05:02 PM | Comments (4)
FlashApe » createElement and events, and iframe borders
createElement and events, and iframe borders
- April 22nd, 2005
- 1:14 pm
19 People had this to say...
- Stuntbox - Squashing Borders on Dynamic iframes
- September 18th, 2006
- 9:08 pm
[...] After what seemed like an interminable amount of time spent fiddling (poking Explorer with a sharp stick) and researching (Googling every variant of “stupid iframe borders in JavaScript” I could think of) I finally lucked out and hit upon this blog entry at FlashApe. Turns out that for some mysterious reason IE will only get this right if you use camel case for the attribute name value in your JavaScript. [...]
- Geoff Rimmer
- October 13th, 2006
- 1:47 am
Thanks for your comments about the ‘onclick’ attribute to an anchor tag being a function. I had been trying to disable an anchor tag as follows:
link.removeAttribute("href");
link.removeAttribute("onclick");
but the onclick still fired when I clicked on it.
By changing this code to:
link.removeAttribute("href");
link.onclick = function() {};
it now works perfectly.
Thanks for saving me a few hours work!
Geoff
- Gregory Wurm
- November 16th, 2006
- 1:11 pm
Thank you for the help, this was the last bug I had to fix of many when getting a page running in IE.
- Brad
- January 22nd, 2007
- 6:45 pm
I knew about the camelcase for accessing CSS properties in Javascript… but differing implementations of document.createElement across browsers did my head in!
Got it worked out in the end…
- Tepozan
- February 26th, 2007
- 11:46 am
I was looking for a solution to disable my anchor. I saw the Geoff Rimmer’s solution. It works but I needed to enable my anchor and it looks like setAttributte doesn´t work in IE. Then tried with Geoff Rimmer’s code. So this is what I found…
To disable the anchor:
anchor.onclick = function (){return false;};
To enable the anchor
anchor.onclick = function (){return true;};
- Burns
- April 11th, 2007
- 10:27 am
Thanks, did a search on Google for that damn “frameBorder” problem and your post saved my life!
- Zach Leatherman
- April 24th, 2007
- 1:32 pm
Thanks for this post. In my tests, it seems that it doesn’t matter if you set the frameBorder property before or after attaching to a parent element, it only matters that Border is capitalized.
Ugh.
- zachleat.com {web} » Adventures in I-Frame Shims or How I Learned to Love the Bomb
- April 24th, 2007
- 1:52 pm
[...] I-Frame frameBorder attribute Are you trying to get rid of that nasty i-frame border in Internet Explorer 6 (IE6)? Tried CSS properties? Tried setting the frameBorder attribute? It turns out that when setting the frameBorder attribute, the name of the attribute is case sensitive. Using frameborder will not work correctly, but using frameBorder (with a capital B) will give the desired result. [Source: FlashApe] [...]
- TommyNator
- May 11th, 2007
- 12:44 am
Thank you very much, we were struggling with this onclick property problem in IE and now it works! Cheers 
- ryan0x2
- June 12th, 2007
- 9:18 am
dude, had same problem, found your site after 2 hours of dealing w/ this stupid thing.
the same thing applies in atleast IE7 with marginHeight, the H must be capitalized.
sooo dumb.
- Tom Van den Eynde
- August 2nd, 2007
- 1:54 am
Hi! You saved my day as well!
- Guilherme
- August 9th, 2007
- 9:59 am
GREAT. I love you, I love the internet. Here I was breaking my head apart because of a stupid motherf**ker UGLY BORDER in my iframe… and then I found you, sharing your solutions.
wonder why people dont use much iFrames as they could… all the innerHTML and workarounds they do… and iFrame is there since ever.
I dont have an iMac nor IPhone, but damn I use a lot of iFrames!
(¬¬)
well… back to work!
- tama
- August 26th, 2007
- 10:01 pm
Thanks..bro ur posting is very usefull for me… i hope u die and go to heaven…. ;p
- Sara G
- January 17th, 2008
- 12:21 pm
Thanks for posting this! I was trying to get rid of the iframe borders in exactly the same situation. Phew. What a relief! I hate IE sometimes!
- grunchitog
- March 24th, 2008
- 11:50 am
IE mother fuck…, i’ve spent 4 hours fighting with IE and JavasCript to solve this fuc…. problem. Many thanks for your post!!
IE sucks
- ????
- April 2nd, 2008
- 10:57 pm
Thank you very much, we were struggling with this onclick property problem in IE and now it works! Cheers
- Paul
- April 19th, 2008
- 2:54 am
Thanks for this I too have just spent agaes trying to figure out why the border wouldnt go.
Yup ie is a pile of ……
- Anvar
- July 3rd, 2008
- 6:17 am
Cool…really saving a lot of time of mine for the onclick javascript method in the createelement…
try {
element = document.createElement(”");
} catch (e) {
element = document.createElement(”input”);
element.setAttribute(”type”, “checkbox”);
element.setAttribute(”checked”,”checked”);
}
element.setAttribute(”name”, count);
element.setAttribute(”id”, count);
//element.setAttribute(”onclick”,”setStatus(this)”);
element.onclick = function(){
var chkboxrowNo=this.name.slice(5);
if(this.checked) {
document.getElementById(”h0″+chkboxrowNo).value=”1″;
} else {
document.getElementById(”h0″+chkboxrowNo).value=”0″;
}
}
RSS feeds available for 
I’ve been having exactly the same problem. I created an iframe using the following code
objIFrame = document.createElement(”iframe”);
objContainer.appendChild(objIFrame);
And then set some other properties.
Turns out I had to set the frameBorder=0 before I appended the iframe to the parent! This code worked a treat
objIFrame = document.createElement(”iframe”);
objIFrame.frameBorder = 0;
objContainer.appendChild(objIFrame);
I hope this helps someone else