CODEWITHSUNDEEP
javascriptjquerytinyscrollbar
Diego R
Diego R

Reputation: 77

How to disable tiny scrollbar jQuery plugin?

How do I disable all instances of the Tiny Scrollbar plugin on a page? Here's a JSBin to test.

Context: I'm building a web application that uses this plugin for all the scollbars for the desktop version, but I want to disable it and use native scrollbars for the mobile version.

Upvotes: 2

Views: 2067

Answers (5)

NinjaKC
NinjaKC

Reputation: 841

I found this page looking for a way to destroy / completely remove a jquery plugin (specifically it was tinyscrollbar). So the keywords make sense, and the selected answer does what the op wanted. But there are no complete answers here on "How To Disable a * jQuery Plugin".

@yMed was down voted twice, but was close..

In the end, I found my answer below..

var destroyTinyScrollBar = function($elem) {
    var eventNamespace = 'tinyscrollbar',
        isInstantiated  = !! $.data($elem.get(0));

    if (isInstantiated) {
        $.removeData($elem.get(0));
        $elem.off(eventNamespace);
        $elem.unbind('.' + eventNamespace);
    }
};

Which is better explained over at, http://ub4.underblob.com/remove-jquery-plugin-instance/

Upvotes: 0

JAKEtheJAB
JAKEtheJAB

Reputation: 289

It looks like the Tiny Scrollbar plugin generates its own markup to simulate a "native" scroll bar.

What you can do is detect whether the detect if the device is mobile, then hide the generated markup for the scrollbar. You can do that via jQuery or css. For example:

$('#scroll-bar').hide();

or

<div id="scroll-bar" style="display:none;">...

In order to display native browser scrollbars in for the viewport, set overflow to auto and specify a height. For example:

<div id="view-port" style="height:200px; overflow:auto;">...

Upvotes: -1

yMed
yMed

Reputation: 65

use:

$(selector).unbind("tinyscrollbar");

example: 

$("#parent").unbind("tinyscrollbar");

Upvotes: -3

user1890615
user1890615

Reputation:

Try this:

$(document).ready(function(){
     if(!(navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/webOS/i)
     || navigator.userAgent.match(/iPhone/i)
     || navigator.userAgent.match(/iPad/i)
     || navigator.userAgent.match(/iPod/i)
     || navigator.userAgent.match(/BlackBerry/i)
     || navigator.userAgent.match(/Windows Phone/i)
     )){
         $('#scrollbar1').tinyscrollbar();
     }
});

Upvotes: 0

Mark
Mark

Reputation: 3123

This question will help you to detect if it is a mobile browser, read the comments though about the caveats.

What is the best way to detect a mobile device in jQuery?

Upvotes: 0

Related Questions