Adding dynamic DIVs into an existing DIV

[useenu]

Hi all,
I am new to this forum and javascript. I am developing a progress bar in javascript. For that I planned to have series of small DIVs in a big DIV. I have written a below function.It is working in IE, but not in Firefox.

function createDiv(leftPx, topPx, widthPx, heightPx, divColor)
{
    dv = document.createElement('div');
    dv.style.position="absolute";       
    dv.style.pixelLeft=leftPx;
    dv.style.pixelTop=topPx;
    dv.style.pixelWidth=widthPx;
    dv.style.pixelHeight=heightPx;
    dv.style.backgroundColor=divColor;
    dv.innerHTML='|';
    parentDiv.appendChild(dv); // parentDiv = ID of bigger DIV defined in HTML 
}
 

I set a for loop to contineously change the leftPos and call the above function.

1. In IE, the progress bar is dislayed correctly. But in Firefox, individual DIVs are overwritten in the first place. The position of parent DIV is "relative".

2. I am not able to see individual DIVs, if dv.innerHTML='|'; line is commented. Is there any way to get the output without that?

I will appriciate if anyone helps me.

Thanks in advance.
Srini

[pronerd]

1. In IE, the progress bar is dislayed correctly. But in Firefox, individual DIVs are overwritten in the first place. The position of parent DIV is "relative".

The pixelLeft, pixelTop, pixelWidth, and pixelHeight are not valid attributes in the Mozilla or the W3C DOM's
http://developer.mozilla.org/en/docs/DOM:CSS

2. I am not able to see individual DIVs, if dv.innerHTML='|'; line is commented. Is there any way to get the output without that?

Both Firefox and IE will at times not render empty layers or table cells. Insert " " instead of "|". It will keep the layer from being empty, and will be rendered as a blank space.

[useenu]

The pixelLeft, pixelTop, pixelWidth, and pixelHeight are not valid attributes in the Mozilla or the W3C DOM's
http://developer.mozilla.org/en/docs/DOM:CSS





Both Firefox and IE will at times not render empty layers or table cells. Insert " " instead of "|". It will keep the layer from being empty, and will be rendered as a blank space.

Thanks a lot. Now its working. But there is some height variation in displaying the DIVs with text(&nbsp or |). IE displays some of the content outside the main div.I am trying to resolve it. The link you have provided is very useful one.

[pronerd]

IE displays some of the content outside the main div.I am trying to resolve it.

That is because the position attribute is set to "absolute", and you have a fixed width value set. With the absolute value set the layer will only be as wide as it is defined regardless of the length of the content.