CODEWITHSUNDEEP
javascriptjquerydynamicheight
John the Painter
John the Painter

Reputation: 2615

Update the margin of a div in relation to the height of a div that dynamically changes

I'm wondering if this is possible with jQuery or JS.

I have a margin set on a div that is set by getting the height of a container that contains images.

var articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);

However, the container's images are essentially a slider, so the height of this container can change.

I'm wondering if it's possible to update the articleImageHeight variable live as the height of the container changes?

I am using slidesJS for the slider in the container.

Here's an example of what I'm working on: http://goo.gl/FdftC

Many thanks, R

Upvotes: 0

Views: 74

Answers (1)

dev
dev

Reputation: 4009

What I would probably do for this is to add your snippet of script as a function and then to call that function every time the slide changes. This will mean you need to make a slight modification to the plugin. Having a look at the plug the main animate function is simply called animate().

So as a quick example 

updateHeight = function(){
   articleImageHeight = $('.slides_control').height();
   $('.individual-article-contents').css('margin-top', articleImageHeight);
}

The above adds your bit to a function and then add updateHeight(); to line 236... if you're using the un-minified version of the plugin.

Just above the line that says } // end animate function

.. just a thought a what might look a bit nicer is to use .animate rather than .css for updating the top margin... but hey I don't know what you're working on so is entirely up to you.

----EDIT---- Just an update... we found an animateComplete() callback on the plugin which worked a charm.

Upvotes: 1

Related Questions