jQuery adjust and animate content to unknown height

Glenn Glenn's Blog 0 Comments

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

(function($){

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

$(document).ready(function(){
$('.clickable').show();
$('.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.
if you want to see this in action on a live site then you can view it on our clients web site here:-

Live Demo

Drag the corner of the browser window to make it smaller and see how the page slides up or down according to the height of the Content (the Isotope Boxes in our case).

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

Glenn

A highly experienced WordPress Web Developer, Front-end and 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.

Leave a Reply

Your email address will not be published. Required fields are marked *


*