Uvumi Scrollbar 1.1.0
UvumiTools Scrollbar Plugin
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.
new UvumiScrollbar(element, options);
* 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.
* 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.
* 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.
- 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.
- Cross-Browser Compatible:
- Tested in the major browsers: Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3. 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.
In a hurry? Add it to your Download Basket!
What's New in This Release:
- The scrollbar's jumpy behavior has been fixed; now it's all smooth.
- The scroll knobs have additional CSS customization.
- This release is stable with Mootools 1.2.1.