jQuery adjust and animate content to unknown height

We were using the great Isotope responsive layout jQuery plugin on a client project and found that because of the absolute positioning of divs there was an overspill when the isotope elements moved. If these items were relatively placed on the page obviously that wouldn’t be the case. Our solution to this was to create a jQuery plugin/snippit to find the height of the isotope element and then nicely slide down the content area of the page. Here is the script:-

// adjust and animate  entry content to unknown height //
// responsive layout by https://www.slickmedia.co.uk


var sliderHeight = "0";
var initialDelay = 200;
var slideDuration = 2400;

$('.clickable').each(function () {
var current = $(this);
current.attr("box_h", current.height());
$(".clickable").css("height", sliderHeight);

var delay = function() { sliderOpen(); };
setTimeout(delay, initialDelay);

function sliderOpen()
var open_height = $(".entry-content").attr("box_h") + "px";
$(".entry-content").animate({"height": open_height, paddingBottom: "120px"}, {duration: slideDuration });

In our example, the isotope parent has the class ‘clickable’ and as we are using WordPress we are dynamically resizing the ‘entry-content’ area that contains the isotope divs. So for your own use simply identify the parent div/ul of the child elements that you want to calculate the height on and replace ‘.clickable’ and then identify the content area (which in itself would typically be the parent of the prior) and replace ‘.entry-content’ with the appropriate id or class.

About the Author
jquery adjust and animate content to unknown height jQuery adjust and animate content to unknown height 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.