colour scroll bars [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : colour scroll bars

daveago_forlan

09-05-2003, 09:41 AM

hi all
wounder if anyone can give me a hand to modify this code I'm still very new to javascript and I'm trying to add red scroll bars to my site instead of the dull grey ones that are everywhere on the net, Can anyone help:confused:

this is the code foir the scroll bar text box I'm trying to alter:

<textarea cols=50 rows=5 style="border: 1pt red solid">
enter text here!
</textarea>

Thankx
Dave

ColdSteel

09-05-2003, 11:55 AM

Uh....first of all, I am not totally sure how to make a red scrollbar on a textarea...but there is one thing that you may be interested in while we are on the subject of colored scrollbars....I am not sure if you know how to make a colored scrollbar of the actual site...but here is the basics; it is done in cascade style sheets (or CSS)...some sample code below:

<STYLE type="text/css">

</STYLE>

...the part that says "silver" can be replaced with either hexadecimal values of colors or the 16 predefined colors....hope this helps...

pyro

09-05-2003, 12:11 PM

Coloring the scrollbars is IE proprietary crap... You can find more info on it at http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm if you really think it's a good idea.

The predefined CSS colors can be found at http://www.w3.org/TR/REC-CSS2/syndata.html#color-units

sciguyryan

09-05-2003, 12:45 PM

hi,

pyro seeing as so many people are aking about changing colours perhaps you could add it to webdevfaqs and provide a link instead of writing out the code every time...?

PERHAPS, perhaps, prehaps...

Shampie

09-05-2003, 12:55 PM

GIving the colors and stuff like that to objects isn't that css??
add a class="classname" in the object tag
// css script part
.info {
font-size:10pt;
color:#FF0000;
}

// end of part
now to the object add the class tag.
<input name="objectx" type="text" value="" class="info">

Check this site:
http://www.flws.com.au/showusyourcode/codeLib/code/Scrollbar.asp?catID=4

pyro

09-05-2003, 01:03 PM

Originally posted by sciguyryan
pyro seeing as so many people are aking about changing colours perhaps you could add it to webdevfaqs and provide a link instead of writing out the code every time...? We are trying to keep the Web Dev FAQs a bit more standards compliant. I suppose we could add it and mark it as proprietary code, but it doesn't get asked often enough to justify filling the site with non-standard code...

bigal

09-06-2003, 05:04 AM

If you want a colourful scrollbar for you page, use colorscroll!

to save you downloading this, try this:
put this between the <head> and </head> tags

<style type="text/css">

</style>

Bungholio

11-13-2003, 01:22 PM

hey fellas, hope you get notified of this reply :)

in my search for a solution to have valid css and stil get my color'd scrollbars, i came across this:

function doscrolls(){
if (document.all && document.getElementById){
document.body.style.scrollbarFaceColor="#000000";
document.body.style.scrollbarArrowColor="#FFFFFF";
document.body.style.scrollbarHighlightColor="#FFFFFF";
document.body.style.scrollbar3dlightColor="#000000";
document.body.style.scrollbarDarkshadowColor="#000000";
document.body.style.scrollbarTrackColor="#999999";
document.body.style.scrollbarShadowColor="#FFFFFF";
}
}

seems to work fine in IE6 ... would JavaScript xprtz like to add to this? I dont really know Javascript =/ ...

Al

(i might post this as a new thread if i get no reply)

Bungholio

11-13-2003, 01:26 PM

.. i guess since only IE accepts color'd scrollbars it doesnt matter if the script is cross browser

however, that script only seems to change scrollbars of say, layers, while the main window scrollbar color doesnt change ... any ideas anyone?

bigal

11-13-2003, 03:36 PM

Talk about bumping a topic, jeeze! :eek:

heh, all those ideas work, but my earlier post i used and it does the page ones! :)

Paul Jr

11-13-2003, 03:52 PM

This should work for you.

<style type="text/css">
.textarea {
scrollbar-face-color:#FF0000;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#C0C0C0;
scrollbar-shadow-color:#2F2F2F;
scrollbar-darkshadow-color:#404040;
scrollbar-track-color:FF0000;
scrollbar-arrow-color:000000;
border: 1pt red solid
}
</style>

Then...

<textarea cols="50" rows="5" class="textarea">
enter text here!
</textarea>

If it doesn't work...then, I dunno. Works in IE6.

Bungholio

11-14-2003, 11:33 PM

again, if u want valid css, that JS method works :)