jQuery help please!
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?
|
03:58pm 29/12/12 Permalink
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
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
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
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
04:49pm 29/12/12 Permalink
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
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
I don't know how but you would want to use CSS for this I think.
|
05:20pm 29/12/12 Permalink
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
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
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
