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:

/**
 *
 *  Filename: ESCMS_HTMLElement.js
 *  Library:  ESCMS HTMLElement
 *  Version:  1.0.0
 *    
 *  Coder:    Even Simon <[e-mail]>
 *  Support:  http://www.evensimon.com/ESCMS-HTMLElement/
 *
 */
 
function HTMLElement(aElement, Params)
{
    var aElement = document.createElement(aElement);
    for(var i in Params) aElement[i] = Params[i];
    return aElement;
}
 
/* Configuration Class */
HTMLElement.Config = function()
{
    this.FOLDER_IMAGES = 'images/';
 
    /* Box */
    this.FOLDER_BOX = this.FOLDER_IMAGES + '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_DROPDOWN = this.FOLDER_IMAGES + 'Dropdown/';
    this.IMAGE_DROPDOWN_ARROW = {
        src:      this.FOLDER_DROPDOWN + 'd.png',
        width:  15,
        height: 15
    };
}
 
HTMLElement.getElementById = function(Id)
{
    return ('undefined' != typeof(HTMLElement.Objects[Id]))?HTMLElement.Objects[Id]:null;
}
 
HTMLElement.AddObject = function(Id,Object)
{
    HTMLElement.Objects[Id] = Object;
}
 
HTMLElement.Option = function(Text,Value)
{
    this.text = Text;
    this.value = Value;
}
 
HTMLElement.ISIE    = document.all?true:false;
HTMLElement.Objects = new Array();
HTMLElement.DIV     = "DIV";
HTMLElement.SPAN    = "SPAN";
HTMLElement.A       = "A";
HTMLElement.SELECT  = "SELECT";
HTMLElement.OPTION  = "OPTION"; 
HTMLElement.BUTTON  = "BUTTON";
HTMLElement.TEXT    = "TEXT";
HTMLElement.SCRIPT  = "SCRIPT";
HTMLElement.TABLE   = "TABLE";
HTMLElement.TR      = "TR";
HTMLElement.TD      = "TD";
HTMLElement.IMG     = "IMG";
HTMLElement.BR      = "BR";
 
/* Dropdown Class */
HTMLElement.Dropdown = function(Id,Params)
{
    /* Variables */
    this.Id = Id;
    this.selectedIndex = 0;
    this.IsMenuOpen = false;
 
    /* Functions */
    this.Draw = function()
    {
        var Span = new HTMLElement(HTMLElement.SPAN,{
            className: 'ESCMS_Dropdown ESCMS_Dropdown_Font ESCMS_Dropdown_Size',
            id:        this.Id,
            onclick:   function()
            {
                var Object = HTMLElement.Objects[this.id];
                if(!Object.IsMenuOpen){Object.Show();}
                else{Object.Hide();}
            }
        });
        return Span;
    }
 
    this.Show = function()
    {
        var Width = this.Span.offsetWidth;
            Width = Width<200?200:Width+8;
        var Height = 200;
 
        var BoxObject = new HTMLElement.Box(Width,Height);
        var Box = BoxObject.Box;
        var BoxContent = BoxObject.BoxContent;
 
        BoxContent.appendChild(this.GetOptions(Width-19,Height-19));
 
        var BoxPosition = HTMLElement.FindPosition(this.Span);
        BoxPosition[0] = BoxPosition[0] - 2;
        BoxPosition[1] = BoxPosition[1] + this.Span.offsetHeight - 3;
 
        if(HTMLElement.ISIE)
        {
            var Div = new HTMLElement(HTMLElement.Div,{}).appendChild(Box);
            var BodyDiv = new HTMLElement(HTMLElement.Div,{});
            document.body.appendChild(BodyDiv);
            BodyDiv.style.left = BoxPosition[0];
            BodyDiv.style.top = BoxPosition[1];
            BodyDiv.style.position = 'absolute';
            BodyDiv.innerHTML = Div.innerHTML;
            this.Menu = BodyDiv;
        }
        else
        {
            Box.style.left = BoxPosition[0];
            Box.style.top = BoxPosition[1];
            Box.className = 'ESCMS_Dropdown';
            document.body.appendChild(Box);
            this.Menu = Box;
        }
 
        this.IsMenuOpen = true;
    }
 
    this.Hide = function()
    {
        if(this.IsMenuOpen)
        {
            document.body.removeChild(this.Menu);
            this.IsMenuOpen = false;
        }
    }
 
    this.GetOptions = function(Width, Height)
    {
        var Div = new HTMLElement(HTMLElement.DIV,{
            className:'ESCMS_Dropdown_Select ESCMS_Dropdown_Font ESCMS_Dropdown_Size'
        });
        Div.style.width = Width;
        Div.style.height = Height;
        for(var i=0;i<this.Options.length;i++)
        {
            Div.appendChild(new HTMLElement(HTMLElement.ISIE?HTMLElement.A:HTMLElement.DIV,{
                href:        'javascript:'+(HTMLElement.ISIE?'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.Objects[this.id].Select(this.name);
                },
                onmouseover: function(){if(!HTMLElement.ISIE){this.className = 'ESCMS_Dropdown_A_HOVER';}},
                onmouseout:  function(){if(!HTMLElement.ISIE){this.className = 'ESCMS_Dropdown_A';}}
            }));
        }
        return Div;
    }
 
    this.SetSpanValue = function(Value)
    {
        var CONFIG = new HTMLElement.Config;
        this.Span.innerHTML = Value;
        this.Span.appendChild(new HTMLElement(HTMLElement.IMG,{
            src:    CONFIG.IMAGE_DROPDOWN_ARROW.src,
            width:  CONFIG.IMAGE_DROPDOWN_ARROW.width,
            height: CONFIG.IMAGE_DROPDOWN_ARROW.height,
            align:  'absmiddle'
        }));
    }
 
    this.Select = function(selectedIndex)
    {
        this.SetSpanValue(this.Options[selectedIndex].text);
        this.selectedIndex = selectedIndex;
        this.value = this.Options[selectedIndex].value;
        this.text = this.Options[selectedIndex].text;
        this.Hide();
        if(this.onChange){this.onChange(this);}
    }
 
    /* Read params */
    if(Params.Options)
    {
        this.Options = Params.Options;
    }
    if(Params.onChange)
    {
        this.onChange = Params.onChange;
    }
    else{throw 'Cannot create empty Dropdown';}
 
    this.Span = this.Draw();
    this.SetSpanValue(this.Options[0].text);
 
    HTMLElement.AddObject(Id,this);
 
    return this.Span;
}
 
/* Box Class */
HTMLElement.Box = function(Width, Height)
{
    var CONFIG = new HTMLElement.Config;
    var Div = new HTMLElement(HTMLElement.DIV,{
        width:     Width,
        height:    Height
    });
 
    Div.style.width = Width;
    Div.style.height = Height;
 
    var Table = new HTMLElement(HTMLElement.TABLE,{
        cellPadding: 0,
        cellSpacing: 0,
        border:      0,
        width:       Width,
        height:      Height
    });
 
    var Tr = new HTMLElement(HTMLElement.TR,{});
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  CONFIG.IMAGE_BOX_LEFT_TOP.width,
        height: CONFIG.IMAGE_BOX_LEFT_TOP.height
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_LEFT_TOP.src,
        width:  CONFIG.IMAGE_BOX_LEFT_TOP.width,
        height: CONFIG.IMAGE_BOX_LEFT_TOP.height,
        border: 0
    }));
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  (Width-(CONFIG.IMAGE_BOX_LEFT_TOP.width+CONFIG.IMAGE_BOX_RIGHT_TOP.width)),
        height: CONFIG.IMAGE_BOX_CENTER_TOP.height
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_CENTER_TOP.src,
        width:  (Width-(CONFIG.IMAGE_BOX_LEFT_TOP.width+CONFIG.IMAGE_BOX_RIGHT_TOP.width)),
        height: CONFIG.IMAGE_BOX_CENTER_TOP.height,
        border: 0
    }));
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  CONFIG.IMAGE_BOX_RIGHT_TOP.width,
        height: CONFIG.IMAGE_BOX_RIGHT_TOP.height
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_RIGHT_TOP.src,
        width:  CONFIG.IMAGE_BOX_RIGHT_TOP.width,
        height: CONFIG.IMAGE_BOX_RIGHT_TOP.height,
        border: 0
    }));
    Table.appendChild(Tr);
 
    var Tr = new HTMLElement(HTMLElement.TR,{});
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  CONFIG.IMAGE_BOX_LEFT_CENTER.width,
        height: Height-(CONFIG.IMAGE_BOX_LEFT_TOP.height+CONFIG.IMAGE_BOX_LEFT_BOTTOM.height)
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_LEFT_CENTER.src,
        width:  CONFIG.IMAGE_BOX_LEFT_CENTER.width,
        height: Height-(CONFIG.IMAGE_BOX_LEFT_TOP.height+CONFIG.IMAGE_BOX_LEFT_BOTTOM.height),
        border: 0
    }));
 
    var Td = new HTMLElement(HTMLElement.TD,{
        bgColor: '#ffffff',
        vAlign:  'top'
    });
 
    Tr.appendChild(Td);
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  CONFIG.IMAGE_BOX_RIGHT_CENTER.width,
        height: Height-(CONFIG.IMAGE_BOX_RIGHT_TOP.height+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.height)
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_RIGHT_CENTER.src,
        width:  CONFIG.IMAGE_BOX_RIGHT_CENTER.width,
        height: Height-(CONFIG.IMAGE_BOX_RIGHT_TOP.height+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.height),
        border: 0
    }));
    Table.appendChild(Tr);
 
    var Tr = new HTMLElement(HTMLElement.TR,{});
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  CONFIG.IMAGE_BOX_LEFT_BOTTOM.width,
        height: CONFIG.IMAGE_BOX_LEFT_BOTTOM.height
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_LEFT_BOTTOM.src,
        width:  CONFIG.IMAGE_BOX_LEFT_BOTTOM.width,
        height: CONFIG.IMAGE_BOX_LEFT_BOTTOM.height,
        border: 0
    }));
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  (Width-(CONFIG.IMAGE_BOX_LEFT_BOTTOM.width+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width)),
        height: CONFIG.IMAGE_BOX_CENTER_BOTTOM.height
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_CENTER_BOTTOM.src,
        width:  (Width-(CONFIG.IMAGE_BOX_LEFT_BOTTOM.width+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width)),
        height: CONFIG.IMAGE_BOX_CENTER_BOTTOM.height,
        border: 0
    }));
    Tr.appendChild(new HTMLElement(HTMLElement.TD,{
        width:  CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width,
        height: CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width
    })).appendChild(new HTMLElement(HTMLElement.IMG,{
        src:    CONFIG.IMAGE_BOX_RIGHT_BOTTOM.src,
        width:  CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width,
        height: CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width,
        border: 0
    }));
    Table.appendChild(Tr);
    Div.appendChild(Table);
 
    return new HTMLElement.BoxObject(Div, Td);
}
 
HTMLElement.BoxObject = function(Box,BoxContent)
{
    this.Box = Box;
    this.BoxContent = BoxContent;
}
 
HTMLElement.FindPosition = function(Object)
{
    if('undefined' != typeof(Object.offsetParent))
    {
        for(var posX=0,posY=0;Object;Object=Object.offsetParent)
        {
            posX += Object.offsetLeft;
            posY += Object.offsetTop;
        }
        return [posX,posY];
    }
    else
    {
        return [Object.x,Object.y];
    }
}
 

Then use (to run):

window.onload = function(){
    document.getElementById('test').appendChild(new HTMLElement.Dropdown('testSpan',{
                onChange:function(aa){
                    alert(aa.selectedIndex);
                },
                Options:[
                    new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
                    new HTMLElement.Option('Option2', 'Value2'),
                    new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
                    new HTMLElement.Option('Option1', 'Value1'),
                    new HTMLElement.Option('Option2', 'Value2'),
                    new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
                    new HTMLElement.Option('Option1', 'Value1'),
                    new HTMLElement.Option('Option2', 'Value2'),
                    new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
                    new HTMLElement.Option('Option1', 'Value1'),
                    new HTMLElement.Option('Option2', 'Value2'),
                    new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
                    new HTMLElement.Option('Option1', 'Value1'),
                    new HTMLElement.Option('Option2', 'Value2'),
                    new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3')
                ]
            }));
}
 

[gits]

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

BodyDiv.innerHTML = Div.innerHTML;
 

does work but:

BodyDiv.appendChild(Div);
 

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...