CODEWITHSUNDEEP
jquerytinyscrollbar
Rahul Dagli
Rahul Dagli

Reputation: 4502

Tinyscrollbar height not updating

I have a widget whose height is dynamically set. However, the scrollbar height doesn't seems to update when the height of the widget container changes. And there is extra white space appearing when I scroll to the bottom of the widget. The widget is also responsive so in the desktop view its positioned on the right side and in mobile viewport its docked at the bottom.

$('.isi-widget').tinyscrollbar({ thumbSize: 50 });

    $('.scrollbar').fadeOut();

    $('.isi-widget').hover(
        function(){
            $('.scrollbar').fadeIn();
        },
        function(){
            $('.scrollbar').fadeOut();
        }
    );

    function pinnedIsi(){
        $('.isi-widget').css({
            height: '200px',
            top: 'inherit'
        });
        $('.isi-toggle-btn').addClass('pinned');
        $('.isi-toggle-btn').removeClass('unpinned');
        $('.isi-toggle-btn').html('+');
    }

    function unpinnedIsi(){
        $('.isi-widget').css({
            height: 'calc(100% - '+ $('header').height() +'px)',
            top: $('header').height() + 'px'
        });
        $('.isi-toggle-btn').addClass('unpinned');
        $('.isi-toggle-btn').removeClass('pinned');
        $('.isi-toggle-btn').html('–'); 
    }

    function sidebarIsi(){
        $('.isi-widget').css({
            height: 'calc(100% - '+ $('header').height() +'px)',
            top: $('header').height() + 'px'
        });
        $('.isi-toggle-btn').removeClass('pinned');
        $('.isi-toggle-btn').removeClass('unpinned');
    }

    $('.isi-toggle-btn').click(function(){
        if ($('.isi-toggle-btn').hasClass('unpinned')){
            console.log('pin');
            pinnedIsi();
        } else {
            console.log('unpin');
            unpinnedIsi();
        }
    });

    function toggleIsi(){

        if ($(window).width() <= 1023) {
            pinnedIsi();
        } else {
            sidebarIsi();
        }
    }

    toggleIsi();

    $(window).resize(function(){
        toggleIsi();
    });

Upvotes: 1

Views: 214

Answers (1)

Baijs
Baijs

Reputation: 1847

You should call the update method on the tinyscrollbar instance after the height is changed.

Upvotes: 0

Related Questions