mzubala / jquery-custom-scrollbar

189 stars 102 forks source link

Animate on resize #12

Closed chethank closed 11 years ago

chethank commented 11 years ago

Hi, Hey will it be possible to provide the animation speed option when re-sized. The scenario is, I am calling the resize function when the div is made visible (using slideUp and slideDown methods), so it feels very jumpy. I felt the animation speed is provided to the resize as well it would make it neat. I tried to make changes to the code but could't achieve it :(. It would be really helpful if you can let me know on how to proceed with it, or any other alternatives i can use.

Thanks Chethan K

mzubala commented 11 years ago

Hey

Could you include some sample code that illustrates this jumpy behavior? I'll take a look and think of some solution.

chethank commented 11 years ago

function resetScroll() { $("#checkout-details").customScrollbar("resize"); } //---------------------------------------Script to toggle label-compose-block ---------------------------------------// $('.compose').live('click', function(e) { var select_blk = $(this).parent('li').parent('ul'); var display_blk = $(select_blk).next();

if (display_blk.css('display') == 'none') {
    $('.label-compose-block').slideUp("100", function() {
        resetScroll();
    });
    $(select_blk).removeClass('box_round').addClass('blue-bg noborder').next().slideDown("100", function() {
        resetScroll();
    });
} else {
    $(select_blk).next().slideUp("100", function() {
        resetScroll();
    });
}

});

My issues is when the "label-compose-block" div is displayed or made hidden the scrollbar is resized, and the resize happens very quickly. So if the resize has some animation speed control option then it will have that animation effect during the increasing/decreasing of scroll bar height.

Please let me know if its not clear.

Thanks Chethan K

capture1

mzubala commented 11 years ago

I've built similar piece of ui in demos/expandable_list.html (http://jquery-custom-scrollbar.rocketmind.pl/expandable_list.html) and indeed it didn't look to weel, so I introduced a parameter to resize function called keepPosition. If you set it to true then after resize the scrollbar will stay in the same position as before resize. For example if on your list user expands KK Test Stream after resize only the thumb size and position will change and the content will remain at the same position. Hope this helps.