inserting image into table cell using dom distorting

I'm using the following code to create a small table with one column and
two rows. An image goes into the first cell.

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";

// create tbody
var b = document.createElement("b");

// add row
var r = document.createElement("TR");
// add cell
var c = document.createElement("TD");
c.setAttribute("height","200");
// put image into cell
var i = document.createElement("IMG");
i.setAttribute("src","pics/one.png");
c.appendChild(i);
r.appendChild(c);
b.appendChild(r);

// add row
var r = document.createElement("TR");
// add cell
c = document.createElement("TD");
// put text into cell
var txt = document.createTextNode("desc of image one");
c.appendChild(txt);
r.appendChild(c);
b.appendChild(r);

// append to doc
t.appendChild(b);
document.body.appendChild(t);

This display fine (correctly?) in MZ but IE stretches the image to fit
the size of the cell. I'm actually picking the image dynamically so I
won't know it's size. Is there a way I can do this without the image
distorting?

Andrew Poulos

re: inserting image into table cell using dom distorting

Andrew Poulos wrote:[color=blue]
> I'm using the following code to create a small table with one column and
> two rows. An image goes into the first cell.
>
> //create table
> var t = document.createElement("TABLE");
> t.style.position = "absolute";
> t.style.left = "100px";
> t.style.top = "100px";
> t.style.width = "200px";
>
> // create tbody
> var b = document.createElement("b");[/color]

I think what you really want here is:

var b = document.createElement("tbody");

or do you really want to append your <TR> to a <B> element? :-)
[color=blue]
> // add row
> var r = document.createElement("TR");
> // add cell
> var c = document.createElement("TD");
> c.setAttribute("height","200");[/color]

c.style.height = "200";
[color=blue]
> // put image into cell
> var i = document.createElement("IMG");
> i.setAttribute("src","pics/one.png");
> c.appendChild(i);
> r.appendChild(c);
> b.appendChild(r);
>
> // add row
> var r = document.createElement("TR");
> // add cell
> c = document.createElement("TD");
> // put text into cell
> var txt = document.createTextNode("desc of image one");
> c.appendChild(txt);
> r.appendChild(c);
> b.appendChild(r);
>
> // append to doc
> t.appendChild(b);
> document.body.appendChild(t);[/color]

This will not work in Firefox or IE. Use:

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);
[color=blue]
>
> This display fine (correctly?) in MZ but IE stretches the image to fit
> the size of the cell. I'm actually picking the image dynamically so I
> won't know it's size. Is there a way I can do this without the image
> distorting?[/color]

For me, the image does not distort in either Firefox or IE. If the
image is bigger than the cell or row or table, the cell/row/table is
expanded to fit the image (though that can be overridden with the style
overflow attribute I guess).

Full code:

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "20px";
t.style.border = "1px solid red";

// create tbody
var b = document.createElement("tbody");
// create row
var r = document.createElement("TR");
// create cell
var c = document.createElement("TD");
c.style.height = "200";
c.style.border = "1px solid blue";
c.style.textAlign = "center";


// create image
var i = document.createElement("IMG");
i.src = "a.gif";
i.style.border = "1px solid pink";

// Append elements
c.appendChild(i); // add image to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// create another row
var r = document.createElement("TR");
// create another cell
c = document.createElement("TD");
c.style.border = "1px solid green";
c.style.textAlign = "center";
// create text node
var txt = document.createTextNode("desc of image one");
c.appendChild(txt); // add text to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// append to doc
t.appendChild(b);

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);





--
Rob

re: inserting image into table cell using dom distorting

RobG wrote:
[...][color=blue][color=green]
>> document.body.appendChild(t);[/color]
>
>
> This will not work in Firefox or IE. Use:[/color]

Oops, yes it does. However I think it's still better to use the method
I suggest below - any comments?
[color=blue]
>
> if (document.getElementsByTagName) {
> var docBody = document.getElementsByTagName("body")[0];
> } else if (document.all) {
> var docBody = document.all.tags("body")[0];
> }
>
> docBody.appendChild(t);[/color]


--
Rob

re: inserting image into table cell using dom distorting

[snip][color=blue]
>
> Full code:
>
> //create table
> var t = document.createElement("TABLE");
> t.style.position = "absolute";
> t.style.left = "100px";
> t.style.top = "100px";
> t.style.width = "200px";
> t.style.border = "1px solid red";
>
> // create tbody
> var b = document.createElement("tbody");[/color]

I could be wrong (it happened while I was editing something else and so
I haven't had a chance to test it fully) but if I leave off TBODY
creation the table doesn't get created in IE.
[color=blue]
> // create row
> var r = document.createElement("TR");
> // create cell
> var c = document.createElement("TD");
> c.style.height = "200";
> c.style.border = "1px solid blue";
> c.style.textAlign = "center";
>
>
> // create image
> var i = document.createElement("IMG");[/color]

So far all I've change is my line
i.setAttribute("src", "a.gif"); to match your next line and now the
image doesn't distort in IE.
[color=blue]
> i.src = "a.gif";
> i.style.border = "1px solid pink";
>
> // Append elements
> c.appendChild(i); // add image to cell
> r.appendChild(c); // add cell to row
> b.appendChild(r); // add row to tbody
>
> // create another row
> var r = document.createElement("TR");
> // create another cell
> c = document.createElement("TD");
> c.style.border = "1px solid green";
> c.style.textAlign = "center";
> // create text node
> var txt = document.createTextNode("desc of image one");
> c.appendChild(txt); // add text to cell
> r.appendChild(c); // add cell to row
> b.appendChild(r); // add row to tbody
>
> // append to doc
> t.appendChild(b);
>
> if (document.getElementsByTagName) {
> var docBody = document.getElementsByTagName("body")[0];
> } else if (document.all) {
> var docBody = document.all.tags("body")[0];
> }[/color]

I like the lesser amount of typing with document.body but I'll go back
to 'standards'.
[color=blue]
> docBody.appendChild(t);[/color]

Thanks, I'll let you know the noticeable difference the other changes make.

Andrew Poulos

re: inserting image into table cell using dom distorting

If I put the code into a loop to create 4 separate tables. In IE, the
first, second and fourth images are not distorted whereas the third
image is:

var numTables = 4;
for (var i = 0; i<numTables; i++) {[color=blue]
> //create table
> var t = document.createElement("TABLE");
> t.style.position = "absolute";[/color]
t.style.left = 100 + i*250 + "px";[color=blue]
> t.style.top = "100px";
> t.style.width = "200px";
> t.style.border = "1px solid red";
>
> // create tbody
> var b = document.createElement("tbody");
> // create row
> var r = document.createElement("TR");
> // create cell
> var c = document.createElement("TD");
> c.style.height = "200";
> c.style.border = "1px solid blue";
> c.style.textAlign = "center";
>
> // create image
> var i = document.createElement("IMG");
> i.src = "a.gif";
> i.style.border = "1px solid pink";
>
> // Append elements
> c.appendChild(i); // add image to cell
> r.appendChild(c); // add cell to row
> b.appendChild(r); // add row to tbody
>
> // create another row
> var r = document.createElement("TR");
> // create another cell
> c = document.createElement("TD");
> c.style.border = "1px solid green";
> c.style.textAlign = "center";
> // create text node
> var txt = document.createTextNode("desc of image one");
> c.appendChild(txt); // add text to cell
> r.appendChild(c); // add cell to row
> b.appendChild(r); // add row to tbody
>
> // append to doc
> t.appendChild(b);
>
> if (document.getElementsByTagName) {
> var docBody = document.getElementsByTagName("body")[0];
> } else if (document.all) {
> var docBody = document.all.tags("body")[0];
> }
>
> docBody.appendChild(t);[/color]
}

It's very strange. I've tried it using different images but it keeps
happening.

ANdrew Poulos

re: inserting image into table cell using dom distorting

Andrew Poulos wrote:[color=blue]
> If I put the code into a loop to create 4 separate tables. In IE, the
> first, second and fourth images are not distorted whereas the third
> image is:[/color]

It should only create one table and image:
[color=blue]
>
> var numTables = 4;
> for (var i = 0; i<numTables; i++) {[/color]

Here you initialise i as a counter for your for loop.
[color=blue]
>[color=green]
>> //create table
>> var t = document.createElement("TABLE");
>> t.style.position = "absolute";[/color]
>
> t.style.left = 100 + i*250 + "px";[/color]

And use it here for your buffer between tables (they will overlap if
the image is greater than 250px wide) - which is fine.

[...][color=blue][color=green]
>> // create image
>> var i = document.createElement("IMG");
>> i.src = "a.gif";
>> i.style.border = "1px solid pink";[/color][/color]

BUT... here you re-initialise i as an image element. I can't
understand how IE still only loops 4 times, Safari just barfed after
the first loop.

[...][color=blue][color=green]
>> if (document.getElementsByTagName) {
>> var docBody = document.getElementsByTagName("body")[0];
>> } else if (document.all) {
>> var docBody = document.all.tags("body")[0];
>> }[/color][/color]

I would put this before the for loop - you only need to find the body
reference once.



--
Rob

re: inserting image into table cell using dom distorting

RobG wrote:[color=blue]
> Andrew Poulos wrote:
>[color=green]
>> If I put the code into a loop to create 4 separate tables. In IE, the
>> first, second and fourth images are not distorted whereas the third
>> image is:[/color]
>
>
> It should only create one table and image:
>[color=green]
>>
>> var numTables = 4;
>> for (var i = 0; i<numTables; i++) {[/color]
>
> Here you initialise i as a counter for your for loop.
>[color=green][color=darkred]
>>> //create table
>>> var t = document.createElement("TABLE");
>>> t.style.position = "absolute";[/color]
>>
>> t.style.left = 100 + i*250 + "px";[/color]
>
> And use it here for your buffer between tables (they will overlap if
> the image is greater than 250px wide) - which is fine.
>
> [...]
>[color=green][color=darkred]
>>> // create image
>>> var i = document.createElement("IMG");
>>> i.src = "a.gif";[/color][/color][/color]

I moved the previous line to after
c.appendChild(myimg)
and now it seems to work correctly in IE.
[color=blue][color=green][color=darkred]
>>> i.style.border = "1px solid pink";[/color][/color]
>
> BUT... here you re-initialise i as an image element. I can't
> understand how IE still only loops 4 times, Safari just barfed after
> the first loop.
>
> [...][/color]

Dang I've been clumsy - it's now 'myimg'.[color=blue]
>[color=green][color=darkred]
>>> if (document.getElementsByTagName) {
>>> var docBody = document.getElementsByTagName("body")[0];
>>> } else if (document.all) {
>>> var docBody = document.all.tags("body")[0];
>>> }[/color][/color]
>
>
> I would put this before the for loop - you only need to find the body
> reference once.[/color]

Thanks, I've moved it out of the loop.

Though I've got it working now if I move the myimg.src line back to it's
original line position it also works but during testing, after I've run
the file a while, it fails. Once it fails if I move the line and test it
it works. Then if I move the line back it works for a short while again.

I guess this is why people love IE so much.

Andrew Poulos

re: inserting image into table cell using dom distorting

RobG wrote:[color=blue]
> Andrew Poulos wrote:[/color]
<snip>[color=blue][color=green]
>> document.body.appendChild(t);[/color]
>
> This will not work in Firefox or IE. Use:
>
> if (document.getElementsByTagName) {
> var docBody = document.getElementsByTagName("body")[0];
> } else if (document.all) {
> var docBody = document.all.tags("body")[0];
> }
>
> docBody.appendChild(t);[/color]
<snip>

The W3C HTML DOM specification defines a "body" property of the
HTMLDocument interface. Like all of the pre-existing features formalised
in the HTML DOM specification, it is very well supported (and obviously
completely 'standard' coding).

Indeed it can easily be argued that using - document.body - is superior
to - document.getElementsByTagName('body')[0] -. It is obviously less
involved to resolve a simple property accessor rather than property
reference, method call with DOM search, collection building and then
collection member referencing. Particularly as the W3C require the
nodeList object returned from getElementsByTagName to be 'live', making
a quite a complex object to be creating and then throwing away within a
single expression.

Richard.