By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,034 Members | 971 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,034 IT Pros & Developers. It's quick & easy.

IE Div appendChild problem

Canabeez
100+
P: 126
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?
Jul 22 '09 #1
Share this Question
Share on Google+
8 Replies


hsriat
Expert 100+
P: 1,654
There must be some problem elsewhere in the code. If you can post it here, that would be helpful.
Jul 22 '09 #2

Canabeez
100+
P: 126
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:
Expand|Select|Wrap|Line Numbers
  1. /**
  2.  *
  3.  *  Filename: ESCMS_HTMLElement.js
  4.  *  Library:  ESCMS HTMLElement
  5.  *  Version:  1.0.0
  6.  *    
  7.  *  Coder:    Even Simon <even.simon@gmail.com>
  8.  *  Support:  http://www.evensimon.com/ESCMS-HTMLElement/
  9.  *
  10.  */
  11.  
  12. function HTMLElement(aElement, Params)
  13. {
  14.     var aElement = document.createElement(aElement);
  15.     for(var i in Params) aElement[i] = Params[i];
  16.     return aElement;
  17. }
  18.  
  19. /* Configuration Class */
  20. HTMLElement.Config = function()
  21. {
  22.     this.FOLDER_IMAGES = 'images/';
  23.  
  24.     /* Box */
  25.     this.FOLDER_BOX = this.FOLDER_IMAGES + 'Box/';
  26.     this.IMAGE_BOX_LEFT_TOP = {
  27.         src:    this.FOLDER_BOX + 'lt.png',
  28.         width:  9,
  29.         height: 9
  30.     };
  31.     this.IMAGE_BOX_RIGHT_TOP = {
  32.         src:    this.FOLDER_BOX + 'rt.png',
  33.         width:  10,
  34.         height: 9
  35.     };
  36.     this.IMAGE_BOX_CENTER_TOP = {
  37.         src:    this.FOLDER_BOX + 'ct.png',
  38.         width:  1,
  39.         height: 9
  40.     };
  41.     this.IMAGE_BOX_LEFT_CENTER = {
  42.         src:    this.FOLDER_BOX + 'lc.png',
  43.         width:  9,
  44.         height: 1
  45.     };
  46.     this.IMAGE_BOX_RIGHT_CENTER = {
  47.         src:    this.FOLDER_BOX + 'rc.png',
  48.         width:  10,
  49.         height: 1
  50.     };
  51.     this.IMAGE_BOX_LEFT_BOTTOM = {
  52.         src:    this.FOLDER_BOX + 'lb.png',
  53.         width:  9,
  54.         height: 10
  55.     };
  56.     this.IMAGE_BOX_CENTER_BOTTOM = {
  57.         src:    this.FOLDER_BOX + 'cb.png',
  58.         width:  1,
  59.         height: 10
  60.     };
  61.     this.IMAGE_BOX_RIGHT_BOTTOM = {
  62.         src:    this.FOLDER_BOX + 'rb.png',
  63.         width:  10,
  64.         height: 10
  65.     };
  66.  
  67.     /* Dropdown */
  68.     this.FOLDER_DROPDOWN = this.FOLDER_IMAGES + 'Dropdown/';
  69.     this.IMAGE_DROPDOWN_ARROW = {
  70.         src:      this.FOLDER_DROPDOWN + 'd.png',
  71.         width:  15,
  72.         height: 15
  73.     };
  74. }
  75.  
  76. HTMLElement.getElementById = function(Id)
  77. {
  78.     return ('undefined' != typeof(HTMLElement.Objects[Id]))?HTMLElement.Objects[Id]:null;
  79. }
  80.  
  81. HTMLElement.AddObject = function(Id,Object)
  82. {
  83.     HTMLElement.Objects[Id] = Object;
  84. }
  85.  
  86. HTMLElement.Option = function(Text,Value)
  87. {
  88.     this.text = Text;
  89.     this.value = Value;
  90. }
  91.  
  92. HTMLElement.ISIE    = document.all?true:false;
  93. HTMLElement.Objects = new Array();
  94. HTMLElement.DIV     = "DIV";
  95. HTMLElement.SPAN    = "SPAN";
  96. HTMLElement.A       = "A";
  97. HTMLElement.SELECT  = "SELECT";
  98. HTMLElement.OPTION  = "OPTION"; 
  99. HTMLElement.BUTTON  = "BUTTON";
  100. HTMLElement.TEXT    = "TEXT";
  101. HTMLElement.SCRIPT  = "SCRIPT";
  102. HTMLElement.TABLE   = "TABLE";
  103. HTMLElement.TR      = "TR";
  104. HTMLElement.TD      = "TD";
  105. HTMLElement.IMG     = "IMG";
  106. HTMLElement.BR      = "BR";
  107.  
  108. /* Dropdown Class */
  109. HTMLElement.Dropdown = function(Id,Params)
  110. {
  111.     /* Variables */
  112.     this.Id = Id;
  113.     this.selectedIndex = 0;
  114.     this.IsMenuOpen = false;
  115.  
  116.     /* Functions */
  117.     this.Draw = function()
  118.     {
  119.         var Span = new HTMLElement(HTMLElement.SPAN,{
  120.             className: 'ESCMS_Dropdown ESCMS_Dropdown_Font ESCMS_Dropdown_Size',
  121.             id:        this.Id,
  122.             onclick:   function()
  123.             {
  124.                 var Object = HTMLElement.Objects[this.id];
  125.                 if(!Object.IsMenuOpen){Object.Show();}
  126.                 else{Object.Hide();}
  127.             }
  128.         });
  129.         return Span;
  130.     }
  131.  
  132.     this.Show = function()
  133.     {
  134.         var Width = this.Span.offsetWidth;
  135.             Width = Width<200?200:Width+8;
  136.         var Height = 200;
  137.  
  138.         var BoxObject = new HTMLElement.Box(Width,Height);
  139.         var Box = BoxObject.Box;
  140.         var BoxContent = BoxObject.BoxContent;
  141.  
  142.         BoxContent.appendChild(this.GetOptions(Width-19,Height-19));
  143.  
  144.         var BoxPosition = HTMLElement.FindPosition(this.Span);
  145.         BoxPosition[0] = BoxPosition[0] - 2;
  146.         BoxPosition[1] = BoxPosition[1] + this.Span.offsetHeight - 3;
  147.  
  148.         if(HTMLElement.ISIE)
  149.         {
  150.             var Div = new HTMLElement(HTMLElement.Div,{}).appendChild(Box);
  151.             var BodyDiv = new HTMLElement(HTMLElement.Div,{});
  152.             document.body.appendChild(BodyDiv);
  153.             BodyDiv.style.left = BoxPosition[0];
  154.             BodyDiv.style.top = BoxPosition[1];
  155.             BodyDiv.style.position = 'absolute';
  156.             BodyDiv.innerHTML = Div.innerHTML;
  157.             this.Menu = BodyDiv;
  158.         }
  159.         else
  160.         {
  161.             Box.style.left = BoxPosition[0];
  162.             Box.style.top = BoxPosition[1];
  163.             Box.className = 'ESCMS_Dropdown';
  164.             document.body.appendChild(Box);
  165.             this.Menu = Box;
  166.         }
  167.  
  168.         this.IsMenuOpen = true;
  169.     }
  170.  
  171.     this.Hide = function()
  172.     {
  173.         if(this.IsMenuOpen)
  174.         {
  175.             document.body.removeChild(this.Menu);
  176.             this.IsMenuOpen = false;
  177.         }
  178.     }
  179.  
  180.     this.GetOptions = function(Width, Height)
  181.     {
  182.         var Div = new HTMLElement(HTMLElement.DIV,{
  183.             className:'ESCMS_Dropdown_Select ESCMS_Dropdown_Font ESCMS_Dropdown_Size'
  184.         });
  185.         Div.style.width = Width;
  186.         Div.style.height = Height;
  187.         for(var i=0;i<this.Options.length;i++)
  188.         {
  189.             Div.appendChild(new HTMLElement(HTMLElement.ISIE?HTMLElement.A:HTMLElement.DIV,{
  190.                 href:        'javascript:'+(HTMLElement.ISIE?'HTMLElement.Objects["'+this.Id+'"].Select('+i+')':'void(0)')+';',
  191.                 className:   'ESCMS_Dropdown_A',
  192.                 id:          this.Id,
  193.                 name:        i,
  194.                 innerHTML:   this.Options[i].text,
  195.                 onclick:     function()
  196.                 {
  197.                     HTMLElement.Objects[this.id].Select(this.name);
  198.                 },
  199.                 onmouseover: function(){if(!HTMLElement.ISIE){this.className = 'ESCMS_Dropdown_A_HOVER';}},
  200.                 onmouseout:  function(){if(!HTMLElement.ISIE){this.className = 'ESCMS_Dropdown_A';}}
  201.             }));
  202.         }
  203.         return Div;
  204.     }
  205.  
  206.     this.SetSpanValue = function(Value)
  207.     {
  208.         var CONFIG = new HTMLElement.Config;
  209.         this.Span.innerHTML = Value;
  210.         this.Span.appendChild(new HTMLElement(HTMLElement.IMG,{
  211.             src:    CONFIG.IMAGE_DROPDOWN_ARROW.src,
  212.             width:  CONFIG.IMAGE_DROPDOWN_ARROW.width,
  213.             height: CONFIG.IMAGE_DROPDOWN_ARROW.height,
  214.             align:  'absmiddle'
  215.         }));
  216.     }
  217.  
  218.     this.Select = function(selectedIndex)
  219.     {
  220.         this.SetSpanValue(this.Options[selectedIndex].text);
  221.         this.selectedIndex = selectedIndex;
  222.         this.value = this.Options[selectedIndex].value;
  223.         this.text = this.Options[selectedIndex].text;
  224.         this.Hide();
  225.         if(this.onChange){this.onChange(this);}
  226.     }
  227.  
  228.     /* Read params */
  229.     if(Params.Options)
  230.     {
  231.         this.Options = Params.Options;
  232.     }
  233.     if(Params.onChange)
  234.     {
  235.         this.onChange = Params.onChange;
  236.     }
  237.     else{throw 'Cannot create empty Dropdown';}
  238.  
  239.     this.Span = this.Draw();
  240.     this.SetSpanValue(this.Options[0].text);
  241.  
  242.     HTMLElement.AddObject(Id,this);
  243.  
  244.     return this.Span;
  245. }
  246.  
  247. /* Box Class */
  248. HTMLElement.Box = function(Width, Height)
  249. {
  250.     var CONFIG = new HTMLElement.Config;
  251.     var Div = new HTMLElement(HTMLElement.DIV,{
  252.         width:     Width,
  253.         height:    Height
  254.     });
  255.  
  256.     Div.style.width = Width;
  257.     Div.style.height = Height;
  258.  
  259.     var Table = new HTMLElement(HTMLElement.TABLE,{
  260.         cellPadding: 0,
  261.         cellSpacing: 0,
  262.         border:      0,
  263.         width:       Width,
  264.         height:      Height
  265.     });
  266.  
  267.     var Tr = new HTMLElement(HTMLElement.TR,{});
  268.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  269.         width:  CONFIG.IMAGE_BOX_LEFT_TOP.width,
  270.         height: CONFIG.IMAGE_BOX_LEFT_TOP.height
  271.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  272.         src:    CONFIG.IMAGE_BOX_LEFT_TOP.src,
  273.         width:  CONFIG.IMAGE_BOX_LEFT_TOP.width,
  274.         height: CONFIG.IMAGE_BOX_LEFT_TOP.height,
  275.         border: 0
  276.     }));
  277.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  278.         width:  (Width-(CONFIG.IMAGE_BOX_LEFT_TOP.width+CONFIG.IMAGE_BOX_RIGHT_TOP.width)),
  279.         height: CONFIG.IMAGE_BOX_CENTER_TOP.height
  280.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  281.         src:    CONFIG.IMAGE_BOX_CENTER_TOP.src,
  282.         width:  (Width-(CONFIG.IMAGE_BOX_LEFT_TOP.width+CONFIG.IMAGE_BOX_RIGHT_TOP.width)),
  283.         height: CONFIG.IMAGE_BOX_CENTER_TOP.height,
  284.         border: 0
  285.     }));
  286.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  287.         width:  CONFIG.IMAGE_BOX_RIGHT_TOP.width,
  288.         height: CONFIG.IMAGE_BOX_RIGHT_TOP.height
  289.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  290.         src:    CONFIG.IMAGE_BOX_RIGHT_TOP.src,
  291.         width:  CONFIG.IMAGE_BOX_RIGHT_TOP.width,
  292.         height: CONFIG.IMAGE_BOX_RIGHT_TOP.height,
  293.         border: 0
  294.     }));
  295.     Table.appendChild(Tr);
  296.  
  297.     var Tr = new HTMLElement(HTMLElement.TR,{});
  298.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  299.         width:  CONFIG.IMAGE_BOX_LEFT_CENTER.width,
  300.         height: Height-(CONFIG.IMAGE_BOX_LEFT_TOP.height+CONFIG.IMAGE_BOX_LEFT_BOTTOM.height)
  301.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  302.         src:    CONFIG.IMAGE_BOX_LEFT_CENTER.src,
  303.         width:  CONFIG.IMAGE_BOX_LEFT_CENTER.width,
  304.         height: Height-(CONFIG.IMAGE_BOX_LEFT_TOP.height+CONFIG.IMAGE_BOX_LEFT_BOTTOM.height),
  305.         border: 0
  306.     }));
  307.  
  308.     var Td = new HTMLElement(HTMLElement.TD,{
  309.         bgColor: '#ffffff',
  310.         vAlign:  'top'
  311.     });
  312.  
  313.     Tr.appendChild(Td);
  314.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  315.         width:  CONFIG.IMAGE_BOX_RIGHT_CENTER.width,
  316.         height: Height-(CONFIG.IMAGE_BOX_RIGHT_TOP.height+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.height)
  317.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  318.         src:    CONFIG.IMAGE_BOX_RIGHT_CENTER.src,
  319.         width:  CONFIG.IMAGE_BOX_RIGHT_CENTER.width,
  320.         height: Height-(CONFIG.IMAGE_BOX_RIGHT_TOP.height+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.height),
  321.         border: 0
  322.     }));
  323.     Table.appendChild(Tr);
  324.  
  325.     var Tr = new HTMLElement(HTMLElement.TR,{});
  326.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  327.         width:  CONFIG.IMAGE_BOX_LEFT_BOTTOM.width,
  328.         height: CONFIG.IMAGE_BOX_LEFT_BOTTOM.height
  329.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  330.         src:    CONFIG.IMAGE_BOX_LEFT_BOTTOM.src,
  331.         width:  CONFIG.IMAGE_BOX_LEFT_BOTTOM.width,
  332.         height: CONFIG.IMAGE_BOX_LEFT_BOTTOM.height,
  333.         border: 0
  334.     }));
  335.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  336.         width:  (Width-(CONFIG.IMAGE_BOX_LEFT_BOTTOM.width+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width)),
  337.         height: CONFIG.IMAGE_BOX_CENTER_BOTTOM.height
  338.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  339.         src:    CONFIG.IMAGE_BOX_CENTER_BOTTOM.src,
  340.         width:  (Width-(CONFIG.IMAGE_BOX_LEFT_BOTTOM.width+CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width)),
  341.         height: CONFIG.IMAGE_BOX_CENTER_BOTTOM.height,
  342.         border: 0
  343.     }));
  344.     Tr.appendChild(new HTMLElement(HTMLElement.TD,{
  345.         width:  CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width,
  346.         height: CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width
  347.     })).appendChild(new HTMLElement(HTMLElement.IMG,{
  348.         src:    CONFIG.IMAGE_BOX_RIGHT_BOTTOM.src,
  349.         width:  CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width,
  350.         height: CONFIG.IMAGE_BOX_RIGHT_BOTTOM.width,
  351.         border: 0
  352.     }));
  353.     Table.appendChild(Tr);
  354.     Div.appendChild(Table);
  355.  
  356.     return new HTMLElement.BoxObject(Div, Td);
  357. }
  358.  
  359. HTMLElement.BoxObject = function(Box,BoxContent)
  360. {
  361.     this.Box = Box;
  362.     this.BoxContent = BoxContent;
  363. }
  364.  
  365. HTMLElement.FindPosition = function(Object)
  366. {
  367.     if('undefined' != typeof(Object.offsetParent))
  368.     {
  369.         for(var posX=0,posY=0;Object;Object=Object.offsetParent)
  370.         {
  371.             posX += Object.offsetLeft;
  372.             posY += Object.offsetTop;
  373.         }
  374.         return [posX,posY];
  375.     }
  376.     else
  377.     {
  378.         return [Object.x,Object.y];
  379.     }
  380. }
  381.  
Then use (to run):
Expand|Select|Wrap|Line Numbers
  1. window.onload = function(){
  2.     document.getElementById('test').appendChild(new HTMLElement.Dropdown('testSpan',{
  3.                 onChange:function(aa){
  4.                     alert(aa.selectedIndex);
  5.                 },
  6.                 Options:[
  7.                     new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
  8.                     new HTMLElement.Option('Option2', 'Value2'),
  9.                     new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
  10.                     new HTMLElement.Option('Option1', 'Value1'),
  11.                     new HTMLElement.Option('Option2', 'Value2'),
  12.                     new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
  13.                     new HTMLElement.Option('Option1', 'Value1'),
  14.                     new HTMLElement.Option('Option2', 'Value2'),
  15.                     new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
  16.                     new HTMLElement.Option('Option1', 'Value1'),
  17.                     new HTMLElement.Option('Option2', 'Value2'),
  18.                     new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3'),
  19.                     new HTMLElement.Option('Option1', 'Value1'),
  20.                     new HTMLElement.Option('Option2', 'Value2'),
  21.                     new HTMLElement.Option('Veeeeeeeeeeery Veeeeeeeeeeery long text', 'Value3')
  22.                 ]
  23.             }));
  24. }
  25.  
Jul 22 '09 #3

gits
Expert Mod 5K+
P: 5,390
so, when i understand that right you are saying that in your first snippet's line 156

Expand|Select|Wrap|Line Numbers
  1. BodyDiv.innerHTML = Div.innerHTML;
  2.  
does work but:

Expand|Select|Wrap|Line Numbers
  1. BodyDiv.appendChild(Div);
  2.  
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
Jul 24 '09 #4

Canabeez
100+
P: 126
Yeah, you understand right, but only in IE. I've only tested it on IE7 under Vista...
Jul 24 '09 #5

gits
Expert Mod 5K+
P: 5,390
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
Aug 6 '09 #6

Canabeez
100+
P: 126
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...
Aug 6 '09 #7

gits
Expert Mod 5K+
P: 5,390
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
Aug 6 '09 #8

Canabeez
100+
P: 126
thanks man,

yeah ie6 too, but i've tested it under wine-ie6...
Aug 6 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.