CODEWITHSUNDEEP
jqueryoverlaytinyscrollbar
neil1967
neil1967

Reputation: 257

how to set jquery tinyscrollbar to scroll:false in overlay

Invoking an overlay within a scrollable area. Using tinyscrollbar plugin ( [http://www.baijs.nl/tinyscrollbar/][1] ) and, when the overlay is invoked, I want to set the scroll option in tinyscrollbar to false. This is the script in the header: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#scrollbar2').tinyscrollbar({ scroll: true });
    });
</script>

This is the overlay script:

<script>
    $(document).ready(function () {
        $("img[rel]").overlay({
            onBeforeLoad: function (event) {
                $('#scrollbar2').tinyscrollbar({ scroll: false });
            },
            onClose: function (event) {
                $('#scrollbar2').tinyscrollbar({ scroll: true});
            }
        });
    });
</script>

As you can see, in onBeforeLoad, I try to set the scroll to false and onClose set it back to true, but these are ignored. Kinda new to jquery, so not sure how to change these options dynamically. Tried call to tinyscrollbar_update() after setting scroll option but that didn't have any effect. Not sure how to do this...

Upvotes: 1

Views: 1011

Answers (1)

neil1967
neil1967

Reputation: 257

Though I couldn't come up with any solution that wasn't adding code to the tinyscrollbar source, I did come up with a workaround. Since the only way to get tinyscrollbar to change after the page is loaded is to call tinyscrollbar_update(), in my script invoking the overlay functionality, in the onBeforeLoad I made the height of my enclosing ".overview" container less than the min height that invoked the scrollbar, then called tinyscrollbar_update(). Since tinyscrollbar saw that it didn't need to render itself, it disappeared. Then, in the onBeforeClose I just reset the height to what it was, again called tinyscrollbar_update() and the scrollbar reappears.

Here is the modified code:

<script>
    $(document).ready(function () {
        $('#scrollbar2').tinyscrollbar();

        $('img[rel]').overlay({
            oneInstance: false,
            onBeforeLoad: function (event) {
                $('.overview').css('height','150px');
                $('#scrollbar2').tinyscrollbar_update();
            },
            onBeforeClose: function (event) {
                $('.overview').css('height','auto');
                $('#scrollbar2').tinyscrollbar_update();
            }
        });
    });
 </script>

Upvotes: 0

Related Questions