CODEWITHSUNDEEP
jqueryheight
Melros
Melros

Reputation: 1213

How do I grab the height of an ajax loaded content?

In my page I load content dynamic in a div by .load(). In this loaded div I have a subanvi where I load additional content in the loaded content. This works perfect so far.

But after the load I want to animate the height of the wrapper (which is all alround the page, except the footer) but don't know how cause my function only gets the hight of the first shown content. How do I get height of the new loaded content?

This is my function:

$(function(){

        var 
        $subContent = $(".subcontent"),
        $subWrap    = $(".maincontent"),
        $newWrap    = $("#wrapper"),
        subHeight   = 0,
        $el;

        $newWrap.height($newWrap.height());
        subHeight = $newWrap.height() - $subContent.height();

        $("ul.linkbox li a").live('click', function (e) {
    newLink = $(this).attr("href");
        e.preventDefault();

    $(".textbox").find(".subcontent").fadeTo(200,0, function() {

    $(".textbox").load(newLink +  " .subcontent" , function() {

    $(".subcontent").fadeTo(200,1, function() {

        $newWrap.animate({height: subHeight + $subContent.height() + "px"});

    }); 
    }); 
    });   
        });

});

Upvotes: 0

Views: 8333

Answers (4)

Jannis
Jannis

Reputation: 17315

In my experience the only way to reliably get the height is to create (either on page load or on the fly while the ajax is executing) some container that you position out of the users view via css:

#stage {
  /* hide the container while maintaining ability to render content */
  visibility: hidden;
  opacity:0;

  /* position out of view of user */
  position: absolute;
  z-index: -1;

  top: -9999em;
  left: -9999em;
}

Note: If your area that you are loading your ajax content into has a set width make sure to apply this width to the #stage element too otherwise the rendered content won't be the correct height.

If this is a one-off use case then you can of course hard code the width in the css or alternative you can set the width on the click event that fires the ajax load based on the content area.

Here is an example of how you'd structure the ajax load now:

// We're assuming that the content area is #area
// and that the out-of-view stage is #stage
// .myTrigger can be anything really, probably a link that get's the new content via an href.

$('.myTrigger').click(function(event) {
    var stage = $('#stage'),
         area    = $('#area');

    // get the width of the destination and set this to be the width of your stage container.
    stage.width( area.width() );

    // fire the ajax request
    $.ajax({
       url: 'whatevertheURLis',
       type: 'GET',
       dataType: 'html',
       complete: function (xhr, textStatus) {
          var ajaxContent = $(xhr.responseText);
            var newHeight = stage.append( ajaxContent ).getHeight(); // this will be a number

            // we're now setting the new height onto our content area element and then inject the ajax content.
            // the area.height(newHeight) could equally be an animate statement with the html(ajaxContent) being run in its callback.
            area.height( newHeight ).html( ajaxContent );
       }
    });


});

// helper function to get the height quickly from the stage element.
$.fn.getHeight = function() {
    var stage = $('#stage');
    // store content height.
    var stageHeight = stage.height(); 

    // remove the temporary content.
    stage.children().remove();

    // return the height.
    return stageHeight;
};

Hope this helps.

Upvotes: 0

Mohsen
Mohsen

Reputation: 65785

You calculated subHeight before any animation happens

subHeight = $newWrap.height() - $subContent.height();

Then used it after some animation happened to your elements

 $newWrap.animate({height: subHeight + $subContent.height() + "px"});

This may affect your code behavior. I would suggest recalculate the subHeight again when you need it:

$newWrap.animate({height: $newWrap.height() - $subContent.height() + $subContent.height() + "px"});

Upvotes: 1

genesis
genesis

Reputation: 50976

Taken from your question (please never place an answer into question):

I've just added the following code to get it to work for now:

$("#wrapper").css("height","auto");

Upvotes: 2

uzay95
uzay95

Reputation: 16632

If I didn't misunderstand you, you are trying to get height of content which is coming inside ajax response. The first way that I know $('#objectId').attr('height').

var heightOfSubContentn = $(".textbox").find(".subcontent").attr("height")

Upvotes: 1

Related Questions