August 31, 2000 - Coloring the Scrollbar's 3D Light | WebReference

August 31, 2000 - Coloring the Scrollbar's 3D Light

Yehuda Shiran August 31, 2000
Coloring the Scrollbar's 3D Light
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Starting from IE 5.5, you can set and modify the color of the scrollbar's 3D light color. The 3D light effect is shown on the scroll box and arrow buttons. Their top and left edges are lighter than their bottom and right edges, creating the illusion that a 3D light source is positioned at the top left corner of the screen. You set the color as follows:

object.style.scrollbar3dLightColor = vColor;

where vColor is a color name or an RGB value.

The following TEXTAREA demonstrates the scrollbar3dLightColor property (works only in IE 5.5 and up). Click one of the two links to the right of the window, and color the 3D lighted edges will turn red or green:

red 3D light green 3D light

Here is how we defined the above TEXTAREA and links:

<TEXTAREA ID="longWord" ROWS="5">
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.scrollbar3dLightColor='red')"><FONT COLOR="red">red 3D light</FONT></A>
<A HREF="javascript:void(longWord.style.scrollbar3dLightColor='green')"><FONT COLOR="green">green 3D light</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).