0

I know a lot about HTML and CSS, but I'm still pretty early in the learning curve for jQuery.

I need to set various properties of some DIVs based on the size of the image inside them.

Here's some sample HTML:

<div class="box">
<img src="../pix/onepic.gif">
</div>

and here's a function that I know works:

$('.box').click(function() {            
    var obj = $(this);
    var imgWidth = $('img:first', obj).width();
    var imgHeight = $('img:first', obj).height();

    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
    });

But I now want to run this function automatically on the whole page, not just when I click, and where there will be a number of .box es containing various sizes of images.

Among other things, replace "click" in the sample above with "load" does bugger-all.

At first the suggestion below to use "each" seemed to work; when I put this script:

$('.box').each(function() {            
    var obj = $(this);
    var imgWidth = $('img:first', obj).width();
    var imgHeight = $('img:first', obj).height();
    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
});

before the body-close tag, I got just what I hoped for.

But then I tested some more, changing the HTML to:

<div class="box">
<p>hello world</p>
<img src="../pix/onepic.gif">
</div>

and Firefox, Chrome and IE gave me three completely different results.

Firefox has what I expected, hello world and the picture in an enlarged box.

In Chrome the div now has height and width of 0px.

In IE7 the div now has a width of 56px and a height of 60px, for no reason I can discern -- the image in question is 100x100.

Red Owl
  • 11
  • 3
  • Why not [`display: inline-block; line-height: 0`](http://jsfiddle.net/ambiguous/t3UPM/) and let the browser figure it out? – mu is too short Jul 06 '12 at 08:10
  • Because I'm just testing the basic principle -- what I'll be doing for real is much more complicated and involves things like absolute positioning. – Red Owl Jul 06 '12 at 08:59

2 Answers2

2

Use the jQuery each() function

$('.box').each(function() {            
    var obj = $(this);
    var imgWidth = $('img',obj).width();
    var imgHeight = $('img',obj).height();

    $(this).width(imgWidth * 2);
    $(this).height(imgHeight * 2);
});
bart s
  • 5,068
  • 1
  • 34
  • 55
  • bart: nothing happens when I put that code in the page head. When I put it at the end (before the body-close tag), it works if I change the var imgWidth & height declarations to ` var imgWidth = $('img:first', obj).width(); var imgHeight = $('img:first', obj).height();` – Red Owl Jul 06 '12 at 08:37
  • my bad, sorry: `.box` is the `div` and not the image. That's why you need `$('img', obj)` (if you have one image in the box div) or `$('img:first', obj)`. Adding it before the body close tag, means that you did not add it to the `$(document).ready()`. Try this `$(document).ready()` as it was mentioned by @devtut – bart s Jul 06 '12 at 09:36
  • When I wrap it in document-ready and put it just before body-close, it works in both FF & IE, thank you! **However**, it still doesn't work in Chrome!! -- Inspect Element shows `
    `.
     – Red Owl Jul 06 '12 at 09:54
  • If you wrap it in the document ready, you can move it into the `head` tag. For chrome I would recommend to get familiar with the developer tools. https://developers.google.com/chrome-developer-tools/ You can breakpoint you javascript, watch variables, ajax injected html and even the network traffic. I found this SO article http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome which states that the image width in chrome is set only after the image is loaded. That may be your problem – bart s Jul 06 '12 at 10:02
  • I ended up using this image loader: (https://github.com/desandro/imagesloaded). Works perfectly! Thank you so much for your help. – Red Owl Jul 06 '12 at 11:06
0

Using the imagesLoaded plugin https://github.com/desandro/imagesloaded I found a neat way to do this.

$('.element').imagesLoaded().progress( function( instance , image) {

    newHeight = $(image.img).height();

    $(image.img.parentNode).height(newHeight);

});

This simple function leverages the imagesLoaded 'progress' function which iterates all images in a given container and hands them to you one by one as they are confirmed loaded.

There are a number of different ways to access containers, images as well as image state (failed-to-load) etc

I recommend checking it out :-)

philnyc
  • 1