4

So I want to customize a scrollbar and I found tiny scrollbar, which is a jquery plugin:

http://baijs.nl/tinyscrollbar/

The problem is, I can't get it to work no matter what. I included Jquery, and the jquery.tinyscrollbar.js files into the same folder as my html and css, as well as included them in the header section, but I can't get it to work...

when I open the file via client side, all I get is the regular looking scrollbar as you can see below:

enter image description here Here's my code:

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="scrolltest.css" />
    <script src="jquery.js"></script>
    <script src="jquery.tinyscrollbar.js"></script>
    <script>
        $(document).ready(function() 
            {
                $("#chatlist").tinyscrollbar();
            });
    </script>
</head>
<body>
    <div id="chatlist" >
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
</body>
</html>

CSS

    div#chatlist {
        width: 50px;
        height: 140px;
        border: 1px solid black;
        overflow:scroll;
     }

Any help would be greatly appreciated!

r1nzler
  • 2,533
  • 8
  • 28
  • 30

2 Answers2

9

As explained in the official site, you need to define a scrollbar and a viewport class elements in your code. Try the HTML code below:

   <div id="chatlist">
   <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
   <div class="viewport">
        <div class="overview">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
        </div>
    </div>
    </div>

And don't forget to amend your CSS as explained in the site too.

#chatlist { width: 520px; clear: both; margin: 20px 0 10px; }
#chatlist .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#chatlist .overview { list-style: none; position: absolute; left: 0; top: 0; }
#chatlist .thumb .end,
#chatlist .thumb { background-color: #003D5D; }
#chatlist .scrollbar { position: relative; float: right; width: 15px; }
#chatlist .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#chatlist .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#chatlist .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#chatlist .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
Julien Bourdon
  • 1,713
  • 17
  • 28
  • Ahhh got it!. Thank-you so much for your help! I didn't realize if you kept scrolling down in the main site that there would be info on how to load it lol. Thanks so much dude :D – r1nzler Jan 27 '13 at 10:40
  • 1
    No problem :) Happy to help. It happened a lot to me when I started JQuery too. – Julien Bourdon Jan 27 '13 at 10:42
  • 3
    I can't see any of this info on the site- I can see demos for passing various parameters, but no explanation of how to implement the necessary HTML & CSS modifications. – Ila Apr 10 '14 at 17:01
  • @Ila, download the package, the CSS and example HTML are included. – Julien Bourdon Apr 11 '14 at 00:38
4

Using tinyscrollbar actually requires a bit of work. The things you need to do are: 1. You need to define a scrollbar, and a viewport div 2. You need to style them 3. You should get rid of overflow:scroll, as tinyscrollbar does not override the overflow functionality, and you'll get the default scrollbar alongside the tiny one.

This is the code you should use:

    <html>
<head>
    <link rel="stylesheet" type="text/css" href="scrolltest.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
    <script src="jquery.tinyscrollbar.js"></script>
    <script>
        $(document).ready(function () {
            $("#chatlist").tinyscrollbar();
        });
    </script>
    <style>

         #chatlist { width: 50px; height:140px; border:1px solid black;  }
        #chatlist .viewport { width: 50px; height: 140px; overflow: hidden; position: relative; }
        #chatlist .overview { list-style: none; position: absolute; left: 0; top: 0; }
        #chatlist .thumb .end,
        #chatlist .thumb { background-color: #003D5D; }
        #chatlist .scrollbar { position: relative; float: right; width: 15px; }
        #chatlist .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
        #chatlist .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
        #chatlist .thumb .end { overflow: hidden; height: 5px; width: 13px; }
        #chatlist .disable{ display: none; }
        .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
    </style>
</head>
<body>
    <div id="chatlist" >
        <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
        <div class="overview">
            <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
        </div>
    </div>

    </div>

</body>
</html>
Stephan Zaria
  • 496
  • 5
  • 12