image size onload in IE
in [JavaScript]
|
Prev: FAQ Topic - How can I disable the back button in a web browser? (2010-02-15)
Next: how does recaptcha get around XSS protection?
From: jeff on 14 Feb 2010 22:48 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 15 Feb 2010 11:48 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 15 Feb 2010 13:03 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 15 Feb 2010 13:21 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 15 Feb 2010 17:19
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 |