Scrollbar Colors ScriptWriter

David Antonacci Nov 15, 2001

IE 5.5+ allows you to change the colors of scroll bars in a textarea tag or the browser window. Select the colors you want for the respective scroll bar attributes and see how they will look. Then, switch the "Show Source" to "Yes", re-submit, and the code will appear in a new window. Pretty neat!

"); // close the document new_window.document.close(); } }

Base	Arrow	Dark Shadow	Face
Highlight	Shadow	3dlight	Show Source

The JavaScript Source: Page Details: Scrollbar Colors ScriptWriter

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- ONE STEP TO INSTALL SCROLLBAR COLORS SCRIPTWRITER:

1.  Copy the coding into the BODY of your HTML document  -->

<BODY>

<!-- Begin
function change_colors()
{
text_area.style.scrollbarBaseColor=document.c_form.BaseColor.value
text_area.style.scrollbarArrowColor=document.c_form.ArrowColor.value
text_area.style.scrollbarDarkShadowColor=document.c_form.DarkShadowColor.value
text_area.style.scrollbarFaceColor=document.c_form.FaceColor.value
text_area.style.scrollbarHighlightColor=document.c_form.HighlightColor.value
text_area.style.scrollbarShadowColor=document.c_form.ShadowColor.value
text_area.style.scrollbar3DLightColor=document.c_form.dlightColor.value
if (document.c_form.show_text.value == "Yes")
{
new_window = open("","displayWindow","width=500,height=400,left=10,top=10");

// open new document
  new_window.document.open();
// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript ScrollBar Code</title>");
new_window.document.write("<body bgcolor=\"#FFFFFF\">");
new_window.document.write("<br>");
new_window.document.write("<html><br>");
new_window.document.write("<body><br>");
new_window.document.write("<script language=\"JavaScript\"><br>");
new_window.document.write("<br>");
new_window.document.write("</script><br>");
new_window.document.write("</body><br>");
new_window.document.write("</html><br>");
new_window.document.write("</body></html>");
// close the document
  new_window.document.close();
}
}
//  End -->
</script>

<center>
<textarea name="text_area" cols="45" rows="5">
Four score and seven years ago our fathers
brought forth on this continent a new nation,
conceived in liberty and dedicated to the
proposition that all men are created equal.
Now we are engaged in a great civil war,
testing whether that nation or any nation so
conceived and so dedicated can long endure.
</textarea>
</center>

<div align="center">
<center>
<table width="450">
<tr><td align="center" valign="top" width="112" nowrap>
<form name="c_form">
<div align="center">Base<br>
<select name="BaseColor">
<option value="">None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#008000">Green</option>
<option value="#800000">Maroon</option>
<option value="#808000">Olive</option>
<option value="#000080">Navy</option>
<option value="#800080">Purple</option>
<option value="#808080">Grey</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Lime</option>
<option value="#00FFFF">Aqua</option>
<option value="#FF00FF">Fushia</option>
<option value="#C0C0C0">Silver</option>
<option value="#FF0000">Red</option>
<option value="#0000FF">Blue</option>
<option value="#008080">Teal</option>
</select>

</td><td align="center" valign="top" width="112" nowrap>
Arrow
<br>
<select name="ArrowColor">
<option value="">None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#008000">Green</option>
<option value="#800000">Maroon</option>
<option value="#808000">Olive</option>
<option value="#000080">Navy</option>
<option value="#800080">Purple</option>
<option value="#808080">Grey</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Lime</option>
<option value="#00FFFF">Aqua</option>
<option value="#FF00FF">Fushia</option>
<option value="#C0C0C0">Silver</option>
<option value="#FF0000">Red</option>
<option value="#0000FF">Blue</option>
<option value="#008080">Teal</option>
</select>

</td><td align="center" valign="top" width="112" nowrap>
Dark Shadow
<br>
<select name="DarkShadowColor">
<option value="">None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#008000">Green</option>
<option value="#800000">Maroon</option>
<option value="#808000">Olive</option>
<option value="#000080">Navy</option>
<option value="#800080">Purple</option>
<option value="#808080">Grey</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Lime</option>
<option value="#00FFFF">Aqua</option>
<option value="#FF00FF">Fushia</option>
<option value="#C0C0C0">Silver</option>
<option value="#FF0000">Red</option>
<option value="#0000FF">Blue</option>
<option value="#008080">Teal</option>
</select>

</td>
<td align="center" valign="top" width="112" nowrap>
Face
<br>
<select name="FaceColor">
<option value="">None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#008000">Green</option>
<option value="#800000">Maroon</option>
<option value="#808000">Olive</option>
<option value="#000080">Navy</option>
<option value="#800080">Purple</option>
<option value="#808080">Grey</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Lime</option>
<option value="#00FFFF">Aqua</option>
<option value="#FF00FF">Fushia</option>
<option value="#C0C0C0">Silver</option>
<option value="#FF0000">Red</option>
<option value="#0000FF">Blue</option>
<option value="#008080">Teal</option>
</select>

</td></tr>
<tr><td align="center" valign="top" width="112" nowrap>
Highlight
<br>
<select name="HighlightColor">
<option value="">None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#008000">Green</option>
<option value="#800000">Maroon</option>
<option value="#808000">Olive</option>
<option value="#000080">Navy</option>
<option value="#800080">Purple</option>
<option value="#808080">Grey</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Lime</option>
<option value="#00FFFF">Aqua</option>
<option value="#FF00FF">Fushia</option>
<option value="#C0C0C0">Silver</option>
<option value="#FF0000">Red</option>
<option value="#0000FF">Blue</option>
<option value="#008080">Teal</option>
</select>

</td><td align="center" valign="top" width="112" nowrap>
Shadow
<br>
<select name="ShadowColor">
<option value="">None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#008000">Green</option>
<option value="#800000">Maroon</option>
<option value="#808000">Olive</option>
<option value="#000080">Navy</option>
<option value="#800080">Purple</option>
<option value="#808080">Grey</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Lime</option>
<option value="#00FFFF">Aqua</option>
<option value="#FF00FF">Fushia</option>
<option value="#C0C0C0">Silver</option>
<option value="#FF0000">Red</option>
<option value="#0000FF">Blue</option>
<option value="#008080">Teal</option>
</select>

</td><td align="center" valign="top" width="112" nowrap>
3dlight
<br>
<select name="dlightColor">
<option value="">None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#008000">Green</option>
<option value="#800000">Maroon</option>
<option value="#808000">Olive</option>
<option value="#000080">Navy</option>
<option value="#800080">Purple</option>
<option value="#808080">Grey</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Lime</option>
<option value="#00FFFF">Aqua</option>
<option value="#FF00FF">Fushia</option>
<option value="#C0C0C0">Silver</option>
<option value="#FF0000">Red</option>
<option value="#0000FF">Blue</option>
<option value="#008080">Teal</option>
</select>

</td><td align="center" valign="top" width="112" nowrap>
Show Source<br>
<select name="show_text">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td></tr>
<tr>
<td align="center" valign="top" colspan="4" width="442">
<input type="button" value="Change Colors/Get Source" onClick="JavaScript:change_colors()">
</div>
</form>
</td></tr>
</table>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Scrollbar Colors ScriptWriter

Leave a Response

Attention JavaScript Coders

Go Deeper