Robert Taylor Robert Taylor - 5 months ago 17
jQuery Question

Adjusting height of scrolling div

I am combining two scripts together: a scroller and a content fader. When I swap the content (fading), div's with a lot of content make the scrolling div super long. I was reading on the plugin demo for content scrolling (http://manos.malihu.gr/jquery-custom-content-scroller) that you can use

$(selector).mCustomScrollbar("update");
when loading different content to make the div adjust accordingly.

I know that code needs to go in my fading script somewhere, but where? Here is the fading script, where would it go?

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('.clickme').bind('click', function(e) {
e.preventDefault();
$( "#mediaswap div" ).fadeOut();
$( "#mediaswap div" + $(this).attr('name') ).fadeIn();
})
});
}
})(jQuery);


$(function() {
$('#mediaswap').Fader();
});
});//]]>

</script>

Answer

I've answered your comment on the post but I'm writing it here too.

Since you fade in/out divs, you have to call the update method as a callback to the .fadeIn() function, so it updates the scrollbar after the animation is completed:

$( "#mediaswap div" + $(this).attr('name') ).fadeIn(function(){
    $(this).mCustomScrollbar("update");
});

Additionally, there's an extra option parameter you can use when you initially call the plugin, that checks content size and updates the scrollbar automatically if it changes:

$("#mediaswap div").mCustomScrollbar({
    advanced:{ updateOnContentResize:true }
});

Using the updateOnContentResize option, depends on the rest of your code (where you call the plugin), so I recommend using the first method.