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

Requirements

What you'll need :

How To

Initialization

new UvumiScrollbar(element, options);

Arguments

Options

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:

<head>
<!-- Insert these lines in your document's head -->
<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>
</head>

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

<div id="scrollable">
<p>
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.
</p>
</div>

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.

<style type="text/css">
div#scrollable{
width:300px;
height:300px;
overflow:auto;
border:1px solid #888;
}
</style>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<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>
<style type="text/css">
div#scrollable{
width:300px;
height:300px;
overflow:auto;
border:1px solid #888;
}
</style>
</head>
<body>
<div id="scrollable" >
<p>
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.
</p>
</div>
</body>
</html>

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.

<script type="text/javascript">
var myScrollbar = new UvumiScrollbar('scrollable');
</script>

Resulting in this complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<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>
<script type="text/javascript">
var myScrollbar = new UvumiScrollbar('scrollable');
</script>
<style type="text/css">
div#scrollable{
width:300px;
height:300px;
overflow:auto;
border:1px solid #888;
}
</style>
</head>
<body>
<div id="scrollable" >
<p>
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.
</p>
</div>
</body>
</html>

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

Download

Change Log