image size onload in IE

[jeff]

I'm changing images (by changing src) and using an onload handler in
the image to read the image width.

simplified code:

<img src="..." onload="getWidth(this)" id="my_image">

function getWidth(el){

alert(el.width)

This works fine in FF but gives erratic results in IE6 (have not tested
other versions).

Sometimes I get 0 width and sometimes I get the same width for all
images.

What to do?

Jeff

 

[Thomas 'PointedEars' Lahn]

I'm changing images (by changing src) and using an onload handler in
the image to read the image width.

simplified code:

<img src="..." onload="getWidth(this)" id="my_image">

function getWidth(el){

alert(el.width)

This works fine in FF but gives erratic results in IE6 (have not tested
other versions).

Sometimes I get 0 width and sometimes I get the same width for all
images.

What to do?

1. Use Valid markup.
2. Read and adhere to <http://jibbering.com/faq/#posting> ff.


PointedEars

 

[jeff]

1. Use Valid markup.
2. Read and adhere to <http://jibbering.com/faq/#posting> ff.

Beats me what part of that you think I violated. I reduced this as
simply as possible and yet retained the key bits. I doubt whether adding
an alt tag or a doctype would have improved my sample.

Google has not been particularly helpful, I'll look into checking
image_reference.complete.

Jeff

 

[Thomas 'PointedEars' Lahn]

[...]
<img src="..." onload="getWidth(this)" id="my_image">

function getWidth(el){

alert(el.width)

This works fine in FF but gives erratic results in IE6 (have not tested
other versions).

Sometimes I get 0 width and sometimes I get the same width for all
images.

What to do?

1. Use Valid markup.
2. Read and adhere to <http://jibbering.com/faq/#posting> ff.

Beats me what part of that you think I violated.

"Does not work" is a useless error description. [psf 4.11]

And what "other images" are you talking about?

I reduced this as
simply as possible and yet retained the key bits. I doubt whether adding
an alt tag or a doctype would have improved my sample.

That is correct, as there is no "alt tag", and no "doctype". However,
there is also no `onload' attribute for `img' elements.

Google has not been particularly helpful, I'll look into checking
image_reference.complete.

Don't.


PointedEars

 

[jeff]

jeff wrote:
[...]
<img src="..." onload="getWidth(this)" id="my_image">

function getWidth(el){

alert(el.width)

This works fine in FF but gives erratic results in IE6 (have not tested
other versions).

Sometimes I get 0 width and sometimes I get the same width for all
images.

What to do?
1. Use Valid markup.
2. Read and adhere to <http://jibbering.com/faq/#posting> ff.

Beats me what part of that you think I violated.

"Does not work" is a useless error description. [psf 4.11]

I did not say that, I said:


This works fine in FF but gives erratic results in IE6 (have not tested
other versions).

Sometimes I get 0 width and sometimes I get the same width for all
images.

And what "other images" are you talking about?

This is all a simple product image viewer with a magnifier. It's just a
a large movable image in a div with the overflow hidden so the image is
"clipped":

html looks like this:

<div class="product_image" style="position: relative;width: 400px;
height: 400px;overflow: hidden">
....

<img src="/images_products/my_large_image.jpg" id="magnified"
style="display: none;position: absolute;" onload="setLimits(this)" >

</div>

The magnified image id is changed by changing the source:

document.getElementById('magnified').src = '/path_to_new_image';

The function setLimits, just reads the image width and height so I
can center the image and know where the edges are. Trouble is, if I pop
an alert in the onload, as shown in the code snippet, alert(this.width)
is wrong, in IE6 (not tested in other IE versions) and sometimes in Safari.

I assumed that this was a fairly common problem, IE not being a great
piece of work, and there was a "solution".

I've put up a version of the actual code, this being a site in
development:

http://theceramicknifestore.com/test_magnifier.html

Javascript is embedded and some bits snipped. There is a simple
Magnifier object, just to simplify keeping track of variables.

I'm not a great programmer, and largely self taught, so it's not
great code, but I think largely readable. I'll clean it up again later.

If I'm always going to have "problems" reading the width the I'll do
it server side and pass it in, but it seems to me this is fixable.

Jeff

Jeff

 

[rf]

This is all a simple product image viewer with a magnifier. It's just a a
large movable image in a div with the overflow hidden so the image is
"clipped":

html looks like this:

<div class="product_image" style="position: relative;width: 400px; height:
400px;overflow: hidden">
...

<img src="/images_products/my_large_image.jpg" id="magnified"
style="display: none;position: absolute;" onload="setLimits(this)" >

</div>

The magnified image id is changed by changing the source:

document.getElementById('magnified').src = '/path_to_new_image';

The function setLimits, just reads the image width and height so I can
center the image and know where the edges are.

Why do you need to do this? Just centre the image using CSS and let the
browser do the work.

I've put up a version of the actual code, this being a site in
development:

http://theceramicknifestore.com/test_magnifier.html

In IE6 (and IE7) you have an invalid argument on this line:
magnified.style.top = '-' +parseInt(magnifier.magnifier_limit_y/2) + 'px';

 

[jeff]

Why do you need to do this? Just centre the image using CSS and let the
browser do the work.

Many reasons. First I still need to know the image width as I need to
know when to stop being able to drag the image.

I didn't realize you could center an image in a smaller container
than it is, I'll test for my own curiosity. But assuming that was
possible, it is impossible to vertically center in IE6 and IE7, neither
understands either display: table cell, or vertical-align: middle.

I had earlier considered using background images, as they center
cross browser, but had discarded that for other reasons.

In IE6 (and IE7) you have an invalid argument on this line:
magnified.style.top = '-' +parseInt(magnifier.magnifier_limit_y/2) + 'px';

Thanks, bad way to make a negative, it didn't work when I did this:

magnified.style.top = parseInt(magnifier.magnifier_limit_y/-2) + 'px';

 

[jeff]

Thomas 'PointedEars' Lahn wrote:
jeff wrote:
[...]
<img src="..." onload="getWidth(this)" id="my_image">

function getWidth(el){

alert(el.width)

This works fine in FF but gives erratic results in IE6 (have not
tested
other versions).

Sometimes I get 0 width and sometimes I get the same width for all
images.

<img src="/images_products/my_large_image.jpg" id="magnified"
style="display: none;position: absolute;" onload="setLimits(this)" >

^^^^^^^^^^^^^

IE has trouble reading image widths that are set to display: none.
Once they are set otherwise, even if they are then set back to display:
none, width is readable. It sort of makes sense.

Sorry for any trouble this has caused.

Jeff