Can jQuery detect size of an image?

JavaScript
1

This is an update to a previous question which didn’t get any replies. Having tried some things it boils down to a question of whether jQuery can detect the width of an image on the page when that width hasn’t been defined in the image tag or css.

I’m designing templates for other authors to use. If they put an image of over a certain width in a div it’ll break the layout.

I’ve tried to write a function that gets (1) the name of the div and (2) the maximum width allowable. It should then check the images in that div and if they’re over the maximum width, resize them to the maximum width. If they’re under it should leave them alone. If a width is defined in the the width attribute it should leave it alone.

I know that is what ‘max-width’ is for, but the browser in our organization is IE6 and that’s not going to change anytime soon. It ignores ‘max-width’.

The code I’m using is:


function checkWidths(holder,maxwide) {
	var theHolder= holder + " img"
	if( $(theHolder).attr('width')) { return false;} // ignore if width set
	else {
		var wide= $(theHolder).css('width') 
		if( wide > maxwide ) {
				$(theHolder).css('width',maxwide)
		}
	}
}

The result each time I tinker with it is that either it does nothing or it sets the widths of all images to maxwide, even the small ones.

Can anyone tell me what I’m doing wrong? The only clue I have is that if I alert the width of images going through the function, those without a defined width come up as ‘auto’, which it seems to think is greater than maxwide.

2

I think you should be using .width() instead of .css(‘width’) , the former returns the computed value rather than the CSS value, which should be what you want:

http://api.jquery.com/width/

3

Thanks Louis

I’ll try that and report back in case it’s useful to someone else.

4

Thanks Louis - I’m further along the way but not yet there. That explanation of width() helped - I realised that in calling the function with ‘420px’ instead of ‘420’ it wasn’t comparing like with like. But I’m getting puzzling and contradictory results in different browsers if I have more than one image in a div.

Here’s the HTML on the page:


<div id="secondaryContent" class="right270">
 <img src="images/titles/prof_quals_img.jpg" alt="Professional Qualifications"  /> <!-- wider than 270px -->
 <img src="images/who_you_know_button.jpg" alt="Who you know" /><!-- smaller than 270px -->
</div>

My function is now


function checkWidths(holder,maxwide) {
	var theHolder= holder + " img"
	//if( $(theHolder).attr('width')) { return false;}
	
		var wide= $(theHolder).width()
		if( wide > maxwide ) {
				$(theHolder).width(maxwide)
			}
}

I call the function like this (there are other unrelated bits but this call goes:


$(document).ready(function(){

if($('#mainContent')) { // check if page is divided to two divs
		// TWO COL LAYOUT
		checkWidths('#mainContent','418')
		checkWidths('#secondaryContent','250')
			}
  });

What happens:
With only the large image (which should be resized):
FF doesn’t resize it; IE8 and IE6 do.

With only the small image:
All the browsers leave it along as intended

With a large and a small image:
FF doesn’t resize either.
IE8 and IE6 resize the large one but also resize the small one to maxwidth!

Puzzling!

Maybe I have to reset something after each image?