javascriptjquerymcustomscrollbar

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>

Solution

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