Question

Title pretty much explains most of my question. I will provide some context.

I’ve got something like this. (simplified)

<ul>
<li><img src="image1.jpg"/></li>
<li><img src="image2.jpg"/></li>
<li><img src="image3.jpg"/></li>
</ul>

each li is tiled up horizontally. Like so:

 [   ][   ][   ][   ]

So I already have this script that stretches the image height and keeps the aspect ratio.
But now I need a script which will dynamically get width of all the images (or li) even after the browser has been resized.
To my understanding I need something like event bubbling or delegation of some sort. I have no idea how to continue this jQuery journey.

image links to different browser settings I’m talking about

Normal browser height

http://f.cl.ly/items/1O3w3M3l3b3a0z2B0U1w/image1.jpg

Decreased browser height

http://f.cl.ly/items/3y3K38243J063J1U2f1P/image2.jpg

Answer 1

You’ll have to hook into the resize event:

$(window).resize(function(){
    $('li img').each(function(){
        console.log( $(this).width() );
    });
});

If you want it to also fire on page load, trigger the resize event yourself:

$(window).resize(function(){
    $('li img').each(function(){
        console.log( $(this).width() );
    });
})
.resize();

Here’s the fiddle: http://jsfiddle.net/39JFQ/

---

If you need the total of all the widths, use this:

$(window).resize(function(){
    var totalWidths = 0;

    $('li img').each(function(){
        totalWidths += $(this).width();
    });

    console.log(totalWidths);
})
.resize();

Here’s the fiddle for that: http://jsfiddle.net/39JFQ/2/

---

You should obviously replace the li img selector with something more specific.