Scroll Bar

Smart_Phil_Dude
Novice
Joined: Dec 24, 2003
Posts: 23
Status: Offline

January 30th, 2004, 5:54 pm

I need help, how do you change the color of a scrollbar, like the one on the right :arrow:

P.S. I have a bit of trouble with HTML...

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

January 30th, 2004, 5:54 pm

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

January 30th, 2004, 6:07 pm

Here's the code. Note the comment. IE 5.5+ browsers are the only ones that support this:

Code: [ Select ]

<style type="text/css">
/* Scrollbar properties are only supported by Internet Explorer 5.5+ */
body {
scrollbar-3dlight-color : #999999;
scrollbar-arrow-color : #999999;
scrollbar-base-color : #666666;
scrollbar-darkshadow-color : Black;
scrollbar-face-color : #666666;
scrollbar-highlight-color : #999999;
scrollbar-shadow-color : #999999;
scrollbar-track-color : #8B8B8B;
}
</style>

Change the color values to whatever apeal to you.

"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.

musik
Legend
Joined: Aug 06, 2003
Posts: 6892
Loc: up a tree
Status: Offline

January 30th, 2004, 6:29 pm

Hi,

This might make things a little easier for you if your not HTML savvy. You simply choose the colour you want according to the corrosponding section of the scroll bar and it generates the code for you, all you have to do is paste it into the body of your HTML. http://www.vendercom.com/gene_scrollbar.html

Cheers,
Rose

Opportunity To Do - Changing the lives of children around the world.
Rose.id.au - Doing Life.

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

January 30th, 2004, 7:21 pm

Careful with that link folks. Seems like the script works well enough, but doesn't generate the output well enough. I tossed in some random colors and this was the output:

Code: [ Select ]

<html>
<title>:: Vendercom :: HTML Reference - Scrollbar Generator</title>
<head>
<style type=text/css>

</style>
</head>
<body>
</body>
</html>

<html>
<title>:: Vendercom :: HTML Reference - Scrollbar Generator</title>
<head>
<style type=text/css>
<!--
scrollbar-face-color: #CC3399;
scrollbar-highlight-color: #CCCC99;
scrollbar-3dlight-color: #66FF66;
scrollbar-darkshadow-color: #FF9966;
scrollbar-shadow-color: #CC3366;
scrollbar-arrow-color: #3300FF;
scrollbar-track-color: #00CC00;
}
-->
</style>
</head>
<body>
</body>
</html>

It needs to include body and the opening bracket or it won't work -- like this:

Code: [ Select ]

<html>
<title>:: Vendercom :: HTML Reference - Scrollbar Generator</title>
<head>
<style type=text/css>

</style>
</head>
<body>
</body>
</html>

<html>
<title>:: Vendercom :: HTML Reference - Scrollbar Generator</title>
<head>
<style type=text/css>
<!--
body {
scrollbar-face-color: #CC3399;
scrollbar-highlight-color: #CCCC99;
scrollbar-3dlight-color: #66FF66;
scrollbar-darkshadow-color: #FF9966;
scrollbar-shadow-color: #CC3366;
scrollbar-arrow-color: #3300FF;
scrollbar-track-color: #00CC00;
}
-->
</style>
</head>
<body>
</body>
</html>

musik
Legend
Joined: Aug 06, 2003
Posts: 6892
Loc: up a tree
Status: Offline

January 31st, 2004, 2:00 am

ahh fair enough... I never noticed that - here is one that generates just the code you need and no sneaky advertising

http://handsonline.net/toolbox/jscrollbars.htm

Thanks atno for the heads up

Cheers,
rose

Opportunity To Do - Changing the lives of children around the world.
Rose.id.au - Doing Life.

Smart_Phil_Dude
Novice
Joined: Dec 24, 2003
Posts: 23
Status: Offline

February 1st, 2004, 10:46 am

Thanks dudes

b0ksah
Newbie
Joined: Feb 05, 2004
Posts: 10
Loc: Aarhus, Denmark
Status: Offline

February 5th, 2004, 7:16 am

What about drop down boxes ?

Can you change style on them ? I don't mean the elements in the dropdown menu .. but the dropdown botton

digitalMedia
a.k.a. dM
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

February 5th, 2004, 9:19 am

your limited to what you can do with drop downs, for some reason. You can set font, font size, background but not the button or scroll style, to my knowledge. The only option I know of is to creat a DHTML drop down menu as a replacement for the intrinsic HTML control.

I'd love to find out if someone does know how to alter the appearance of this control

I do hope I'm wrong.

- dM

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

February 5th, 2004, 9:22 am

I think you have it just about right digitalMedia.

b0ksah
Newbie
Joined: Feb 05, 2004
Posts: 10
Loc: Aarhus, Denmark
Status: Offline

February 5th, 2004, 9:28 am

*Biiip* *biiip* and *biip* ... and *biip* grr

/me kicks W3C and M$ :evil:

Smart_Phil_Dude
Novice
Joined: Dec 24, 2003
Posts: 23
Status: Offline

February 9th, 2004, 6:52 pm

kool

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

February 9th, 2004, 7:27 pm

b0ksah wrote:

/me kicks W3C and M$ :evil:

I remember seeing that reply a couple days ago, but just looked at it again. I wouldn't blaim W3C. I'd blaim Microsoft. W3C makes the standards and then M$ ignores them and does what they want anyway -- although I give them credit -- they were the first to come up with a browser that really did comply. Unfortunately they teased us with the scrollbar thing. I'm not sure why W3C hasn't added that yet. I think it should be added for dropdown menus, too.

But here's what's interesting. I'm sitting here typing this post and made sure I went long enough to see it, but the scrollbar in a text box for posting (like we have here) does inherit the same scrollbar attributes as the main page. Interesting -- I just noticed that.

UNFLUX
Genius
Joined: Dec 20, 2002
Posts: 6382
Loc: twitter.com/unflux
Status: Offline

February 9th, 2004, 10:00 pm

atno -- yes it does

UNFLUX.FOTO

joebert
Sledgehammer
Joined: Feb 10, 2004
Posts: 13455
Loc: Florida
Status: Offline

February 14th, 2004, 5:34 pm

Well since textarea scrollbars inherit the same properties as the body, and were able to change the properties of T-A S-bars on the fly, i wrote a real-time S-bar color tester. It lacks a color picker but it automatically updates colors when a whole value is entered, replaces non-valid chars with "F" EX: "@pAT?Y" gets replaced with "FFAFFF", converts lowercase values to upper (FFF is easier to see than fff), outputs clean one line code that can be pasted into body{} &OR specialized textarea{} classes with ease, selects code area as soon as process is clicked(one less button to click), and best of all it's right here for you to C&P&save as HTML on your desktop (3.86KB) Feel free to use as you wish, i wrote this by hand from scratch so theres no copyright or anything on it. IE 5.5+ Only.
(note: i forgot to include the spacebar in the banned chars list)

Code: [ Select ]

<html>
<head>
<script language="javascript">

    function update(part,val) {
        if(part == 1) {
            TA.style.scrollbarDarkShadowColor = "#" + val;
        }if(part == 2) {
            TA.style.scrollbarShadowColor = "#" + val;
        }if(part == 3) {
            TA.style.scrollbar3dLightColor = "#" + val;
        }if(part == 4) {
            TA.style.scrollbarHighlightColor = "#" + val;
        }if(part == 5) {
            TA.style.scrollbarFaceColor = "#" + val;
        }if(part == 6) {
            TA.style.scrollbarTrackColor = "#" + val;
        }if(part == 7) {
            TA.style.scrollbarArrowColor = "#" + val;
        }
    }

    function check(part,val) {
        if(val.value.length == 6) {
            val2 = "";
            for(i = 0; i < 6; i++) {
            x = val.value.charAt(i);
            if((x >= "a" && x <= "f") || (x >= "A" && x <= "F") || (x >= 0 && x <=9)) {
                val2 += x;
            }else{
                val2 += "F";
            }
            }
            val.value = val2.toUpperCase();
            update(part,val2.toUpperCase());
        }
    }

    function defaultStyle() {
        if(confirm("Are you sure you want to Clear ALL fields ?")) {
            TA.style.scrollbarDarkShadowColor="";
            TA.style.scrollbarShadowColor="";
            TA.style.scrollbar3dLightColor="";
            TA.style.scrollbarHighlightColor="";
            TA.style.scrollbarFaceColor="";
            TA.style.scrollbarTrackColor="";
            TA.style.scrollbarArrowColor="";
            choice = true;
        }else{
            choice = false;
        }
    }

    function process(F) {
        F.out.value = "";
        if(F.dshadow.value.length == 6) {
            F.out.value += "scrollbar-darkshadow-color: #" + F.dshadow.value + ";";
        }
        if(F.shadow.value.length == 6) {
            F.out.value += "scrollbar-shadow-color: #" + F.shadow.value + ";";
        }
        if(F.d3light.value.length == 6) {
            F.out.value += "scrollbar-3dlight-color: #" + F.d3light.value + ";";
        }
        if(F.highlight.value.length == 6) {
            F.out.value += "scrollbar-highlight-color: #" + F.highlight.value + ";";
        }
        if(F.face.value.length == 6) {
            F.out.value += "scrollbar-face-color: #" + F.face.value + ";";
        }
        if(F.trackin.value.length == 6) {
            F.out.value += "scrollbar-track-color: #" + F.trackin.value + ";";
        }
        if(F.arrowin.value.length == 6) {
            F.out.value += "scrollbar-arrow-color: #" + F.arrowin.value + ";";
        }
    F.out.select();
    }
</script>
<style>
body {font-family: Verdana; font-size: 11px;}
input {font-family: Verdana;}
textarea {font-family: Verdana;}
.testarea {position: absolute; left: 150px; top: 83px; color: #FFFFFF;}
.form {position: absolute; left: 10px; top: 50px;}
</style>
</head>

<body>
<div class="form"><form id="sbform" onSubmit="return false;">
# <input id="dshadow" type="text" size="7" maxlength="6" onKeyDown="check(1,this);" onKeyUp="check(1,this);"> Dark Shadow<BR>
# <input id="shadow" type="text" size="7" maxlength="6" onKeyDown="check(2,this);" onKeyUp="check(2,this);"> Shadow<BR>
# <input id="d3light" type="text" size="7" maxlength="6" onKeyDown="check(3,this);" onKeyUp="check(3,this);"> 3D Light<BR>
# <input id="highlight" type="text" size="7" maxlength="6" onKeyDown="check(4,this);" onKeyUp="check(4,this);"> Highlight<BR>
# <input id="face" type="text" size="7" maxlength="6" onKeyDown="check(5,this);" onKeyUp="check(5,this);"> Face<BR>
# <input id="trackin" type="text" size="7" maxlength="6" onKeyDown="check(6,this);" onKeyUp="check(6,this);"> Track<BR>
# <input id="arrowin" type="text" size="7" maxlength="6" onKeyDown="check(7,this);" onKeyUp="check(7,this);"> Arrow<BR>
<BR><BR><input type="reset" value="Reset" onClick="defaultStyle();return choice;"> 
<input type="button" value="Process" onClick="process(this.form);"><BR><BR>
<textarea id="out" cols="30" rows="8" onFocus="select();"></textarea>
</form></div>
<textarea id="TA" class="testarea" cols="10" rows="8">There was a farmer had a dog and bingo was his nameo, b, i, n, g, o,
b, i, n, g, o, b, i, n, g, o, and bingo was his nameo.</textarea>

</body>
</html>

<html>
<head>
<script language="javascript">
function update(part,val) {
if(part == 1) {
TA.style.scrollbarDarkShadowColor = "#" + val;
}if(part == 2) {
TA.style.scrollbarShadowColor = "#" + val;
}if(part == 3) {
TA.style.scrollbar3dLightColor = "#" + val;
}if(part == 4) {
TA.style.scrollbarHighlightColor = "#" + val;
}if(part == 5) {
TA.style.scrollbarFaceColor = "#" + val;
}if(part == 6) {
TA.style.scrollbarTrackColor = "#" + val;
}if(part == 7) {
TA.style.scrollbarArrowColor = "#" + val;
}
}
function check(part,val) {
if(val.value.length == 6) {
val2 = "";
for(i = 0; i < 6; i++) {
x = val.value.charAt(i);
if((x >= "a" && x <= "f") || (x >= "A" && x <= "F") || (x >= 0 && x <=9)) {
val2 += x;
}else{
val2 += "F";
}
}
val.value = val2.toUpperCase();
update(part,val2.toUpperCase());
}
}
function defaultStyle() {
if(confirm("Are you sure you want to Clear ALL fields ?")) {
TA.style.scrollbarDarkShadowColor="";
TA.style.scrollbarShadowColor="";
TA.style.scrollbar3dLightColor="";
TA.style.scrollbarHighlightColor="";
TA.style.scrollbarFaceColor="";
TA.style.scrollbarTrackColor="";
TA.style.scrollbarArrowColor="";
choice = true;
}else{
choice = false;
}
}
function process(F) {
F.out.value = "";
if(F.dshadow.value.length == 6) {
F.out.value += "scrollbar-darkshadow-color: #" + F.dshadow.value + ";";
}
if(F.shadow.value.length == 6) {
F.out.value += "scrollbar-shadow-color: #" + F.shadow.value + ";";
}
if(F.d3light.value.length == 6) {
F.out.value += "scrollbar-3dlight-color: #" + F.d3light.value + ";";
}
if(F.highlight.value.length == 6) {
F.out.value += "scrollbar-highlight-color: #" + F.highlight.value + ";";
}
if(F.face.value.length == 6) {
F.out.value += "scrollbar-face-color: #" + F.face.value + ";";
}
if(F.trackin.value.length == 6) {
F.out.value += "scrollbar-track-color: #" + F.trackin.value + ";";
}
if(F.arrowin.value.length == 6) {
F.out.value += "scrollbar-arrow-color: #" + F.arrowin.value + ";";
}
F.out.select();
}
</script>
<style>
body {font-family: Verdana; font-size: 11px;}
input {font-family: Verdana;}
textarea {font-family: Verdana;}
.testarea {position: absolute; left: 150px; top: 83px; color: #FFFFFF;}
.form {position: absolute; left: 10px; top: 50px;}
</style>
</head>
<body>
<div class="form"><form id="sbform" onSubmit="return false;">
# <input id="dshadow" type="text" size="7" maxlength="6" onKeyDown="check(1,this);" onKeyUp="check(1,this);"> Dark Shadow<BR>
# <input id="shadow" type="text" size="7" maxlength="6" onKeyDown="check(2,this);" onKeyUp="check(2,this);"> Shadow<BR>
# <input id="d3light" type="text" size="7" maxlength="6" onKeyDown="check(3,this);" onKeyUp="check(3,this);"> 3D Light<BR>
# <input id="highlight" type="text" size="7" maxlength="6" onKeyDown="check(4,this);" onKeyUp="check(4,this);"> Highlight<BR>
# <input id="face" type="text" size="7" maxlength="6" onKeyDown="check(5,this);" onKeyUp="check(5,this);"> Face<BR>
# <input id="trackin" type="text" size="7" maxlength="6" onKeyDown="check(6,this);" onKeyUp="check(6,this);"> Track<BR>
# <input id="arrowin" type="text" size="7" maxlength="6" onKeyDown="check(7,this);" onKeyUp="check(7,this);"> Arrow<BR>
<BR><BR><input type="reset" value="Reset" onClick="defaultStyle();return choice;"> 
<input type="button" value="Process" onClick="process(this.form);"><BR><BR>
<textarea id="out" cols="30" rows="8" onFocus="select();"></textarea>
</form></div>
<textarea id="TA" class="testarea" cols="10" rows="8">There was a farmer had a dog and bingo was his nameo, b, i, n, g, o,
b, i, n, g, o, b, i, n, g, o, and bingo was his nameo.</textarea>
</body>
</html>

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

February 14th, 2004, 5:49 pm

Wow! That was very kind of you to offer that, joebert. I just saved it, tested it and it works like a charm. I will most certainly use that for experimenting with scrollbar color combos in the future. A most excellent guesture! Thank you.

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

February 14th, 2004, 5:49 pm

1, 2

To Reply to this topic you need to LOGIN or REGISTER. It is free.

Post Information

Total Posts in this topic: 19 posts
Users browsing this forum: No registered users and 230 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Scroll Bar

Post Information

Sponsored Links

Other Languages

Website Development

Graphics

OS & Hardware

Internet Marketing

Marketplace

Community Area

Ozzu Maintenance

Forum Network

Forum Partners

Other Information