What is the right way to use the tinyscrollbar update function with a jquery onclick event?

Question

I have a list of states that displays or hides on click of a button using jquery slideUp() and sideDown() functions.

I'm trying to use jquery tinyscrollbar to add a custom scrollbar to it.

I have a jsfiddle here: http://jsfiddle.net/ByteMyPixel/acLch/

I almost have it working, but am stuck - the tinyscrollbar shows on the second click event/slideUp() instead of slideDown().

Any ideas on how to fix this so that the tinyscrollbar appears on slideDown(), and disappears on slideUp()?

Here is my code:

var oScrollbar1 = $('#scrollbar1');
oScrollbar1.tinyscrollbar();

$("a.button").click(function () {

oScrollbar1.tinyscrollbar_update();

    if ($("ul.scrolling").is(":hidden")) {
        $("ul.scrolling").slideDown("slow");
    } else {
        $("ul.scrolling").slideUp("slow");
    }
});

score 4 · Answer 1 · edited Oct 06 '14 at 09:46

4

Using the tinyscrollbar for jQuery like this:

var scroll = $("#add-widget-scroll").tinyscrollbar();

I did some research and I found that the "update" function can be accessed using this:

$(scroll).data().plugin_tinyscrollbar.update();

edited Oct 06 '14 at 09:46

avcajaraville

9,041
2
28
37

answered Oct 06 '14 at 09:14

Hagau Ioan

51
2

useful solution under version:2.1.9 – Argun Feb 11 '15 at 09:03

score 3 · Accepted Answer · edited Mar 10 '14 at 22:24

3

    var oScrollbar1 = $('#scrollbar1');
    oScrollbar1.tinyscrollbar();

    $("a.button").click(function() 
    {
        $("ul.scrolling").slideToggle("slow", function()
        {                               
            oScrollbar1.tinyscrollbar_update();
        });
    });

This will fix your problem :)

edited Mar 10 '14 at 22:24

PhearOfRayne

4,990
3
31
44

answered Mar 07 '13 at 20:57

Baijs

1,847
3
20
35

Not sure why of the rollback after my edit no reason given by @Steven. The method 'tinyscrollbar_update' works on version 1.81 and version 2.0.3 of tinyscrollbar contains another method to update just called 'update'. – Robert Brisita Mar 11 '14 at 20:27

What is the right way to use the tinyscrollbar update function with a jquery onclick event?

2 Answers2