UvumiTools Scrollbar Plugin

Remove some text Remove more text Remove long unbroken string Restore text

The Uvumi Scrollbar works like a usual scrollbar but is fully generated with CSS and Javascript, thanks to the Mootools Javascript Framework. Internet Explorer is the only browser that lets you modify scrollbar styles using special CSS properties while other browsers like Firefox are more standards-compliant and don't have the ability to modify what is outside the HTML document.

While it's ok to have a blue/gray scrollbar on the side of the window, sometime you have scrollable containers right in the middle of your page, and you wish those could blend into your yellow and pink CSS theme. Sure, IE will let you do it, but other browsers will throw CSS errors and warnings if you use the IE custom scrollbar rules. If you are stoked on web standards like we are, IE-only CSS properties are simply unacceptable.

With Javascript, you can scroll elements; you can create buttons; you can creates buttons that scroll elements. Then with CSS you can position those buttons where you want, and even better, you can make those buttons the color and size you want. That's it. We can make a scrollbar using buttons!

• Requires no Javascript knowledge: Simply call the script with the the id of the element you want to recieve a scrollbar --it's one line you code that you can copy/past from the How To section.
• Requires no HTML preparation: The script will build the elements necessary for the scrollbar--they don't have to be there from the beginning cluttering up your well-structured code.
• Non-obtrusive: Users who disable Javascript (real users, not bots) will still be able to scroll the content with regular scrollbars, unless you specified the opposite with CSS.
• Cross-Browser Compatible: Tested in the major browsers: Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9.65, Safari 3 and Chrome. All on Windows systems. We didn't get a chance to test on Mac or Linux. If anyone encounters any problems in other browsers/operating systems, please let us know. We only support real browsers -- No need to email us with IE4 or AOL issues. We know about that, and frankly we just don't care.
• Cutomizable with CSS: It's the whole point of those scrollbars, you can make them look how you want, you can have huge buttons if that's what you like. You want bloody skulls instead of nice little arrows? just change the buttons' background images.
• Displays only the necessary scrollbars: If no scrollbar is needed horizontally, the horizontal scrollbar won't be generated. Same thing vertically.
• Can be updated: If the scrollable content is modified, you can call the scrollbar update() function which will adjust the scrollbars to the new content, eventually adding or removing them.
• NEW! More Customization: Now the scrollbar knobs are broken down in three parts : the tips and the filling. This allows you to make some nice rounded knobs. All with CSS. However, using this feature requires to include a special CSS file for Internet Explorer 6 inside conditional comments. Checkout Uvumi Dock Plugin to learn more about his technic

What you'll need :

• A website where you can include javascripts: Sounds obvious, but some platforms don't allow users to include <script> tags. If you are your own webmaster, you're set.
• Scrollable content: You can even apply UvumiTools Scrollbar to the document body, it works.
• Mootools 1.2 only: To use this plugin you'll need Mootools 1.2, but if you are already using another javascript framework like Prototype or JQuery, you may have to decide which one you want to keep because those frameworks were not designed to work together, and they ofen conflict with each other. And yes, you actually do need version 1.2 of Mootools. If you are already using a previous version of Mootools then the plugin will not work unless you upgrade. Sure, upgrading is a hassle, but trust us, it's worth it in the long run.

• Mootools Dependencies: If your website already contains some Mootools 1.2 stuff (from this wesite or elsewhere), that's even better because you can use a single Mootools library for everything. All you'll need is the UvumiTools Scrollbar script, and to make sure your library contains the following classes:

  • Core
    • Core
    • Browser
  • Native
    • Array
    • Function
    • Number
    • String
    • Hash
    • Event
  • Class
    • Class
    • Class.Extra
  • Element
    • Element
    • Element.Event
    • Element.Style
    • Element.Dimensions
  • Utilities
    • Selector
    • DomReady
  • Plugins
    • Drag
    • Slider

Initialization

Arguments

• Element: The element you want to apply the scrollbar to. It can be the element's ID or a pointer to the element object itself.
• Options: an object that will allow you to modify some of the default properties. Like the name says, options are optional. For the live example on top of this page, no argument was passed.

Options

• baseClass: string defining the CSS class name to be applied to the scrollbar wrapper element. That means everything inside this wrapper (all the buttons and bars) will be affected by this class. This is only in case you're going to have several scrollbars styled differently in the same document. Otherwise we recommand you stick to the default class name scrollBar, which matches to downloadable style sheet.

How To

First, you simply import the files provided in the zip archive into your document. While you can insert <script> tags anywhere, we recommend you put them inside the <head> tag:

The script needs at least one element to recieve the scrollbar.

In order get a scrollbar to show up, we must set a fixed height, or the element would simply auto-extend to the content's height. We also set overflow to auto, because on some browser, the default behavior is to show all the content, no matter what. We also give it a border to make the element's boundaries more visible.

Right now, if we put it together, this is what we get

If you open this file in a web browser, you should get something like this:

Then we are ready to execute the script. We just add the following code in our document's head.

Resulting in this complete code:

If you refresh your document, you should get this:

• Click-Drag Selection in IE: We've been able to reproduce all the scroll behaviors, including when you hightlight text : the content will scroll, following your pointer, while you hold the mouse down, letting you selecting all the text... in Firefox, Opera, Safari... but not IE. For some reason, IE didn't let you highlight text when this "auto-scroll on mouse down" was enabled. An event propagation issue. So we prefred to diable it in IE. Its not as cool, but at least it let you select text.

• 20081211 - Version 1.1.0: Big update. Fixed scrollbar's jumpy behavior, now it's all smooth. Added additional CSS customization to the scroll knobs. Stable with Mootools 1.2.1
• 20080818 - Version 1.0.0: Initial release. Stable with Mootools 1.2.