Scroll Bar

  • Smart_Phil_Dude
  • Novice
  • Novice
  • Smart_Phil_Dude
  • Posts: 23

Post 3+ Months Ago

:evil: :cry:
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
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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>
  1. <style type="text/css">
  2. /* Scrollbar properties are only supported by Internet Explorer 5.5+ */
  3. body {
  4.     scrollbar-3dlight-color : #999999;
  5.     scrollbar-arrow-color : #999999;
  6.     scrollbar-base-color : #666666;
  7.     scrollbar-darkshadow-color : Black;
  8.     scrollbar-face-color : #666666;
  9.     scrollbar-highlight-color : #999999;
  10.     scrollbar-shadow-color : #999999;
  11.     scrollbar-track-color : #8B8B8B;
  12. }
  13. </style>


Change the color values to whatever apeal to you.
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

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
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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>
<!--
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>
  1. <html>
  2. <title>:: Vendercom :: HTML Reference - Scrollbar Generator</title>
  3. <head>
  4. <style type=text/css>
  5. <!--
  6. scrollbar-face-color: #CC3399;
  7. scrollbar-highlight-color: #CCCC99;
  8. scrollbar-3dlight-color: #66FF66;
  9. scrollbar-darkshadow-color: #FF9966;
  10. scrollbar-shadow-color: #CC3366;
  11. scrollbar-arrow-color: #3300FF;
  12. scrollbar-track-color: #00CC00;
  13. }
  14. -->
  15. </style>
  16. </head>
  17. <body>
  18. </body>
  19. </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>
<!--
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>
  1. <html>
  2. <title>:: Vendercom :: HTML Reference - Scrollbar Generator</title>
  3. <head>
  4. <style type=text/css>
  5. <!--
  6. body {
  7. scrollbar-face-color: #CC3399;
  8. scrollbar-highlight-color: #CCCC99;
  9. scrollbar-3dlight-color: #66FF66;
  10. scrollbar-darkshadow-color: #FF9966;
  11. scrollbar-shadow-color: #CC3366;
  12. scrollbar-arrow-color: #3300FF;
  13. scrollbar-track-color: #00CC00;
  14. }
  15. -->
  16. </style>
  17. </head>
  18. <body>
  19. </body>
  20. </html>
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

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

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


Thanks atno for the heads up :)


Cheers,
rose
  • Smart_Phil_Dude
  • Novice
  • Novice
  • Smart_Phil_Dude
  • Posts: 23

Post 3+ Months Ago

Thanks dudes :)
  • b0ksah
  • Newbie
  • Newbie
  • b0ksah
  • Posts: 10
  • Loc: Aarhus, Denmark

Post 3+ Months Ago

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 Image
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I think you have it just about right digitalMedia.
  • b0ksah
  • Newbie
  • Newbie
  • b0ksah
  • Posts: 10
  • Loc: Aarhus, Denmark

Post 3+ Months Ago

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

/me kicks W3C and M$ :evil:

;)
  • Smart_Phil_Dude
  • Novice
  • Novice
  • Smart_Phil_Dude
  • Posts: 23

Post 3+ Months Ago

kool :)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

atno -- yes it does ;)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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;">
#&nbsp;<input id="dshadow" type="text" size="7" maxlength="6" onKeyDown="check(1,this);" onKeyUp="check(1,this);">&nbsp;Dark Shadow<BR>
#&nbsp;<input id="shadow" type="text" size="7" maxlength="6" onKeyDown="check(2,this);" onKeyUp="check(2,this);">&nbsp;Shadow<BR>
#&nbsp;<input id="d3light" type="text" size="7" maxlength="6" onKeyDown="check(3,this);" onKeyUp="check(3,this);">&nbsp;3D Light<BR>
#&nbsp;<input id="highlight" type="text" size="7" maxlength="6" onKeyDown="check(4,this);" onKeyUp="check(4,this);">&nbsp;Highlight<BR>
#&nbsp;<input id="face" type="text" size="7" maxlength="6" onKeyDown="check(5,this);" onKeyUp="check(5,this);">&nbsp;Face<BR>
#&nbsp;<input id="trackin" type="text" size="7" maxlength="6" onKeyDown="check(6,this);" onKeyUp="check(6,this);">&nbsp;Track<BR>
#&nbsp;<input id="arrowin" type="text" size="7" maxlength="6" onKeyDown="check(7,this);" onKeyUp="check(7,this);">&nbsp;Arrow<BR>
<BR><BR><input type="reset" value="Reset" onClick="defaultStyle();return choice;">&nbsp;
<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>
  1. <html>
  2. <head>
  3. <script language="javascript">
  4.     function update(part,val) {
  5.         if(part == 1) {
  6.             TA.style.scrollbarDarkShadowColor = "#" + val;
  7.         }if(part == 2) {
  8.             TA.style.scrollbarShadowColor = "#" + val;
  9.         }if(part == 3) {
  10.             TA.style.scrollbar3dLightColor = "#" + val;
  11.         }if(part == 4) {
  12.             TA.style.scrollbarHighlightColor = "#" + val;
  13.         }if(part == 5) {
  14.             TA.style.scrollbarFaceColor = "#" + val;
  15.         }if(part == 6) {
  16.             TA.style.scrollbarTrackColor = "#" + val;
  17.         }if(part == 7) {
  18.             TA.style.scrollbarArrowColor = "#" + val;
  19.         }
  20.     }
  21.     function check(part,val) {
  22.         if(val.value.length == 6) {
  23.             val2 = "";
  24.             for(i = 0; i < 6; i++) {
  25.             x = val.value.charAt(i);
  26.             if((x >= "a" && x <= "f") || (x >= "A" && x <= "F") || (x >= 0 && x <=9)) {
  27.                 val2 += x;
  28.             }else{
  29.                 val2 += "F";
  30.             }
  31.             }
  32.             val.value = val2.toUpperCase();
  33.             update(part,val2.toUpperCase());
  34.         }
  35.     }
  36.     function defaultStyle() {
  37.         if(confirm("Are you sure you want to Clear ALL fields ?")) {
  38.             TA.style.scrollbarDarkShadowColor="";
  39.             TA.style.scrollbarShadowColor="";
  40.             TA.style.scrollbar3dLightColor="";
  41.             TA.style.scrollbarHighlightColor="";
  42.             TA.style.scrollbarFaceColor="";
  43.             TA.style.scrollbarTrackColor="";
  44.             TA.style.scrollbarArrowColor="";
  45.             choice = true;
  46.         }else{
  47.             choice = false;
  48.         }
  49.     }
  50.     function process(F) {
  51.         F.out.value = "";
  52.         if(F.dshadow.value.length == 6) {
  53.             F.out.value += "scrollbar-darkshadow-color: #" + F.dshadow.value + ";";
  54.         }
  55.         if(F.shadow.value.length == 6) {
  56.             F.out.value += "scrollbar-shadow-color: #" + F.shadow.value + ";";
  57.         }
  58.         if(F.d3light.value.length == 6) {
  59.             F.out.value += "scrollbar-3dlight-color: #" + F.d3light.value + ";";
  60.         }
  61.         if(F.highlight.value.length == 6) {
  62.             F.out.value += "scrollbar-highlight-color: #" + F.highlight.value + ";";
  63.         }
  64.         if(F.face.value.length == 6) {
  65.             F.out.value += "scrollbar-face-color: #" + F.face.value + ";";
  66.         }
  67.         if(F.trackin.value.length == 6) {
  68.             F.out.value += "scrollbar-track-color: #" + F.trackin.value + ";";
  69.         }
  70.         if(F.arrowin.value.length == 6) {
  71.             F.out.value += "scrollbar-arrow-color: #" + F.arrowin.value + ";";
  72.         }
  73.     F.out.select();
  74.     }
  75. </script>
  76. <style>
  77. body {font-family: Verdana; font-size: 11px;}
  78. input {font-family: Verdana;}
  79. textarea {font-family: Verdana;}
  80. .testarea {position: absolute; left: 150px; top: 83px; color: #FFFFFF;}
  81. .form {position: absolute; left: 10px; top: 50px;}
  82. </style>
  83. </head>
  84. <body>
  85. <div class="form"><form id="sbform" onSubmit="return false;">
  86. #&nbsp;<input id="dshadow" type="text" size="7" maxlength="6" onKeyDown="check(1,this);" onKeyUp="check(1,this);">&nbsp;Dark Shadow<BR>
  87. #&nbsp;<input id="shadow" type="text" size="7" maxlength="6" onKeyDown="check(2,this);" onKeyUp="check(2,this);">&nbsp;Shadow<BR>
  88. #&nbsp;<input id="d3light" type="text" size="7" maxlength="6" onKeyDown="check(3,this);" onKeyUp="check(3,this);">&nbsp;3D Light<BR>
  89. #&nbsp;<input id="highlight" type="text" size="7" maxlength="6" onKeyDown="check(4,this);" onKeyUp="check(4,this);">&nbsp;Highlight<BR>
  90. #&nbsp;<input id="face" type="text" size="7" maxlength="6" onKeyDown="check(5,this);" onKeyUp="check(5,this);">&nbsp;Face<BR>
  91. #&nbsp;<input id="trackin" type="text" size="7" maxlength="6" onKeyDown="check(6,this);" onKeyUp="check(6,this);">&nbsp;Track<BR>
  92. #&nbsp;<input id="arrowin" type="text" size="7" maxlength="6" onKeyDown="check(7,this);" onKeyUp="check(7,this);">&nbsp;Arrow<BR>
  93. <BR><BR><input type="reset" value="Reset" onClick="defaultStyle();return choice;">&nbsp;
  94. <input type="button" value="Process" onClick="process(this.form);"><BR><BR>
  95. <textarea id="out" cols="30" rows="8" onFocus="select();"></textarea>
  96. </form></div>
  97. <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,
  98. b, i, n, g, o, b, i, n, g, o, and bingo was his nameo.</textarea>
  99. </body>
  100. </html>
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

agreed. very nice utility. thank you.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

No problem, thanks for the feedback :D
  • vstroud
  • Born
  • Born
  • vstroud
  • Posts: 1
  • Loc: Alaska

Post 3+ Months Ago

I have a question concerning scroll bars and their attributes :oops:

I know I have done it before and even seen the code for it but for the life of me I can not find it.....

How on earth do you change the size of the scroll bar???

Thanks so much!
Veronica
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

If you mean on your machine and you're using a Windows OS, you would right click on your desktop (one method) and choose 'properties'. Select the appearance tab. In the 'Item' drop down choose 'Scrollbars' and then adjust the 'Size' parameter for that item.

I don't believe you can change the size of the clients scrollbar in a browser, short of creating a custom scroll bar using DHTML or Flash.

Post Information

  • Total Posts in this topic: 19 posts
  • Users browsing this forum: No registered users and 80 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.