Bethesda tells us why ANZ will be first to Battlecry's beta!
Battlecry Beta First in ANZ!
We check out the fast-paced third-person Xbox One exclusive Sunset Overdrive to see just what it has in store.
Sunset Overdrive Reviewed
We take a look at Firaxis' sci-fi take on the Civ universe
Civilization: Beyond Earth Reviewed
We sit down with Blizzard's Ion Hazzikostas to talk all things World of Warcraft, including upcoming expansion Warlords of Draenor.
Talking Draenor with Ion Hazzikostas
jQuery help please!
Morax
Brisbane, Queensland
2335 posts
I'm writing some short code to get the width of an image that hasn't been displayed yet.

My problem is as follows:

I have a variable outside the .load function which I want to set via some code inside the .load. If I run the first alert, the variable works. If I run the second, it comes back as 0. How can I get the variable to hold its value outside the .load?


var finalW = 0;

theImg.load(function(){
cloned = $(this).clone().css({visibility:'hidden'});

$('body').append(cloned);
itemWidth= cloned.get(0).width;
cloned.remove();
finalW += itemWidth;
alert(finalW); <---- Correctly displays a value
});

alert(finalW); <--- Second alert (always displays 0 even if the first alert wasn't 0)
03:58pm 29/12/12 Permalink
system
Internet
--
03:58pm 29/12/12 Permalink
PornoPete
Melbourne, Victoria
807 posts
return finalW?
04:21pm 29/12/12 Permalink
TicMan
Melbourne, Victoria
8389 posts
I've spent about 2.5 seconds looking at this but its probably more about the timing and loadings of the objects. The page has loaded and processed the javascript before the image loads as the HTML loads first, hence it will always be 0 on your second alert().

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

Edit: Also going to add that javascript is all client side, so if you were planning on doing something funky to display the image properties or something before the client has to download it, well the client has to load it anyway to get the size.
04:32pm 29/12/12 Permalink
kos
Germany
2428 posts
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'.
04:35pm 29/12/12 Permalink
scuzzy
Brisbane, Queensland
15539 posts
As per above, also, make it easier on yourself and put text with your alerts

alert('first: ' + finalW);

alert('second: ' + finalW);

so you can understand the execution order.
04:44pm 29/12/12 Permalink
Morax
Brisbane, Queensland
2336 posts
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)
04:45pm 29/12/12 Permalink
Morax
Brisbane, Queensland
2337 posts
Here's an image that shows what's supposed to happen

http://imgur.com/1urLt
04:49pm 29/12/12 Permalink
kos
Germany
2429 posts
I'm pretty s*** 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?
04:58pm 29/12/12 Permalink
Morax
Brisbane, Queensland
2338 posts
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.

Hmm so in order to get widths of images that aren't yet displayed, I'd have to preload them?
05:17pm 29/12/12 Permalink
TicMan
Melbourne, Victoria
8390 posts
I don't know how but you would want to use CSS for this I think.
05:20pm 29/12/12 Permalink
thermite
Brisbane, Queensland
10621 posts
Just hide your images and when they load, measure them

I don't think you need the clone, and your only real mistake was trying to debug the code outside of load() in a spot where the code runs before the load().

Whatever you want to do with the measurement, do it in a process triggered in or after that load().
05:21pm 29/12/12 Permalink
simul
Brisbane, Queensland
1466 posts
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
08:12pm 29/12/12 Permalink
3x0dus
Townsville, Queensland
1691 posts
you should mock up examples on, http://jsfiddle.net/

makes it easier to try and see whats happening.
Also Slight correction ~

$('#gallery').load(function(){
var finalW = 0;
$('#gallery img').each(function() {
finalW += $(this).width();
});
$('#gallery').width(finalW);
});
08:37pm 29/12/12 Permalink
system
Internet
--
08:37pm 29/12/12 Permalink
AusGamers Forums
Show: per page
1
This thread is archived and cannot be replied to.