1

I'm having a hard time picking up how to grab the dimensions of an element with jQuery. Here is my sample code: 

$(document).ready(function() {
        var width = $("#image_1").width();
        var height = $("#image_1").height();
        document.write(width);
        document.write(height);
    });

Now of course I have an image with an id of #image_1. What happens when I try to run it is that it outputs two zeros. Not null twice, or undefined twice.

Thanks for the help from a javascript newb.

patricksweeney
  • 3,939
  • 7
  • 41
  • 54

4 Answers4

8

Even though you've already chosen an answer, I am typing this one so you understand why your prior code did not work.

jQuery's document.ready function fires before images are loaded. Use window.load instead...

$(window).load(function() {
  var width = $("#image_1").width();
  var height = $("#image_1").height();
  document.write(width);
  document.write(height);
});

For what it's worth, I think it is better to use jQuery for this task because of the inherent cross-browser functionality.

Josh Stodola
  • 81,538
  • 47
  • 180
  • 227
1

You may get 0 for the width and height if the image is not visible. (That's what just happened to me.)

Updated: You can confirm that the image is added to the DOM by checking the length property of the jQuery object:

var inDOM = ($('#image_1').length > 0);
grammar31
  • 2,000
  • 1
  • 12
  • 17
  • It is visible, but jquery is basically choking and not showing the image. I was thinking along those lines. How can I tell if its actually inserted inside the DOM? – patricksweeney Feb 27 '09 at 04:13
1

Perhaps this was a typo in your question, but is the ID of your image really "#image_1"? For your code to work, it should be just "image_1". The "#" is only used in the jquery selector to specify that the text following it is an ID.

Tom Lianza
  • 4,012
  • 4
  • 41
  • 50
0

This works for me:

<head>
    <script type="text/javascript">
        function foo() {
            var image = document.getElementById("the_image");
            alert(image.offsetWidth);
            alert(image.offsetHeight);
        }
    </script>
</head>
<body onload="foo();">
    <img src="img.png" id="the_image">
</body>

This works as long as the image is not set to display: none; Using offsetWidth and offsetHeight also has the advantage of not requiring jQuery, at all.

Tyson
  • 6,214
  • 3
  • 32
  • 37
  • That returns undefined for both. Thanks for the help though! – patricksweeney Feb 27 '09 at 04:24
  • Can you post a link to a sample? It works for me (as shown in my edit above). – Tyson Feb 27 '09 at 04:32
  • I did something like the edit and it did work. I was messing around with something I have to do at work tomorrow. Basically I have a gallery that has a frame of 400x300, and most of the images are 395x295. But with some are smaller, and I want to center the small ones. Thanks! – patricksweeney Feb 27 '09 at 04:54
  • Hmmmm. I'm trying to accept your answer and it just shows a red box with the filename of the checkmark.....weird. – patricksweeney Feb 27 '09 at 04:55
  • I cannot access offsetWidth if the image has not loaded. The comment by Josh Stodola below addresses the problem better. Like he said, either use `$(window).load(function() {` or `$('#the_image').load(function() {`. – YOMorales May 10 '11 at 21:27