Robert Taylor Robert Taylor - 1 year ago 53
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 ( that you can use

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[
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('.clickme').bind('click', function(e) {
$( "#mediaswap div" ).fadeOut();
$( "#mediaswap div" + $(this).attr('name') ).fadeIn();

$(function() {


Answer Source

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(){

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.