0

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>
SnoringFrog
  • 1,479
  • 1
  • 16
  • 30
Robert Taylor
  • 89
  • 1
  • 10

2 Answers2

4

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.

malihu
  • 790
  • 5
  • 6
0

I recommend checking the div to see if it's animated using something like this:

var wait = setInterval(function() {
        if( !$("#mediaswap div").is(":animated")) 
        {
                clearInterval(wait);
                //put the code in here because it checks 
                  for whether the DIV is currently animated.
            }
        }, 200);

You can change the interval if it takes the animation longer to complete the animation.

user1470118
  • 412
  • 2
  • 9
  • 24