UvumiTools Scrollbar Plugin
Description
ThisIsAVeryLongUnbrokenStringToTestIfTheHorizontalScrollBarWorksOrNotBecauseItIsAVeryImportantFeatureAndIfITDoesntItSucks
Mahalia Jackson, often called the greatest gospel singer, returned to her hometown to appear at the first New Orleans Jazz & Heritage Festival in April of 1970. While attending the Louisiana Heritage Fair in Congo Square (then known as Beauregard Square), she and Duke Ellington, who also appeared at the event, came upon the Eureka Brass Band leading a crowd of second-line revelers through the Festival grounds. George Wein, producer of the Festival, handed Ms. Jackson a microphone, she sang along with the band and joined the parade... and the spirit of Jazz Fest was born.
This spontaneous, momentous scene--this meeting of jazz and heritage--has stood for decades since as a stirring symbol of the authenticity of the celebration that was destined to become a cultural force.
From the very beginning, the New Orleans Jazz & Heritage Festival was envisioned as an important event that would have great cultural significance and popular appeal. The Festival was the culmination of years of discussions and efforts by city leaders who wanted to create an event worthy of the city's legacy as the birthplace of jazz. A couple of other festivals were held in the years leading up to the first New Orleans Jazz & Heritage Festival, but those events, different in format, did not take hold as the Jazz & Heritage Festival would.
In 1970, George Wein, jazz impresario behind the Newport Jazz Festival and the Newport Folk Festival (begun respectively in 1954 and 1959) was hired to design and produce a unique festival for New Orleans. The New Orleans Jazz & Heritage Foundation, a nonprofit organization, was established to oversee the Festival.
Wein's concept of the Louisiana Heritage Fair--a large daytime fair with multiple stages featuring a wide variety of indigenous music styles, food booths of Louisiana cuisine, and arts and crafts booths, along with an evening concert series--formed a construct that would prove vastly appealing and enduring.
In addition to Mahalia Jackson and Duke Ellington, the first Festival lineup included Pete Fountain, Al Hirt, Clifton Chenier, Fats Domino, The Meters, The Preservation Hall Band, parades every day with The Olympia Brass Band and Mardi Gras Indians, and many others.
In announcing the first Festival, scheduled for April 22 - 26, Wein said, "The New Orleans Jazz & Heritage Festival represents a new and exciting idea in festival presentation. This festival could only be held in New Orleans because here and here alone is the richest musical heritage in America." He also noted, with great prescience, "New Orleans, in the long run, should become bigger than Newport in jazz festivals. Newport was manufactured, but New Orleans is the real thing."
Wein hired Quint Davis and Allison Miner, two young, knowledgeable New Orleans music enthusiasts, to work on the event. Davis would quickly become the main creative force behind the Festival, establishing the event as a dynamic annual showcase of Louisiana music with a bold blend of national and international flavors. Davis remains producer and director of the Festival, guiding the event through its fourth decade of existence. Miner, who passed away in 1995, would make numerous contributions to the Festival's evolution, including the creation of the Music Heritage Stage, which has been renamed in her honor.
In 1970, only about 350 people attended the Festival, about half the number of musicians and other participants in the event. But the Festival, which became known as "Jazz Fest" almost immediately, was a great artistic success. When Jazz Fest was held the next year, it was clear that the event had already outgrown Congo Square.
For the 1972 Festival, the event moved to the infield of the Fair Grounds Race Course, the third-oldest racetrack in America (open since 1872). Jazz Fest would grow quickly over the next few years, constantly expanding its use of the 145-acre site. In 1975, the Festival, still just a five-day event with only three days of the Louisiana Heritage Fair, had an anticipated attendance of 80,000. This was also the first year of the Festival's popular, limited-edition silkscreen poster, now recognized as the most popular poster series in the world.
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!
Features
- 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
Requirements
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
-
Core
How To
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:
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-scrollbar.css"/>
<script type="text/javascript" src="js/mootools-for-scrollbar.js"> </script>
<script type="text/javascript" src="js/UvumiScrollbar.js"> </script>
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.
height:300px;
overflow:auto;
border:1px solid #888;
Right now, if we put it together, this is what we get
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<script type="text/javascript" src="js/mootools-for-scrollbar.js"> </script>
<script type="text/javascript" src="js/UvumiScrollbar.js"> </script>
<style type="text/css">
height:300px;
overflow:auto;
border:1px solid #888;
<body>
If you open this file in a web browser, you should get something like this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis et mi. Praesent pharetra, ligula laoreet molestie vehicula, eros sapien tempus quam, sed faucibus mauris eros ullamcorper purus. Pellentesque elementum dolor eu felis. Aliquam aliquet augue. Duis bibendum dictum elit. Praesent pede eros, auctor vel, porttitor non, suscipit eget, lacus. Aliquam erat volutpat. Cras elit dui, tincidunt at, egestas eu, fringilla ut, dui. Etiam aliquet imperdiet sapien. Cras aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elit ligula, mattis ut, viverra vitae, dignissim gravida, nibh. Suspendisse potenti. Fusce at risus in turpis fringilla egestas. Phasellus a odio ac leo porttitor commodo. Nullam non purus eget urna porta sodales.
Then we are ready to execute the script. We just add the following code in our document's head.
Resulting in this complete code:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<script type="text/javascript" src="js/mootools-for-scrollbar.js"> </script>
<script type="text/javascript" src="js/UvumiScrollbar.js"> </script>
<script type="text/javascript">
<style type="text/css">
height:300px;
overflow:auto;
border:1px solid #888;
<body>
If you refresh your document, you should get this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis et mi. Praesent pharetra, ligula laoreet molestie vehicula, eros sapien tempus quam, sed faucibus mauris eros ullamcorper purus. Pellentesque elementum dolor eu felis. Aliquam aliquet augue. Duis bibendum dictum elit. Praesent pede eros, auctor vel, porttitor non, suscipit eget, lacus. Aliquam erat volutpat. Cras elit dui, tincidunt at, egestas eu, fringilla ut, dui. Etiam aliquet imperdiet sapien. Cras aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elit ligula, mattis ut, viverra vitae, dignissim gravida, nibh. Suspendisse potenti. Fusce at risus in turpis fringilla egestas. Phasellus a odio ac leo porttitor commodo. Nullam non purus eget urna porta sodales.
Known Issues
- 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.
Download
Change Log
- 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.