CODEWITHSUNDEEP
jqueryfunctionplugins
kangun
kangun

Reputation: 126

Jquery - can not use plugin?

i'm trying to use a scrollbar plugin written with jquery : tinyscrollbar. you can find it here : website about tinyscrollbar jquery plugin i use jquery 5 with this command :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

and i cal it just after :

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

and finally here is the html code :

<div id="scrollbar1">
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
        <div class="overview">
            <?php echo $content;?>
        </div>
    </div>
</div>

i have a bug while loading the plugin (or another, i've tried many...) : Firebug tell me $("#scrollbar1").tinyscrollbar(); is not a function.

but the script is loaded and i've try to make an alert and that work perfectly have you got an idea???

PS : sorry for my english... it's not my language ^^'

Upvotes: 1

Views: 2733

Answers (2)

Naftali
Naftali

Reputation: 146310

You need to load the plugin. So far all you have loaded is jquery.

Upvotes: 1

Jamie Taylor
Jamie Taylor

Reputation: 3530

You need to call the jquery.tinyscrollbar.min.js file

If you download the example on the website then you will see the jquery.tinyscrollbar.min.js in the js folder

Or you can link to it here

http://www.baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.min.js

You also need to add the CSS to it

The website you link to has CSS styles like this

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }

Working example

http://jsfiddle.net/ChiBlaaa/SEWm2/

Upvotes: 1

Related Questions