0

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

John the Painter
  • 2,495
  • 8
  • 59
  • 101
  • [http://jsfiddle.net/zFVyv/10/](http://jsfiddle.net/zFVyv/10/) -- [http://stackoverflow.com/questions/10868104/can-you-have-a-javascript-hook-trigger-after-a-dom-elements-style-object-change](http://stackoverflow.com/questions/10868104/can-you-have-a-javascript-hook-trigger-after-a-dom-elements-style-object-change) - shoudl get you going in the right direction. – Ohgodwhy Feb 17 '13 at 00:16

1 Answers1

1

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.

dev
  • 3,969
  • 3
  • 24
  • 36
  • Thank you so much for your help. I'm struggling to get this to work. I've managed to wrap it all in a updateHeight function, but moving the updateHeight(); to slides.js stops it from working. Maybe we could chat quickly? – John the Painter Feb 17 '13 at 00:29
  • Ok sure, I haven't tried this out so I'll download the plugin and set up a test too. – dev Feb 17 '13 at 00:31
  • This might be a stupid question but how do we go into a chat :) ... I've never been into one before. – dev Feb 17 '13 at 00:33
  • Thanks. I'll try and see if it allows us to chat. You can have a look at what I'm working on via the link I shared in the question. – John the Painter Feb 17 '13 at 00:33
  • You have to make a lot of comments ;) – John the Painter Feb 17 '13 at 00:34
  • hahaha ok .... just looking at the plugin site .. there is actually a oncomplete option – dev Feb 17 '13 at 00:35
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24648/discussion-between-rdck-and-vletech) – John the Painter Feb 17 '13 at 00:35