return finalW?

Yeah I think the problem is that the '.load' function is not run in line but when an event happens. The code is run through entirely first and event handler functions like '.load' are basically saved for later when they are actually triggered.

Whatever code uses finalW would need to be executed by a callback from the '.load'.

Probably better to explain what you intend to do with the width so we can collectively cloud source storm a solution.

I have a div which contains a series of left-floated img thumbnails (of varying width). That div is hidden from display under a display:none div until a certain link is clicked (imagine a Windows start menu button which expands when clicked).

I need to specify the width of the container div based on the width of all of the thumbnails because it is dependent on the browser's screen width.

To make things more difficult, this whole thing is embedded within another page which is .loaded into the current page.

So, the viewer's workflow is as follows:

1. Open page
2. Viewer sees 3 buttons (Photos, Videos, Other). Clicks on Photos
3. There is a div on that page which .loads the gallery content (this works fine)
- The gallery div contains a series of links which are gallery titles
4. Viewer clicks on a gallery title, and thumbnails of that gallery expand (this doesn't work as the width of the thumbnails div isn't being calculated)

I'm pretty shit at web dev but personally I try to use as little JS and let layout do as much of the work as possible. Also I hate 'float'. Is it not possible to display the images with 'inline' or something and let the surrounding element resize automatically?

I don't know how but you would want to use CSS for this I think.

var finalW = 0;
var finalCount = 0;

$('#gallery img').load(function(){
finalW += $(this).width;
finalCount++;
if($('#gallery img').length == finalCount) {
$('#gallery').width = finalW;
}
});

Sounds about what you want (pseudo coded). This assumed images loading into a div#gallery, where the width of it is set to the combination of inside image widths.

edit: not sure if this is more optimised, but should produce the same result (.load() is recursive so it should be safe to assume this will only get called once all images are loaded):

$('#gallery').load(function(){
var finalW = 0;
$('#gallery img').each(function() {
finalW += $(this).width;
});
$('#gallery').width = finalW;
});

last edited by simul at 20:17:29 29/Dec/12