So I've got this element which I need to get the width() and height() of, but it keeps returning 0, but when i enter $('#lightingData').width() in the console, it gives me the right values. I think i need to use some other wrapper function, I have tried $(document).ready(function() {...}); and $(window).load(function(){...});
Are there other wrapper functions which will wait even longer before executing?
if the #lightningData element has display:none when the onload is triggered and your code executed, widht() and height() will return 0. You can explicitly call .show() on the element before checking for dimensions
$('#lightingData').show().width();
.hide() immediately at the end to restore the element to its previous state.One of the things you can try is explicitly waiting for that particular element to be loaded before trying to call .width() and .height().
Try this:
$('#lightingData').load(function() {
...height and width manipulation here...
...don't forget about scope...
});
You should put this inside your $(document).ready(...), as you will want the document to at least know what $('#lightingData') is. Because you are getting 0 for the height and width and not errors, I can assume that they are at least found, before the methods are called.
UPDATE
Per the comments added by @Ian, I want to point out that this will only work for certain types of elements (URL, IFrames, Images/media, etc. - basically anything that needs to load its content). I am not going to update the code, since what I have above is correct if you are using it for one of these kinds of elements, and would be silly if you are using it for another. If you are using it for both, you need only add a condition/filter (based on your implementation) to determine if this code should be bound to that particular element.
$(window).on("load", function () {}); should be more than enough, as all images will have loaded - then you don't need the load event of the image. The problem is more likely that the element is hidden and width/height can't be calculated.load event only fires for certain elements...ones associated with an URL - images, scripts, frames, iframes, and the window object. So hopefully the element is one of those types :)If you are 100% sure that the width is still 0 at the point of $(document).ready()
try this:
$(function () {
$('#lightingData').show(function(e) {
var width = $(this).width();
//do something
});
});
Or, something stupid but will work for 90% of the case:
$(function() {
setInterval(function () {
var width = $('#lightingData').width();
//do something
}, 1000);
});
This one will delay the action for 1 sec after $(document).ready().
Without the exact scenario it's hard to give a specified solution.
