IE Div appendChild problem

[Canabeez]

Hello there,

I'm having a problem with appending a Div into a div, the DOM is updated fine, but IE is not showing the Div. If I use innerHTML's, everything is working fine, as in Firefox, Safari or Chrome.

Any suggestions anyone?

[hsriat]

There must be some problem elsewhere in the code. If you can post it here, that would be helpful.

[Canabeez]

Ok, here it is, pretty big but hope you'll manage to find it.

A little background: this is a class for managing HTML elements in JavaScript, however for now I use the most stupid workaround (can be seen on line 148 of the main code). I've separated the IE from all the others, but as I can see the code the Firefox version should work in IE too. Can't see what's wrong.

Thanks in Advance

Here's the main code:
[code=javascript]
/**
*
* Filename: ESCMS_HTMLEleme nt.js
* Library: ESCMS HTMLElement
* Version: 1.0.0
*
* Coder: Even Simon <even.simon@gma il.com>
* Support: http://www.evensimon.c om/ESCMS-HTMLElement/
*
*/

function HTMLElement(aEl ement, Params)
{
var aElement = document.create Element(aElemen t);
for(var i in Params) aElement[i] = Params[i];
return aElement;
}

/* Configuration Class */
HTMLElement.Con fig = function()
{
this.FOLDER_IMA GES = 'images/';

/* Box */
this.FOLDER_BOX = this.FOLDER_IMA GES + 'Box/';
this.IMAGE_BOX_ LEFT_TOP = {
src: this.FOLDER_BOX + 'lt.png',
width: 9,
height: 9
};
this.IMAGE_BOX_ RIGHT_TOP = {
src: this.FOLDER_BOX + 'rt.png',
width: 10,
height: 9
};
this.IMAGE_BOX_ CENTER_TOP = {
src: this.FOLDER_BOX + 'ct.png',
width: 1,
height: 9
};
this.IMAGE_BOX_ LEFT_CENTER = {
src: this.FOLDER_BOX + 'lc.png',
width: 9,
height: 1
};
this.IMAGE_BOX_ RIGHT_CENTER = {
src: this.FOLDER_BOX + 'rc.png',
width: 10,
height: 1
};
this.IMAGE_BOX_ LEFT_BOTTOM = {
src: this.FOLDER_BOX + 'lb.png',
width: 9,
height: 10
};
this.IMAGE_BOX_ CENTER_BOTTOM = {
src: this.FOLDER_BOX + 'cb.png',
width: 1,
height: 10
};
this.IMAGE_BOX_ RIGHT_BOTTOM = {
src: this.FOLDER_BOX + 'rb.png',
width: 10,
height: 10
};

/* Dropdown */
this.FOLDER_DRO PDOWN = this.FOLDER_IMA GES + 'Dropdown/';
this.IMAGE_DROP DOWN_ARROW = {
src: this.FOLDER_DRO PDOWN + 'd.png',
width: 15,
height: 15
};
}

HTMLElement.get ElementById = function(Id)
{
return ('undefined' != typeof(HTMLElem ent.Objects[Id]))?HTMLElement. Objects[Id]:null;
}

HTMLElement.Add Object = function(Id,Obj ect)
{
HTMLElement.Obj ects[Id] = Object;
}

HTMLElement.Opt ion = function(Text,V alue)
{
this.text = Text;
this.value = Value;
}

HTMLElement.ISI E = document.all?tr ue:false;
HTMLElement.Obj ects = new Array();
HTMLElement.DIV = "DIV";
HTMLElement.SPA N = "SPAN";
HTMLElement.A = "A";
HTMLElement.SEL ECT = "SELECT";
HTMLElement.OPT ION = "OPTION";
HTMLElement.BUT TON = "BUTTON";
HTMLElement.TEX T = "TEXT";
HTMLElement.SCR IPT = "SCRIPT";
HTMLElement.TAB LE = "TABLE";
HTMLElement.TR = "TR";
HTMLElement.TD = "TD";
HTMLElement.IMG = "IMG";
HTMLElement.BR = "BR";

/* Dropdown Class */
HTMLElement.Dro pdown = function(Id,Par ams)
{
/* Variables */
this.Id = Id;
this.selectedIn dex = 0;
this.IsMenuOpen = false;

/* Functions */
this.Draw = function()
{
var Span = new HTMLElement(HTM LElement.SPAN,{
className: 'ESCMS_Dropdown ESCMS_Dropdown_ Font ESCMS_Dropdown_ Size',
id: this.Id,
onclick: function()
{
var Object = HTMLElement.Obj ects[this.id];
if(!Object.IsMe nuOpen){Object. Show();}
else{Object.Hid e();}
}
});
return Span;
}

this.Show = function()
{
var Width = this.Span.offse tWidth;
Width = Width<200?200:W idth+8;
var Height = 200;

var BoxObject = new HTMLElement.Box (Width,Height);
var Box = BoxObject.Box;
var BoxContent = BoxObject.BoxCo ntent;

BoxContent.appe ndChild(this.Ge tOptions(Width-19,Height-19));

var BoxPosition = HTMLElement.Fin dPosition(this. Span);
BoxPosition[0] = BoxPosition[0] - 2;
BoxPosition[1] = BoxPosition[1] + this.Span.offse tHeight - 3;

if(HTMLElement. ISIE)
{
var Div = new HTMLElement(HTM LElement.Div,{} ).appendChild(B ox);
var BodyDiv = new HTMLElement(HTM LElement.Div,{} );
document.body.a ppendChild(Body Div);
BodyDiv.style.l eft = BoxPosition[0];
BodyDiv.style.t op = BoxPosition[1];
BodyDiv.style.p osition = 'absolute';
BodyDiv.innerHT ML = Div.innerHTML;
this.Menu = BodyDiv;
}
else
{
Box.style.left = BoxPosition[0];
Box.style.top = BoxPosition[1];
Box.className = 'ESCMS_Dropdown ';
document.body.a ppendChild(Box) ;
this.Menu = Box;
}

this.IsMenuOpen = true;
}

this.Hide = function()
{
if(this.IsMenuO pen)
{
document.body.r emoveChild(this .Menu);
this.IsMenuOpen = false;
}
}

this.GetOptions = function(Width, Height)
{
var Div = new HTMLElement(HTM LElement.DIV,{
className:'ESCM S_Dropdown_Sele ct ESCMS_Dropdown_ Font ESCMS_Dropdown_ Size'
});
Div.style.width = Width;
Div.style.heigh t = Height;
for(var i=0;i<this.Opti ons.length;i++)
{
Div.appendChild (new HTMLElement(HTM LElement.ISIE?H TMLElement.A:HT MLElement.DIV,{
href: 'javascript:'+( HTMLElement.ISI E?'HTMLElement. Objects["'+this.Id+ '"].Select('+i+')' :'void(0)')+';' ,
className: 'ESCMS_Dropdown _A',
id: this.Id,
name: i,
innerHTML: this.Options[i].text,
onclick: function()
{
HTMLElement.Obj ects[this.id].Select(this.na me);
},
onmouseover: function(){if(! HTMLElement.ISI E){this.classNa me = 'ESCMS_Dropdown _A_HOVER';}},
onmouseout: function(){if(! HTMLElement.ISI E){this.classNa me = 'ESCMS_Dropdown _A';}}
}));
}
return Div;
}

this.SetSpanVal ue = function(Value)
{
var CONFIG = new HTMLElement.Con fig;
this.Span.inner HTML = Value;
this.Span.appen dChild(new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_DR OPDOWN_ARROW.sr c,
width: CONFIG.IMAGE_DR OPDOWN_ARROW.wi dth,
height: CONFIG.IMAGE_DR OPDOWN_ARROW.he ight,
align: 'absmiddle'
}));
}

this.Select = function(select edIndex)
{
this.SetSpanVal ue(this.Options[selectedIndex].text);
this.selectedIn dex = selectedIndex;
this.value = this.Options[selectedIndex].value;
this.text = this.Options[selectedIndex].text;
this.Hide();
if(this.onChang e){this.onChang e(this);}
}

/* Read params */
if(Params.Optio ns)
{
this.Options = Params.Options;
}
if(Params.onCha nge)
{
this.onChange = Params.onChange ;
}
else{throw 'Cannot create empty Dropdown';}

this.Span = this.Draw();
this.SetSpanVal ue(this.Options[0].text);

HTMLElement.Add Object(Id,this) ;

return this.Span;
}

/* Box Class */
HTMLElement.Box = function(Width, Height)
{
var CONFIG = new HTMLElement.Con fig;
var Div = new HTMLElement(HTM LElement.DIV,{
width: Width,
height: Height
});

Div.style.width = Width;
Div.style.heigh t = Height;

var Table = new HTMLElement(HTM LElement.TABLE, {
cellPadding: 0,
cellSpacing: 0,
border: 0,
width: Width,
height: Height
});

var Tr = new HTMLElement(HTM LElement.TR,{}) ;
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: CONFIG.IMAGE_BO X_LEFT_TOP.widt h,
height: CONFIG.IMAGE_BO X_LEFT_TOP.heig ht
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_LEFT_TOP.src,
width: CONFIG.IMAGE_BO X_LEFT_TOP.widt h,
height: CONFIG.IMAGE_BO X_LEFT_TOP.heig ht,
border: 0
}));
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: (Width-(CONFIG.IMAGE_B OX_LEFT_TOP.wid th+CONFIG.IMAGE _BOX_RIGHT_TOP. width)),
height: CONFIG.IMAGE_BO X_CENTER_TOP.he ight
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_CENTER_TOP.sr c,
width: (Width-(CONFIG.IMAGE_B OX_LEFT_TOP.wid th+CONFIG.IMAGE _BOX_RIGHT_TOP. width)),
height: CONFIG.IMAGE_BO X_CENTER_TOP.he ight,
border: 0
}));
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: CONFIG.IMAGE_BO X_RIGHT_TOP.wid th,
height: CONFIG.IMAGE_BO X_RIGHT_TOP.hei ght
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_RIGHT_TOP.src ,
width: CONFIG.IMAGE_BO X_RIGHT_TOP.wid th,
height: CONFIG.IMAGE_BO X_RIGHT_TOP.hei ght,
border: 0
}));
Table.appendChi ld(Tr);

var Tr = new HTMLElement(HTM LElement.TR,{}) ;
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: CONFIG.IMAGE_BO X_LEFT_CENTER.w idth,
height: Height-(CONFIG.IMAGE_B OX_LEFT_TOP.hei ght+CONFIG.IMAG E_BOX_LEFT_BOTT OM.height)
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_LEFT_CENTER.s rc,
width: CONFIG.IMAGE_BO X_LEFT_CENTER.w idth,
height: Height-(CONFIG.IMAGE_B OX_LEFT_TOP.hei ght+CONFIG.IMAG E_BOX_LEFT_BOTT OM.height),
border: 0
}));

var Td = new HTMLElement(HTM LElement.TD,{
bgColor: '#ffffff',
vAlign: 'top'
});

Tr.appendChild( Td);
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: CONFIG.IMAGE_BO X_RIGHT_CENTER. width,
height: Height-(CONFIG.IMAGE_B OX_RIGHT_TOP.he ight+CONFIG.IMA GE_BOX_RIGHT_BO TTOM.height)
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_RIGHT_CENTER. src,
width: CONFIG.IMAGE_BO X_RIGHT_CENTER. width,
height: Height-(CONFIG.IMAGE_B OX_RIGHT_TOP.he ight+CONFIG.IMA GE_BOX_RIGHT_BO TTOM.height),
border: 0
}));
Table.appendChi ld(Tr);

var Tr = new HTMLElement(HTM LElement.TR,{}) ;
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: CONFIG.IMAGE_BO X_LEFT_BOTTOM.w idth,
height: CONFIG.IMAGE_BO X_LEFT_BOTTOM.h eight
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_LEFT_BOTTOM.s rc,
width: CONFIG.IMAGE_BO X_LEFT_BOTTOM.w idth,
height: CONFIG.IMAGE_BO X_LEFT_BOTTOM.h eight,
border: 0
}));
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: (Width-(CONFIG.IMAGE_B OX_LEFT_BOTTOM. width+CONFIG.IM AGE_BOX_RIGHT_B OTTOM.width)),
height: CONFIG.IMAGE_BO X_CENTER_BOTTOM .height
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_CENTER_BOTTOM .src,
width: (Width-(CONFIG.IMAGE_B OX_LEFT_BOTTOM. width+CONFIG.IM AGE_BOX_RIGHT_B OTTOM.width)),
height: CONFIG.IMAGE_BO X_CENTER_BOTTOM .height,
border: 0
}));
Tr.appendChild( new HTMLElement(HTM LElement.TD,{
width: CONFIG.IMAGE_BO X_RIGHT_BOTTOM. width,
height: CONFIG.IMAGE_BO X_RIGHT_BOTTOM. width
})).appendChild (new HTMLElement(HTM LElement.IMG,{
src: CONFIG.IMAGE_BO X_RIGHT_BOTTOM. src,
width: CONFIG.IMAGE_BO X_RIGHT_BOTTOM. width,
height: CONFIG.IMAGE_BO X_RIGHT_BOTTOM. width,
border: 0
}));
Table.appendChi ld(Tr);
Div.appendChild (Table);

return new HTMLElement.Box Object(Div, Td);
}

HTMLElement.Box Object = function(Box,Bo xContent)
{
this.Box = Box;
this.BoxContent = BoxContent;
}

HTMLElement.Fin dPosition = function(Object )
{
if('undefined' != typeof(Object.o ffsetParent))
{
for(var posX=0,posY=0;O bject;Object=Ob ject.offsetPare nt)
{
posX += Object.offsetLe ft;
posY += Object.offsetTo p;
}
return [posX,posY];
}
else
{
return [Object.x,Object .y];
}
}
[/code]

Then use (to run):
[code=javascript]
window.onload = function(){
document.getEle mentById('test' ).appendChild(n ew HTMLElement.Dro pdown('testSpan ',{
onChange:functi on(aa){
alert(aa.select edIndex);
},
Options:[
new HTMLElement.Opt ion('Veeeeeeeee eery Veeeeeeeeeeery long text', 'Value3'),
new HTMLElement.Opt ion('Option2', 'Value2'),
new HTMLElement.Opt ion('Veeeeeeeee eery Veeeeeeeeeeery long text', 'Value3'),
new HTMLElement.Opt ion('Option1', 'Value1'),
new HTMLElement.Opt ion('Option2', 'Value2'),
new HTMLElement.Opt ion('Veeeeeeeee eery Veeeeeeeeeeery long text', 'Value3'),
new HTMLElement.Opt ion('Option1', 'Value1'),
new HTMLElement.Opt ion('Option2', 'Value2'),
new HTMLElement.Opt ion('Veeeeeeeee eery Veeeeeeeeeeery long text', 'Value3'),
new HTMLElement.Opt ion('Option1', 'Value1'),
new HTMLElement.Opt ion('Option2', 'Value2'),
new HTMLElement.Opt ion('Veeeeeeeee eery Veeeeeeeeeeery long text', 'Value3'),
new HTMLElement.Opt ion('Option1', 'Value1'),
new HTMLElement.Opt ion('Option2', 'Value2'),
new HTMLElement.Opt ion('Veeeeeeeee eery Veeeeeeeeeeery long text', 'Value3')
]
}));
}
[/code]

[gits]

so, when i understand that right you are saying that in your first snippet's line 156

[CODE=javascript]BodyDiv.innerHT ML = Div.innerHTML;
[/CODE]
does work but:

[CODE=javascript]BodyDiv.appendC hild(Div);
[/CODE]
does not?

are all IE versions affected from this or just specific ones? so that i could test on the IE in question?

kind regards

[Canabeez]

Yeah, you understand right, but only in IE. I've only tested it on IE7 under Vista...

[gits]

hmmmm ... didn't find an IE7 right now to work with :) ... need to try to install one in wine the next time or is the problem solved already?

kind regards

[Canabeez]

thanks for the reply, nope, it's not solved... btw... i don't think you have IE7 for wine, the only one i could find is IE6 and yet it's all buggy...

[gits]

hmmm ... let's see :) ... otherwise i will use a vm to install a windows copy ... #°'&% IE is always a problem :) ... thanks god that i don't need to have to use it that much ... may be the problem occurs in IE6 too? i might use IEs4Linux then, tomorrow evening i should find some time for it :)

kind regards

[Canabeez]

thanks man,

yeah ie6 too, but i've tested it under wine-ie6...