createElement or appendChild IE issue.

@BlipsJun 20.2008

I’m currently working on a small script that displays a div above all the other content on the page in reference to a selected button. It’s working perfectly in firefox but not in IE at all. Any ideas ?

[CODE] openWindow = false; iconWindow = null;

function showIconWindow(iconType, element) { element.style.backgroundColor = “#FF0000”;

//create window above and to the left of the icon posX = element.offsetLeft; posY = element.offsetTop;

//if no other windows are open if (openWindow == false) { iconWindow = document.createElement(‘div’); iconWindow.style.width = “250px”; iconWindow.style.height = “30px”; iconWindow.style.backgroundColor = “#FFFFFF”; iconWindow.style.position = “absolute”; iconWindow.style.float = “none”; iconWindow.style.left = (posX – 238)+”px”; iconWindow.style.top = (posY – 30)+”px”; iconWindow.style.display=”block”; document.body.appendChild(iconWindow);

openWindow = true; } } [/CODE]

to post a comment

JavaScript

15 Comments(s) _↴

@Declan1991Jun 20.2008 — #

<i>
 </i>openWindow = false;
 iconWindow = null;
 
 function showIconWindow(iconType, element) {
 element.style.backgroundColor = "#FF0000";
 
 <i>	</i>//create window above and to the left of the icon
 <i>	</i>var posX = element.offsetLeft;
 <i>	</i>var posY = element.offsetTop;
 
 <i>	</i>//if no other windows are open
 <i>	</i>if (!openWindow) {
 <i>	</i>	iconWindow = document.createElement('div');
 <i>	</i>	iconWindow.style.width = "250px";
 <i>	</i>	iconWindow.style.height = "30px";
 <i>	</i>	iconWindow.style.backgroundColor = "#FFFFFF";
 <i>	</i>	iconWindow.style.position = "absolute";
 <i>	</i>	iconWindow.style.left = (posX - 238)+"px";
 <i>	</i>	iconWindow.style.top = (posY - 30)+"px";
 <i>	</i>	iconWindow.style.display="block";
 <i>	</i>	document.getElementsByTagName("body")[0].appendChild(iconWindow);
 
 <i>	</i>	openWindow = true;
 <i>	</i>}
 }

Maybe?

@BlipsauthorJun 20.2008 — #I tried your fix, it still doesn't fix the IE issue.. ?

@Declan1991Jun 20.2008 — #Just tested it, and it works identically in IE7 and Fx 2.0.0.13. What version of IE, and what doesn't work?

@BlipsauthorJun 20.2008 — #IE 6. I know its super old, but according to some surveys, about 20% of ppl still use it.

@Declan1991Jun 20.2008 — #And you should test in it. Time for a bit of debugging:

<i>
 </i>function showIconWindow(iconType, element) {
 alert("Function called");
 element.style.backgroundColor = "#FF0000";
 
 <i>	</i>//create window above and to the left of the icon
 <i>	</i>alert("backgroundColor okay");
 <i>	</i>var posX = element.offsetLeft;
 <i>	</i>var posY = element.offsetTop;
 <i>	</i>alert("positionX and Yn"+posX+"n"+posY);
 <i>	</i>//if no other windows are open
 <i>	</i>if (!openWindow) {alert("openWindow = false");
 <i>	</i>	iconWindow = document.createElement('div');
 <i>	</i>	alert("Element created");
 <i>	</i>	iconWindow.style.width = "250px";
 <i>	</i>	iconWindow.style.height = "30px";
 <i>	</i>	alert("Style and width okay");
 <i>	</i>	iconWindow.style.backgroundColor = "#FFFFFF";
 <i>	</i>	alert("Background okay");
 <i>	</i>	iconWindow.style.position = "absolute";
 <i>	</i>	alert("!!position = true");
 <i>	</i>	iconWindow.style.left = (posX - 238)+"px";
 <i>	</i>	alert("Style.left okay");
 <i>	</i>	iconWindow.style.top = (posY - 30)+"px";
 <i>	</i>	alert("Style.top okay");
 <i>	</i>	iconWindow.style.display="block";
 <i>	</i>	alert("Display block");
 document.getElementsByTagName("body")[0].appendChild(iconWindow);
 alert("Element appended");
 openWindow = true;
 }
 }

How many alerts do you get?

@BlipsauthorJun 21.2008 — #got every single one. Very confusing...

Thanks for your help so far btw!

@BlipsauthorJun 21.2008 — #no one has any more ideas?

I know that people manage to do the equivalent in IE. What would be a small code snippet that would create a div and display it in IE 6?

@FangJun 21.2008 — #Showing the full document would be helpful

@Angry_Black_ManJun 21.2008 — #add a text node to the div:

<i>
 </i>		iconWindow = document.createElement('div');
 iconWindow.style.width = "250px";
 iconWindow.style.height = "30px";
 iconWindow.style.backgroundColor = "#FFFFFF";
 iconWindow.style.position = "absolute";
 iconWindow.style.float = "none";
 iconWindow.style.left = (posX - 238)+"px";
 iconWindow.style.top = (posY - 30)+"px";
 iconWindow.style.display="block";
 [COLOR="Red"]iconWindow.appendChild(document.createTextNode("test"))[/COLOR]
 document.body.appendChild(iconWindow);

i am not really famliar with all the browser idiosyncrasies as it pertains to CSS, but i assume this may be one of those.. adding the text will let us know if the div is at least being created, and somehow theres an issue with the height/width declarations..

@BlipsauthorJun 21.2008 — #add a text node to the div:

<i>
 </i>		iconWindow = document.createElement('div');
 iconWindow.style.width = "250px";
 iconWindow.style.height = "30px";
 iconWindow.style.backgroundColor = "#FFFFFF";
 iconWindow.style.position = "absolute";
 iconWindow.style.float = "none";
 iconWindow.style.left = (posX - 238)+"px";
 iconWindow.style.top = (posY - 30)+"px";
 iconWindow.style.display="block";
 [COLOR="Red"]iconWindow.appendChild(document.createTextNode("test"))[/COLOR]
 document.body.appendChild(iconWindow);

[/QUOTE]

Ah great, finally some progress. The text is indeed being displayed in IE 6, it just seems to be ignoring all the style. Its placing the text at the very bottom left of the screen. I'll try messing with the styles and see whats going on...

@kburnikApr 23.2009 — #Hi, I had a similar problem with a page I worked on a few years ago... I tried using lightbox and I've put the script include in the head of the document as any normal person would... The lightbox effect worked perfectly in Firefox but every time I tried to load the page in Internet Explorer 6, the Microsoft's trash product responded "Operatin aborted"... Until that moment I thought I've seen all the web errors that could occur... but this one just didn't get in my head...

I searched some forums and found a thread... a pretty long one...

The point is that IE 6 has a bug with the appendChild method in javascript. In other words, you must not append an element into the body object until the whole document has been loaded = until IE finishes parsing the HTML and creating the actual DOM of the page body...

I fixed my lightbox issue by moving the script includes after the body element, which means beetween </body> lightbox calls </html>

Still, not long ago I developed a similar web application for picture galleries you can use in a CMS system, the basic idea is that the page fades to black with a transparent black overlay and a box with the image gallery appears upon the transparent element.

The first issue was how I can make the transparent div work cross-browser: the hack is pretty simple but not sure that w3c would be happy about it (although w3c doesn't care much of JS so you can try-catch it with javascript):

[CODE]<div style="width:100%;height:100%;z-index:-1;background:black;display:none;position:absolute;top:0px;left:0px;[B]filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;[/B]"></div>
 <div id="box_with_pictures">pictures and stuff</div>[/CODE]

The second issue is how to append this to the body element, so for some time I just used the innerHTML method to put it inside another DIV, but that didn't work well because even though the element style is "position:absolute;top:0px;" the transparent overlay did not appear at the top of the document, rather it appeared on top of the scroll position... so that was a bit lame...

When i tried to make IE append this element after the page was loaded, it was still not functioning:

[CODE]document.body.onload=document.body.appendChild(element);
 [/CODE]

So I tried to give IE 6 some time after he loads the body element and did following:

[CODE]document.body.onload=setTimeout("document.body.appendChild(element)",1000);
 [/CODE]

What happend is that IE 6 showed an error saying: Not implemented which means that the body object does not yet have the onload method or that document element does not yet have the body object... But the overlay worked perfectly which means the IE 6 is a big fat liar ?

So I tried to kill the error with try-catch:

[CODE]try{
 document.body.onload=setTimeout("document.body.appendChild(element)",1000);
 } catch (err) {} [/CODE]

And voila!! Works perfectly and no error ocurred! ?

Tested in IE 6 and latest Firefox version (April 2009)

The solution to original thread code would be:

 [CODE]var iconWindow = document.createElement('div');
   iconWindow.style.width = "250px";
   iconWindow.style.height = "30px";
   iconWindow.style.backgroundColor = "#FFFFFF";
   iconWindow.style.position = "absolute";
   iconWindow.style.float = "none";
   iconWindow.style.left = (posX - 238)+"px";
   iconWindow.style.top = (posY - 30)+"px";
   iconWindow.style.display="block";
   iconWindow.appendChild(document.createTextNode("test"))
   try{
   document.body.onload=setTimeout("document.body.appendChild(iconWindow);",1000);
   } catch (err) {}[/CODE]

----

BTW if you need the whole overlay script, just reply that you do to this thread...

----

@roma276May 28.2009 — #great solution man) , can u help me without my problem?- there is no createElement in IE

[CODE] var Count = -1;
 function add_tpl()
 {
 Count++;
 
 
 
   var new_tpl_min_comm = document.createElement('input'); 
   new_tpl_min_comm.type = 'text';
   new_tpl_min_comm.name = 'min_comm['+Count+']'; 
   new_tpl_min_comm.size = '7';
 
   var new_tpl_max_comm = document.createElement('input'); 
   new_tpl_max_comm.type = 'hidden';
   new_tpl_max_comm.name = 'max_comm['+Count+']'; 
   new_tpl_max_comm.size = '7';
 
   var new_tpl_value = document.createElement('input'); 
   new_tpl_value.type = 'text';
   new_tpl_value.name = 'tpl_value['+Count+']'; 
   new_tpl_value.size = '7';
 
   var new_tpl_type_select = document.createElement('select'); 
   new_tpl_type_select.id = 'tpl_select['+Count+']';
   new_tpl_type_select.name = 'tpl_select['+Count+']';
 
   var new_tpl_type_option = document.createElement('option'); 
   new_tpl_type_option.value = '0'; 
   new_tpl_type_option.text = '<? echo iconv("utf-8","windows-1251","&#1103;&#9484;&#1087;&#9574;&#1087;©")?>';
 
 
   var new_tpl_type_option1 = document.createElement('option'); 
   new_tpl_type_option1.value = '1'; 
   new_tpl_type_option1.text = '%';
 
   var new_tpl_type_option2 = document.createElement('option'); 
   new_tpl_type_option2.value = '2'; 
   new_tpl_type_option2.text = '<? echo iconv("utf-8","windows-1251","&#1103;&#9472;&#1103;&#9488;&#1087;&#9568;&#1087;&#9577;&#1087;&#9574;")?>';
 
 
   var new_tr = document.createElement('tr'); 
   new_tr.id = 'new_tr['+Count+']';
 
 
 
   var new_td2 = document.createElement('td'); 
   new_td2.id = 'new_td2['+Count+']';
 
   var new_td3 = document.createElement('td'); 
   new_td3.id = 'new_td3['+Count+']';
 
   var new_td4 = document.createElement('td'); 
   new_td4.id = 'new_td4['+Count+']';
 
   var new_td5 = document.createElement('td'); 
   new_td5.id = 'new_td5['+Count+']';
 
  var new_br = document.createElement('br');
  var new_br1 = document.createElement('br');
  var new_br2 = document.createElement('br');
  var new_br3 = document.createElement('br');
  var new_br4 = document.createElement('br');
  var new_br5 = document.createElement('br');
 
 
 
 
  var textNodeMin = document.createTextNode('<? echo iconv("utf-8","windows-1251","&#1087;·&#1103;&#9484;:")?>');
  var textNodeMax = document.createTextNode('<? echo iconv("utf-8","windows-1251","")?>');
  var textNodeValue = document.createTextNode('<? echo iconv("utf-8","windows-1251","&#1103;&#9472;&#1103;&#9488;&#1087;&#9568;.  &#1087;*&#1087;&#9580;&#1087;&#9578;&#1087;&#9574;&#1103;&#9474;&#1103;&#9474;&#1087;&#9574;&#1103;&#9616;")?>');
  var textNodeRub = document.createTextNode('<? echo iconv("utf-8","windows-1251","")?>'); 
 
 
  document.getElementById('fs').appendChild(new_tr); 
 
  document.getElementById('new_tr['+Count+']').appendChild(new_td2);
  document.getElementById('new_tr['+Count+']').appendChild(new_td3);
  document.getElementById('new_tr['+Count+']').appendChild(new_td4);
  document.getElementById('new_tr['+Count+']').appendChild(new_td5);
 
  document.getElementById('new_td2['+Count+']').appendChild(textNodeMin); 
  document.getElementById('new_td2['+Count+']').appendChild(new_tpl_min_comm);
  document.getElementById('new_td3['+Count+']').appendChild(textNodeMax);
  document.getElementById('new_td3['+Count+']').appendChild(new_tpl_max_comm);
  document.getElementById('new_td4['+Count+']').appendChild(textNodeValue);
  document.getElementById('new_td4['+Count+']').appendChild(new_tpl_value); 
  document.getElementById('new_td5['+Count+']').appendChild(new_tpl_type_select);
  document.getElementById('tpl_select['+Count+']').appendChild(new_tpl_type_option);
  document.getElementById('tpl_select['+Count+']').appendChild(new_tpl_type_option1); 
  document.getElementById('tpl_select['+Count+']').appendChild(new_tpl_type_option2);
 
 }
 [/CODE]

@FangMay 28.2009 — #great solution man) , can u help me without my problem?- there is no createElement in IE
[/QUOTE]Yes there is: http://msdn.microsoft.com/en-us/library/ms536389(VS.85).aspx

@roma276May 28.2009 — #thanks Fang, I just find that page)?

werever I must to code like that :

if (navigator is "Internet Explorer")

{

one method

}

if (navigator is "Firefox")

{

else method

}

.....

then it is works correctly in all Inet browsers )))))))

@FangMay 28.2009 — #Which part is no being displayed? inputs, select, table elements?

The last section, where appendChild is used, the elements you have created do not appear to exist in the document.

document.getElementById('new_tr['+Count+']').appendChild(new_td2);

should probably be:

new_tr[Count].appendChild(new_td2);

Also in #JavaScript _↴

Change whole page to grey Default Borders or Padding in FLV Player div slide in

Success!

Help @Blips spread the word by sharing this article on Twitter...

Tweet This

createElement or appendChild IE issue.

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

createElement or appendChild IE issue.

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴