Jquery .height and .width returns wrong numbers on ajax-ed content

Question

I'm struggling with geting width and height of block, which is loaded via jQuery's AJAX .load function.

In my HTML markup I have links:

<a href="image.htm" class="image"><img src="galerie_thumb.jpg" /></a>

and my JS:

$('document').ready(function() {
    $('body').append('<div id="hidden" style="display: inline-block;" />');
    $('div#hidden').append('<div id="fancy-content" style="display: inline-block;" />');
    $('a.image')
        .click(function(e) {
            e.preventDefault();
            var url = $(this).attr('href') + ' .image_wrap';
            $('div#fancy-content').load(url, function () {
                var height = $('#hidden').css('height');
                var width = $('#fancy-content').width();
                console.log(width);
                console.log(height);
            });
        }); 
});

So when i trigger the .click, AJAX loads the content of image.htm just fine. There is one big image and div with description. This is appended at end of body tag. When I inspect it in DOM inspector, it has width and height few hudert because of that image.

Problem is, that this .width() and .height() functions returns nubers like 69 and 32px. Which are wrong. I even try .css() function, but with very same result.

Funny thing is, that if I try it in different browsers, I got different results. In IE9, when I click the <a> second time, I even got right results. This is really mystery for me.

The two divs in my code have their meaning, I will use them for Fancybox, but I need correct width and height of that content to do that...

From my research, I found this article: Can't get ajax - loaded image's height and width via jquery which have similar problem, but solutions posted there didn't work for me.

Thanks in advance for every sugestion, how to solve this.

Lloyd · Accepted Answer · 2011-11-28 09:29:22Z

2

ok, i see your issue now - thanks for the guidance..

the dimensions reported by your code are correct at the point of execution. See annotations of your code below:

$('div#fancy-content').load(url, function () {
    var height = $('#hidden').css('height');
    var width = $('#fancy-content').width();

    // at this point the browser has received the HTML but *has not rendered it* (the browser has to perform a further GET request to acquire the image linked to by the "src" attribute - it doesn't yet know the dimensions of this image)
    console.log(width);
    console.log(height);
});

change your JS to this:

function showDimensions($jqueryObject) {
    console.log("width: " + $jqueryObject.width() + " height: " + $jqueryObject.height());
}

$('document').ready(function() {
    $('body').append('<div id="hidden" style="display: inline-block;" />');
    $('div#hidden').append('<div id="fancy-content" style="display: inline-block;" />');
    $('a.image')
        .click(function(e) {
            e.preventDefault();
            var url = $(this).attr('href') + ' .image_wrap';
            $('div#fancy-content').load(url);
        }); 
});

then modify the appropriate element in your loaded HTML to call showDimensions onLoad, e.g.:

<div id="theLoadedHtml"><img src="picture.jpg" onload="showDimensions($(this));"/></a></div>

edited Nov 28, 2011 at 9:29

answered Nov 26, 2011 at 22:21

Lloyd

8,4232 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lapak Over a year ago

Thanks for reply, If you want to digg in my code, here it is: www.lumiart.cz/foto/secret/kuba/jq_height_problem.zip but if I try your code, It's having the same problem. When i alter your function to log .width() into console like this: $("#content").load("/home/html", function() { var height = $('#content').height(); var width = $('#content').width(); console.log(height); console.log(width); }); Actual size in DOM inspector is 420x183px, but Chrome 15 returns 79 and 58 in console, IE9 return 163x1639 and FF return right values... Mystery :)

Collectives™ on Stack Overflow

Jquery .height and .width returns wrong numbers on ajax-ed content

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related