CodeLifter.com - JavaScript Change Scrollbar Color Dynamically Script

Functions:  Changes the color of the scrollbars in a page
            dynamically, via a simple JavaScript function;
            shows how to attach the scrollbar color change
            function to links and to mouseOver and other
            events.
            
Browsers:   IE5.5 and Later (ignored by other browsers)

Author:     etLux
============================================================

Step 1. Optional Style

This is optional. If you leave it out, the browser will show
the standard default color for the scrollbars (usually that
is #C0C0C0).  If you include this style, then you can set
the initial scrollbar color to whatever you wish -- just 
change the #C0C0C0 to whatever color is required.

The <style> ... </style> goes in the head of your
page:

============================================================

Step 2. The Script

Put the following <script ... </script> in the head of 
your page.  No modifications are needed:

// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header

function changeScrollbarColor(C){
  if (document.all){
    document.body.style.scrollbarBaseColor = C
  }   
}

</script>

============================================================

Step 3. Calling the Script

To set the color, just change the #FFFFFF format colors in
the parentheses.  (Careful to get the syntax with the single
and double quotes just right!)

Usually, you'll attach the function to a link.  Here's the
actual code from our page, up above:

<a href="javascript:changeScrollbarColor('#FF0000')">Change to Red</a><br>
<a href="javascript:changeScrollbarColor('#FF8000')">Change to Orange</a><br>
<a href="javascript:changeScrollbarColor('#FFFF00')">Change to Yellow</a><br>
<a href="javascript:changeScrollbarColor('#00FF00')">Change to Green</a><br>
<a href="javascript:changeScrollbarColor('#4444FF')">Change to Blue</a><br>

You can also, of course, call the code from any mouse event;
for instance, try sliding your mouse over this, also from
our page above, for an interesting effect:

<a href="#" onMouseOver="changeScrollbarColor('#FF0000')">Change to Red</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#FF8000')">Change to Orange</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#FFFF00')">Change to Yellow</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#00FF00')">Change to Green</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#4444FF')">Change to Blue</a><br>

Obviously, you can carry this further, using onMouseOut, 
onClick, or other events.

============================================================

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
� 1995-2008 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MP3
Downloads

Contemporary classical music, completely free.