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>
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.