Forgot Password / Register
Site Statistics
Total Members: 520
Total Tutorials: 242
Newsest User: 8884244477
Todays Unique Hits: 489
0 Users 3 Guests Online

Scrollbar Coloring

Heres a javascript I use on some of my sites when I want to affect
the scrollbar color of an object (Use this to comply with W3C standards)

document.getElementById("name").style.scrollbarFaceColor = '#XXXXXX';
document.getElementById("name").style.scrollbarTrackColor = '#XXXXXX';
document.getElementById("name").style.scrollbarArrowColor = '#XXXXXX';
document.getElementById("name").style.scrollbarShadowColor = '#XXXXXX';
document.getElementById("name").style.scrollbar3dLightColor = '#XXXXXX';
document.getElementById("name").style.scrollbarDarkshadowColor = '#XXXXXX';
document.getElementById("name").style.scrollbarHighlightColor = '#XXXXXX';

Where name is replace it with the elements name.
e.x. <div id="blob"></div>
so name would be blob. And the #XXXXXX is the hex value for the color.

Here is CSS to affect scrollbar coloring (wont comply with W3C standards)

scrollbar-face-color : #XXXXXX;
scrollbar-track-color : #XXXXXX;
scrollbar-arrow-color : #XXXXXX;
scrollbar-shadow-color : #XXXXXX;
scrollbar-3dlight-color : #XXXXXX;
scrollbar-darkshadow-color : #XXXXXX;
scrollbar-highlight-color: #XXXXXX;

#XXXXXX is the same as above, the hex value for the color.

TutorialNinja Image
Above image cropped from for example of which property affects
each part of the scrollbar.

I believe this will work in both IE and FF but right now it's only working on IE for me. And yes I got script from there but I didn't feel like using it the way they had it coded, I more use to the way I have it.
There are currently no comments for this tutorial.