inserting image into table cell using dom distorting

[Andrew Poulos]

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.create Element("TABLE" );
t.style.positio n = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";

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

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

// add row
var r = document.create Element("TR");
// add cell
c = document.create Element("TD");
// put text into cell
var txt = document.create TextNode("desc of image one");
c.appendChild(t xt);
r.appendChild(c );
b.appendChild(r );

// append to doc
t.appendChild(b );
document.body.a ppendChild(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

[RobG]

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.create Element("TABLE" );
> t.style.positio n = "absolute";
> t.style.left = "100px";
> t.style.top = "100px";
> t.style.width = "200px";
>
> // create tbody
> var b = document.create Element("b");[/color]

I think what you really want here is:

var b = document.create Element("tbody" );

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

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

This will not work in Firefox or IE. Use:

if (document.getEl ementsByTagName ) {
var docBody = document.getEle mentsByTagName( "body")[0];
} else if (document.all) {
var docBody = document.all.ta gs("body")[0];
}

docBody.appendC hild(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.create Element("TABLE" );
t.style.positio n = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "20px";
t.style.border = "1px solid red";

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


// create image
var i = document.create Element("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.create Element("TR");
// create another cell
c = document.create Element("TD");
c.style.border = "1px solid green";
c.style.textAli gn = "center";
// create text node
var txt = document.create TextNode("desc of image one");
c.appendChild(t xt); // 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.getEl ementsByTagName ) {
var docBody = document.getEle mentsByTagName( "body")[0];
} else if (document.all) {
var docBody = document.all.ta gs("body")[0];
}

docBody.appendC hild(t);





--
Rob

[RobG]

Re: inserting image into table cell using dom distorting

RobG wrote:
[...][color=blue][color=green]
>> document.body.a ppendChild(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.getEl ementsByTagName ) {
> var docBody = document.getEle mentsByTagName( "body")[0];
> } else if (document.all) {
> var docBody = document.all.ta gs("body")[0];
> }
>
> docBody.appendC hild(t);[/color]


--
Rob

[Andrew Poulos]

Re: inserting image into table cell using dom distorting

[snip][color=blue]
>
> Full code:
>
> //create table
> var t = document.create Element("TABLE" );
> t.style.positio n = "absolute";
> t.style.left = "100px";
> t.style.top = "100px";
> t.style.width = "200px";
> t.style.border = "1px solid red";
>
> // create tbody
> var b = document.create Element("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.create Element("TR");
> // create cell
> var c = document.create Element("TD");
> c.style.height = "200";
> c.style.border = "1px solid blue";
> c.style.textAli gn = "center";
>
>
> // create image
> var i = document.create Element("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.create Element("TR");
> // create another cell
> c = document.create Element("TD");
> c.style.border = "1px solid green";
> c.style.textAli gn = "center";
> // create text node
> var txt = document.create TextNode("desc of image one");
> c.appendChild(t xt); // 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.getEl ementsByTagName ) {
> var docBody = document.getEle mentsByTagName( "body")[0];
> } else if (document.all) {
> var docBody = document.all.ta gs("body")[0];
> }[/color]

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

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

Andrew Poulos

[Andrew Poulos]

Re: inserting image into table cell using dom distorting -part 2

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.create Element("TABLE" );
> t.style.positio n = "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.create Element("tbody" );
> // create row
> var r = document.create Element("TR");
> // create cell
> var c = document.create Element("TD");
> c.style.height = "200";
> c.style.border = "1px solid blue";
> c.style.textAli gn = "center";
>
> // create image
> var i = document.create Element("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.create Element("TR");
> // create another cell
> c = document.create Element("TD");
> c.style.border = "1px solid green";
> c.style.textAli gn = "center";
> // create text node
> var txt = document.create TextNode("desc of image one");
> c.appendChild(t xt); // 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.getEl ementsByTagName ) {
> var docBody = document.getEle mentsByTagName( "body")[0];
> } else if (document.all) {
> var docBody = document.all.ta gs("body")[0];
> }
>
> docBody.appendC hild(t);[/color]
}

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

ANdrew Poulos

[RobG]

Re: inserting image into table cell using dom distorting -part 2

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.create Element("TABLE" );
>> t.style.positio n = "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.create Element("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.getEl ementsByTagName ) {
>> var docBody = document.getEle mentsByTagName( "body")[0];
>> } else if (document.all) {
>> var docBody = document.all.ta gs("body")[0];
>> }[/color][/color]

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



--
Rob

[Andrew Poulos]

Re: inserting image into table cell using dom distorting -part 2

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.create Element("TABLE" );
>>> t.style.positio n = "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.create Element("IMG");
>>> i.src = "a.gif";[/color][/color][/color]

I moved the previous line to after
c.appendChild(m yimg)
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.getEl ementsByTagName ) {
>>> var docBody = document.getEle mentsByTagName( "body")[0];
>>> } else if (document.all) {
>>> var docBody = document.all.ta gs("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

[Richard Cornford]

Re: inserting image into table cell using dom distorting

RobG wrote:[color=blue]
> Andrew Poulos wrote:[/color]
<snip>[color=blue][color=green]
>> document.body.a ppendChild(t);[/color]
>
> This will not work in Firefox or IE. Use:
>
> if (document.getEl ementsByTagName ) {
> var docBody = document.getEle mentsByTagName( "body")[0];
> } else if (document.all) {
> var docBody = document.all.ta gs("body")[0];
> }
>
> docBody.appendC hild(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.getEle mentsByTagName( '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 getElementsByTa gName to be 'live', making
a quite a complex object to be creating and then throwing away within a
single expression.

Richard.