From: jeff on
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
From: Thomas 'PointedEars' Lahn on
jeff wrote:

> 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
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>
From: jeff on
Thomas 'PointedEars' Lahn wrote:
> jeff wrote:
>
>> 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.

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
From: Thomas 'PointedEars' Lahn on
jeff wrote:

> 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.
>>>
>>> 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
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
From: jeff on
Thomas 'PointedEars' Lahn wrote:
> jeff wrote:
>
>> 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.
>>>>
>>>> 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

>
>> 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