spacer
Yehuda Shiran August 29, 2000
Coloring Scrollbars
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

Starting from IE 5.5, you can set and modify the color of scrollbars, on the fly. You set the color as follows:

object.style.scrollbarBaseColor = vColor;

where vColor is a color name or an RGB value. This color change affects all elements of the scrollbar: the scroll box, the scroll track, and the scroll arrow buttons.

The following TEXTAREA demonstrates the scrollbarBaseColor property (works only in IE 5.5 and up). Click one of the two links to the right of the window, and color the scrollbar either red or green:

red scrollbars green scrollbars

Here is how we defined the above TEXTAREA and links:

<TEXTAREA ID="longWord" ROWS="10">
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long 
Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long
Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
Long Line 
</TEXTAREA>
<A HREF="javascript:void(longWord.style.scrollbarBaseColor='red')"><FONT COLOR="red">red scrollbars</FONT></A>
<A HREF="javascript:void(longWord.style.scrollbarBaseColor='green')"><FONT COLOR="green">green scrollbars</FONT></A>

Notice the usage of void() above. It is necessary to avoid overwriting of the page with the return value from the javascript: call, which is the property assignment value (red or green).


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint