views:

72

answers:

3

Is there a way to detect the actual width of an image in IE7.

Currently we have an Image that changes (we don't know the dimensions in advance at present) and can also be zoomed by the user (changing its $('#img').height()). In IE8 and firefox we can call removeAttr on height to reset the image to its natural size and then calculate based on this. In IE7 removeAttr doesn't work (http://gimp4you.eu.org/sandbox/js/test/removeAttr.html) and setting height to "" entirely hides the image.

So, the height detection works fine the first time, but once the zooming comes into play the height and width are modified, so the next image uses these.

I'd like to avoid entirely removing the img tag and recreate one without the height tag, but is there any other way to acheive this?

Update:

Sorry, wasn't very clear. The issue isn't with storing the loaded height but when the src tag is updated to change the image, the height set in the html/css is remembered - it doesn't use the actual image height. I need to be able to detect the actual image height, ie: if you opened just the image how many pixels tall it is. In better browsers than IE7 using removeAttr('height'), then after the image has loaded, reading the .height() property provides this, however removeAttr doesn't work with IE7 so you are left with a height that has been set by the image.

I've created an example based on Russ C's example here:

http://jsfiddle.net/px5yY/9/

If you click 'Image 2' then 'Click Me' then 'Reset', it correctly loads the image, zooms it, and returns to the original size.

However if you click 'Click Me' then 'Image 2' then 'Reset' it stays small (as the height attribute is remembered from the shrunk image. I need to be able to access the proper image size as returned by the first example).

I hope this is clearer.

+1  A: 

You can use $('#img').data() to store the original size.

Sruly
unfortunately we don't know the original size and need to calculate/detect it
Rob Rob
Does the DOM not know it by the time you hit $(document).ready(...) ?
Russ C
it does for the first image (ie: before any height manipulation has occurred on the img tag) - for subsequent images the reported height is whatever has been set via height() calls.
Rob Rob
Maybe I missed something, but if it does for the first image before modifications, can't you just record that value as Sruly suggested, and use it to repopulate the height attribute ?
Russ C
the problem occurs when the image changes to a second/third/fourth image with different dimensions.
Rob Rob
How does the image change? What triggers the change?
Sruly
If you want to restore the image to its natural size it shouldn't matter, unless the Zoom action actually causes the page to reload ?
Russ C
Rob, check my answer below, I've put up a quick demo for you.
Russ C
+2  A: 

edit: Updated on JSFiddler:

http://jsfiddle.net/px5yY/11/

Russ C
thanks for the link to jsfiddle, really useful. I've posted a clarification to my question.
Rob Rob
You're welcome for that, it's a great tool.
Russ C
Try out this now:http://jsfiddle.net/px5yY/11/Reset will fix the height now, but I don't know if this is compatible with IE7.
Russ C
ace! thanks so much! works in IE7 :D
Rob Rob
Awesome! Don't forget to upvote ;)
Russ C
Need 15 reputation to upvote. I will when I get there. :)
Rob Rob
I always forget that bit! You should have enough now ...
Russ C
thanks. done :)
Rob Rob
+1  A: 

Thanks - Russ C. I can't comment but JSFiddler is really good!.

Cryogen
You're welcome!
Russ C