« »

Make colored, flat-style, and blinking scrollbars... striking effects that definitely get attention. Make your scrollbar colorful.

Label: Simple JavaScript Scrollbar Maker

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE>
.color {
	BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; HEIGHT: 23px; WIDTH: 65px
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT>
<!--
function act(form)
{
var c1,c2,c3,c4
line1.style.backgroundColor="#ffffff"
face1.style.backgroundColor="#ffffff"
line2.style.backgroundColor="#ffffff"
face2.style.backgroundColor="#ffffff"
function changecontent(){
if (form.type[1].checked) {type1='"white"';type2='"gray"';type3='"white"'} else {type1='line';type2='face';type3='face'}
c1=line1.style.backgroundColor
c2=face1.style.backgroundColor
c3=line2.style.backgroundColor
c4=face2.style.backgroundColor
function clrBar(line,face)
	{
	with(document.body.style)
		{
		scrollbarDarkShadowColor=line;
		scrollbar3dLightColor=form.type[1].checked?"white":line;
		scrollbarArrowColor="black";
		scrollbarBaseColor=face;
		scrollbarFaceColor=face;
		scrollbarHighlightColor=form.type[1].checked?"white":face;
		scrollbarShadowColor=form.type[1].checked?"gray":face;
		scrollbarTrackColor="#F3F3F3";
		}
	}

function setcolor()
	{
	var w = document.body.clientWidth;
	var h = document.body.clientHeight;
	var x = event.clientX;
	var y = event.clientY;
	if(x>w) clrBar(c1,c2); // Your colors
	else clrBar(c3,c4); // A predefined theme
	}
if (document.all){clrBar(null,null);document.onmousemove=setcolor}

endtag=' scrollbars. Colors: line1 - '+c1+', line2 - '+c3+', face1 - '+c2+', face2 - '+c4+'*/\n'
text=form.type[1].checked?'/*---For 3D'+endtag:'/*---For flat'+endtag

content='<script language="JavaScript1.2">\n'
+'<!--\n'
+text
+'function clrBar(line,face)\n'
+'		{\n'
+'		with(document.body.style)\n'
+'			{\n'
+'			scrollbarDarkShadowColor=line;\n'
+'			scrollbar3dLightColor='+type1+';\n'
+'			scrollbarArrowColor="black";\n'
+'			scrollbarBaseColor=face;\n'
+'			scrollbarFaceColor=face;\n'
+'			scrollbarHighlightColor='+type3+';\n'
+'			scrollbarShadowColor='+type2+';\n'
+'			scrollbarTrackColor="#F3F3F3";\n'
+'			}\n'
+'		}\n'
+'function setcolor()\n'
+'		{\n'
+'		var w = document.body.clientWidth;\n'
+'		var h = document.body.clientHeight;\n'
+'		var x = event.clientX;\n'
+'		var y = event.clientY;\n'
+'		if(x>w) clrBar("'+c1+'","'+c2+'"); // Colors of active state\n'
+'		else clrBar("'+c3+'","'+c4+'"); // Colors of normal state\n'
+'		}\n'
+'if (document.all){\n'
+'clrBar(null,null);\n'
+'document.onmousemove=setcolor;\n'
+'}\n'
+'//------- Source Code Generator - La Minh Khanh ------ //\n'
+'-->\n<'
+'/script>'
form.codearea.value=content
}

form.gen.onclick=changecontent

form.copy.onclick=function copy() 
	{
	myForm.codearea.select(); myForm.codearea.focus();
	textRange = myForm.codearea.createTextRange();
	textRange.execCommand("RemoveFormat");
	textRange.execCommand("Copy");
	alert("The code has been copied into your clipboard!")
	}

}
//end of act()
-->
</SCRIPT>
<P>Guide: Put the generated script on the &lt;body&gt; part of your web page. Lets 
note that this script works with IE5.5+, other browsers just ignore it.</P>
<P>Color table: Enter the color number or click on a cell to choose your color.</P>
<SCRIPT>
<!--
function ilus(clr)
	{
	selhex.value=clr
	selcolor.style.backgroundColor=clr
	}
function passclr(pass)
	{
	if(selhex.value.length == 7) ilus(pass)
	}
-->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onload=act(document.myForm)>
<TABLE border=0 cellPadding=0 cellSpacing=1>
  <TBODY>
  <TR>

    <TD bgColor=#00ff00 height=15 onclick="ilus('#00FF00')" width=20></TD>
    <TD bgColor=#00ff33 height=15 onclick="ilus('#00FF33')" width=20></TD>
    <TD bgColor=#00ff66 height=15 onclick="ilus('#00FF66')" width=20></TD>
    <TD bgColor=#00ff99 height=15 onclick="ilus('#00FF99')" width=20></TD>
    <TD bgColor=#00ffcc height=15 onclick="ilus('#00FFCC')" width=20></TD>
    <TD bgColor=#00ffff height=15 onclick="ilus('#00FFFF')" width=20></TD>
    <TD bgColor=#00cc00 height=15 onclick="ilus('#00CC00')" width=20></TD>
    <TD bgColor=#00cc66 height=15 onclick="ilus('#00CC66')" width=20></TD>
    <TD bgColor=#00cc66 height=15 onclick="ilus('#00CC66')" width=20></TD>

    <TD bgColor=#00cc99 height=15 onclick="ilus('#00CC99')" width=20></TD>
    <TD bgColor=#00cccc height=15 onclick="ilus('#00CCCC')" width=20></TD>
    <TD bgColor=#00ccff height=15 onclick="ilus('#00CCFF')" width=20></TD>
    <TD bgColor=#009900 height=15 onclick="ilus('#009900')" width=20></TD>
    <TD bgColor=#009933 height=15 onclick="ilus('#009933')" width=20></TD>
    <TD bgColor=#009966 height=15 onclick="ilus('#009966')" width=20></TD>
    <TD bgColor=#009999 height=15 onclick="ilus('#009999')" width=20></TD>
    <TD bgColor=#0099cc height=15 onclick="ilus('#0099CC')" width=20></TD>
    <TD bgColor=#0099ff height=15 onclick="ilus('#0099FF')" width=20></TD></TR>

  <TR>
    <TD bgColor=#33ff00 height=15 onclick="ilus('#33FF00')" width=20></TD>
    <TD bgColor=#33ff33 height=15 onclick="ilus('#33FF33')" width=20></TD>
    <TD bgColor=#33ff66 height=15 onclick="ilus('#33FF66')" width=20></TD>
    <TD bgColor=#33ff99 height=15 onclick="ilus('#33FF99')" width=20></TD>
    <TD bgColor=#33ffcc height=15 onclick="ilus('#33FFCC')" width=20></TD>
    <TD bgColor=#33ffff height=15 onclick="ilus('#33FFFF')" width=20></TD>
    <TD bgColor=#33cc00 height=15 onclick="ilus('#33CC00')" width=20></TD>
    <TD bgColor=#33cc33 height=15 onclick="ilus('#33CC33')" width=20></TD>

    <TD bgColor=#33cc66 height=15 onclick="ilus('#33CC66')" width=20></TD>
    <TD bgColor=#33cc99 height=15 onclick="ilus('#33CC99')" width=20></TD>
    <TD bgColor=#33cccc height=15 onclick="ilus('#33CCCC')" width=20></TD>
    <TD bgColor=#33ccff height=15 onclick="ilus('#33CCFF')" width=20></TD>
    <TD bgColor=#339900 height=15 onclick="ilus('#339900')" width=20></TD>
    <TD bgColor=#339933 height=15 onclick="ilus('#339933')" width=20></TD>
    <TD bgColor=#339966 height=15 onclick="ilus('#339966')" width=20></TD>
    <TD bgColor=#339999 height=15 onclick="ilus('#339999')" width=20></TD>
    <TD bgColor=#3399cc height=15 onclick="ilus('#3399CC')" width=20></TD>

    <TD bgColor=#3399ff height=15 onclick="ilus('#3399FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#66ff00 height=15 onclick="ilus('#66FF00')" width=20></TD>
    <TD bgColor=#66ff33 height=15 onclick="ilus('#66FF33')" width=20></TD>
    <TD bgColor=#66ff66 height=15 onclick="ilus('#66FF66')" width=20></TD>
    <TD bgColor=#66ff99 height=15 onclick="ilus('#66FF99')" width=20></TD>
    <TD bgColor=#66ffcc height=15 onclick="ilus('#66FFCC')" width=20></TD>
    <TD bgColor=#66ffff height=15 onclick="ilus('#66FFFF')" width=20></TD>
    <TD bgColor=#66cc00 height=15 onclick="ilus('#66CC00')" width=20></TD>

    <TD bgColor=#66cc33 height=15 onclick="ilus('#66CC33')" width=20></TD>
    <TD bgColor=#66cc66 height=15 onclick="ilus('#66CC66')" width=20></TD>
    <TD bgColor=#66cc99 height=15 onclick="ilus('#66CC99')" width=20></TD>
    <TD bgColor=#66cccc height=15 onclick="ilus('#66CCCC')" width=20></TD>
    <TD bgColor=#66ccff height=15 onclick="ilus('#66CCFF')" width=20></TD>
    <TD bgColor=#669900 height=15 onclick="ilus('#669900')" width=20></TD>
    <TD bgColor=#669933 height=15 onclick="ilus('#669933')" width=20></TD>
    <TD bgColor=#669966 height=15 onclick="ilus('#669966')" width=20></TD>
    <TD bgColor=#669999 height=15 onclick="ilus('#669999')" width=20></TD>

    <TD bgColor=#6699cc height=15 onclick="ilus('#6699CC')" width=20></TD>
    <TD bgColor=#6699ff height=15 onclick="ilus('#6699FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#99ff00 height=15 onclick="ilus('#99FF00')" width=20></TD>
    <TD bgColor=#99ff33 height=15 onclick="ilus('#99FF33')" width=20></TD>
    <TD bgColor=#99ff66 height=15 onclick="ilus('#99FF66')" width=20></TD>
    <TD bgColor=#99ff99 height=15 onclick="ilus('#99FF99')" width=20></TD>
    <TD bgColor=#99ffcc height=15 onclick="ilus('#99FFCC')" width=20></TD>
    <TD bgColor=#99ffff height=15 onclick="ilus('#99FFFF')" width=20></TD>

    <TD bgColor=#99cc00 height=15 onclick="ilus('#99CC00')" width=20></TD>
    <TD bgColor=#99cc33 height=15 onclick="ilus('#99CC33')" width=20></TD>
    <TD bgColor=#99cc66 height=15 onclick="ilus('#99CC66')" width=20></TD>
    <TD bgColor=#99cc99 height=15 onclick="ilus('#99CC99')" width=20></TD>
    <TD bgColor=#99cccc height=15 onclick="ilus('#99CCCC')" width=20></TD>
    <TD bgColor=#99ccff height=15 onclick="ilus('#99CCFF')" width=20></TD>
    <TD bgColor=#999900 height=15 onclick="ilus('#999900')" width=20></TD>
    <TD bgColor=#999933 height=15 onclick="ilus('#999933')" width=20></TD>
    <TD bgColor=#999966 height=15 onclick="ilus('#999966')" width=20></TD>

    <TD bgColor=#999999 height=15 onclick="ilus('#999999')" width=20></TD>
    <TD bgColor=#9999cc height=15 onclick="ilus('#9999CC')" width=20></TD>
    <TD bgColor=#9999ff height=15 onclick="ilus('#9999FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#ccff00 height=15 onclick="ilus('#CCFF00')" width=20></TD>
    <TD bgColor=#ccff33 height=15 onclick="ilus('#CCFF33')" width=20></TD>
    <TD bgColor=#ccff66 height=15 onclick="ilus('#CCFF66')" width=20></TD>
    <TD bgColor=#ccff99 height=15 onclick="ilus('#CCFF99')" width=20></TD>
    <TD bgColor=#ccffcc height=15 onclick="ilus('#CCFFCC')" width=20></TD>

    <TD bgColor=#ccffff height=15 onclick="ilus('#CCFFFF')" width=20></TD>
    <TD bgColor=#cccc00 height=15 onclick="ilus('#CCCC00')" width=20></TD>
    <TD bgColor=#cccc33 height=15 onclick="ilus('#CCCC33')" width=20></TD>
    <TD bgColor=#cccc66 height=15 onclick="ilus('#CCCC66')" width=20></TD>
    <TD bgColor=#cccc99 height=15 onclick="ilus('#CCCC99')" width=20></TD>
    <TD bgColor=#cccccc height=15 onclick="ilus('#CCCCCC')" width=20></TD>
    <TD bgColor=#ccccff height=15 onclick="ilus('#CCCCFF')" width=20></TD>
    <TD bgColor=#cc9900 height=15 onclick="ilus('#CC9900')" width=20></TD>
    <TD bgColor=#cc9933 height=15 onclick="ilus('#CC9933')" width=20></TD>

    <TD bgColor=#cc9966 height=15 onclick="ilus('#CC9966')" width=20></TD>
    <TD bgColor=#cc9999 height=15 onclick="ilus('#CC9999')" width=20></TD>
    <TD bgColor=#cc99cc height=15 onclick="ilus('#CC99CC')" width=20></TD>
    <TD bgColor=#cc99ff height=15 onclick="ilus('#CC99FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#ffff00 height=15 onclick="ilus('#FFFF00')" width=20></TD>
    <TD bgColor=#ffff33 height=15 onclick="ilus('#FFFF33')" width=20></TD>
    <TD bgColor=#ffff66 height=15 onclick="ilus('#FFFF66')" width=20></TD>
    <TD bgColor=#ffff99 height=15 onclick="ilus('#FFFF99')" width=20></TD>

    <TD bgColor=#ffffcc height=15 onclick="ilus('#FFFFCC')" width=20></TD>
    <TD bgColor=#ffffff height=15 onclick="ilus('#FFFFFF')" width=20></TD>
    <TD bgColor=#ffcc00 height=15 onclick="ilus('#FFCC00')" width=20></TD>
    <TD bgColor=#ffcc33 height=15 onclick="ilus('#FFCC33')" width=20></TD>
    <TD bgColor=#ffcc66 height=15 onclick="ilus('#FFCC66')" width=20></TD>
    <TD bgColor=#ffcc99 height=15 onclick="ilus('#FFCC99')" width=20></TD>
    <TD bgColor=#ffcccc height=15 onclick="ilus('#FFCCCC')" width=20></TD>
    <TD bgColor=#ffccff height=15 onclick="ilus('#FFCCFF')" width=20></TD>
    <TD bgColor=#ff9900 height=15 onclick="ilus('#FF9900')" width=20></TD>

    <TD bgColor=#ff9933 height=15 onclick="ilus('#FF9933')" width=20></TD>
    <TD bgColor=#ff9966 height=15 onclick="ilus('#FF9966')" width=20></TD>
    <TD bgColor=#ff9999 height=15 onclick="ilus('#FF9999')" width=20></TD>
    <TD bgColor=#ff99cc height=15 onclick="ilus('#FF99CC')" width=20></TD>
    <TD bgColor=#ff99ff height=15 onclick="ilus('#FF99FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#006600 height=15 onclick="ilus('#006600')" width=20></TD>
    <TD bgColor=#006633 height=15 onclick="ilus('#006633')" width=20></TD>
    <TD bgColor=#006666 height=15 onclick="ilus('#006666')" width=20></TD>

    <TD bgColor=#006699 height=15 onclick="ilus('#006699')" width=20></TD>
    <TD bgColor=#0066cc height=15 onclick="ilus('#0066CC')" width=20></TD>
    <TD bgColor=#0066ff height=15 onclick="ilus('#0066FF')" width=20></TD>
    <TD bgColor=#003300 height=15 onclick="ilus('#003300')" width=20></TD>
    <TD bgColor=#003333 height=15 onclick="ilus('#003333')" width=20></TD>
    <TD bgColor=#003366 height=15 onclick="ilus('#003366')" width=20></TD>
    <TD bgColor=#003399 height=15 onclick="ilus('#003399')" width=20></TD>
    <TD bgColor=#0033cc height=15 onclick="ilus('#0033CC')" width=20></TD>
    <TD bgColor=#0033ff height=15 onclick="ilus('#0033FF')" width=20></TD>

    <TD bgColor=#000000 height=15 onclick="ilus('#000000')" width=20></TD>
    <TD bgColor=#000033 height=15 onclick="ilus('#000033')" width=20></TD>
    <TD bgColor=#000066 height=15 onclick="ilus('#000066')" width=20></TD>
    <TD bgColor=#000099 height=15 onclick="ilus('#000099')" width=20></TD>
    <TD bgColor=#0000cc height=15 onclick="ilus('#0000CC')" width=20></TD>
    <TD bgColor=#0000ff height=15 onclick="ilus('#0000FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#336600 height=15 onclick="ilus('#336600')" width=20></TD>
    <TD bgColor=#336633 height=15 onclick="ilus('#336633')" width=20></TD>

    <TD bgColor=#336666 height=15 onclick="ilus('#336666')" width=20></TD>
    <TD bgColor=#336699 height=15 onclick="ilus('#336699')" width=20></TD>
    <TD bgColor=#3366cc height=15 onclick="ilus('#3366CC')" width=20></TD>
    <TD bgColor=#3366ff height=15 onclick="ilus('#3366FF')" width=20></TD>
    <TD bgColor=#333300 height=15 onclick="ilus('#333300')" width=20></TD>
    <TD bgColor=#333333 height=15 onclick="ilus('#333333')" width=20></TD>
    <TD bgColor=#333366 height=15 onclick="ilus('#333366')" width=20></TD>
    <TD bgColor=#333399 height=15 onclick="ilus('#333399')" width=20></TD>
    <TD bgColor=#3333cc height=15 onclick="ilus('#3333CC')" width=20></TD>

    <TD bgColor=#3333ff height=15 onclick="ilus('#3333FF')" width=20></TD>
    <TD bgColor=#330000 height=15 onclick="ilus('#330000')" width=20></TD>
    <TD bgColor=#330033 height=15 onclick="ilus('#330033')" width=20></TD>
    <TD bgColor=#330066 height=15 onclick="ilus('#330066')" width=20></TD>
    <TD bgColor=#330099 height=15 onclick="ilus('#330099')" width=20></TD>
    <TD bgColor=#3300cc height=15 onclick="ilus('#3300CC')" width=20></TD>
    <TD bgColor=#3300ff height=15 onclick="ilus('#3300FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#666600 height=15 onclick="ilus('#666600')" width=20></TD>

    <TD bgColor=#666633 height=15 onclick="ilus('#666633')" width=20></TD>
    <TD bgColor=#666666 height=15 onclick="ilus('#666666')" width=20></TD>
    <TD bgColor=#666699 height=15 onclick="ilus('#666699')" width=20></TD>
    <TD bgColor=#6666cc height=15 onclick="ilus('#6666CC')" width=20></TD>
    <TD bgColor=#6666ff height=15 onclick="ilus('#6666FF')" width=20></TD>
    <TD bgColor=#663300 height=15 onclick="ilus('#663300')" width=20></TD>
    <TD bgColor=#663333 height=15 onclick="ilus('#663333')" width=20></TD>
    <TD bgColor=#663366 height=15 onclick="ilus('#663366')" width=20></TD>
    <TD bgColor=#663399 height=15 onclick="ilus('#663399')" width=20></TD>

    <TD bgColor=#6633cc height=15 onclick="ilus('#6633CC')" width=20></TD>
    <TD bgColor=#6633ff height=15 onclick="ilus('#6633FF')" width=20></TD>
    <TD bgColor=#660000 height=15 onclick="ilus('#660000')" width=20></TD>
    <TD bgColor=#660033 height=15 onclick="ilus('#660033')" width=20></TD>
    <TD bgColor=#660066 height=15 onclick="ilus('#660066')" width=20></TD>
    <TD bgColor=#660099 height=15 onclick="ilus('#660099')" width=20></TD>
    <TD bgColor=#6600cc height=15 onclick="ilus('#6600CC')" width=20></TD>
    <TD bgColor=#6600ff height=15 onclick="ilus('#6600FF')" width=20></TD></TR>
  <TR>

    <TD bgColor=#996600 height=15 onclick="ilus('#996600')" width=20></TD>
    <TD bgColor=#996633 height=15 onclick="ilus('#996633')" width=20></TD>
    <TD bgColor=#996666 height=15 onclick="ilus('#996666')" width=20></TD>
    <TD bgColor=#996699 height=15 onclick="ilus('#996699')" width=20></TD>
    <TD bgColor=#9966cc height=15 onclick="ilus('#9966CC')" width=20></TD>
    <TD bgColor=#9966ff height=15 onclick="ilus('#9966FF')" width=20></TD>
    <TD bgColor=#993300 height=15 onclick="ilus('#993300')" width=20></TD>
    <TD bgColor=#993333 height=15 onclick="ilus('#993333')" width=20></TD>
    <TD bgColor=#993366 height=15 onclick="ilus('#993366')" width=20></TD>

    <TD bgColor=#993399 height=15 onclick="ilus('#993399')" width=20></TD>
    <TD bgColor=#9933cc height=15 onclick="ilus('#9933CC')" width=20></TD>
    <TD bgColor=#9933ff height=15 onclick="ilus('#9933FF')" width=20></TD>
    <TD bgColor=#990000 height=15 onclick="ilus('#990000')" width=20></TD>
    <TD bgColor=#990033 height=15 onclick="ilus('#990033')" width=20></TD>
    <TD bgColor=#990066 height=15 onclick="ilus('#990066')" width=20></TD>
    <TD bgColor=#990099 height=15 onclick="ilus('#990099')" width=20></TD>
    <TD bgColor=#9900cc height=15 onclick="ilus('#9900CC')" width=20></TD>
    <TD bgColor=#9900ff height=15 onclick="ilus('#9900FF')" width=20></TD></TR>

  <TR>
    <TD bgColor=#cc6600 height=15 onclick="ilus('#CC6600')" width=20></TD>
    <TD bgColor=#cc6633 height=15 onclick="ilus('#CC6633')" width=20></TD>
    <TD bgColor=#cc6666 height=15 onclick="ilus('#CC6666')" width=20></TD>
    <TD bgColor=#cc6699 height=15 onclick="ilus('#CC6699')" width=20></TD>
    <TD bgColor=#cc66cc height=15 onclick="ilus('#CC66CC')" width=20></TD>
    <TD bgColor=#cc66ff height=15 onclick="ilus('#CC66FF')" width=20></TD>
    <TD bgColor=#cc3300 height=15 onclick="ilus('#CC3300')" width=20></TD>
    <TD bgColor=#cc3333 height=15 onclick="ilus('#CC3333')" width=20></TD>

    <TD bgColor=#cc3366 height=15 onclick="ilus('#CC3366')" width=20></TD>
    <TD bgColor=#cc3399 height=15 onclick="ilus('#CC3399')" width=20></TD>
    <TD bgColor=#cc33cc height=15 onclick="ilus('#CC33CC')" width=20></TD>
    <TD bgColor=#cc33ff height=15 onclick="ilus('#CC33FF')" width=20></TD>
    <TD bgColor=#cc0000 height=15 onclick="ilus('#CC0000')" width=20></TD>
    <TD bgColor=#cc0033 height=15 onclick="ilus('#CC0033')" width=20></TD>
    <TD bgColor=#cc0066 height=15 onclick="ilus('#CC0066')" width=20></TD>
    <TD bgColor=#cc0099 height=15 onclick="ilus('#CC0099')" width=20></TD>
    <TD bgColor=#cc00cc height=15 onclick="ilus('#CC00CC')" width=20></TD>

    <TD bgColor=#cc00ff height=15 onclick="ilus('#CC00FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#ff6600 height=15 onclick="ilus('#FF6600')" width=20></TD>
    <TD bgColor=#ff6633 height=15 onclick="ilus('#FF6633')" width=20></TD>
    <TD bgColor=#ff6666 height=15 onclick="ilus('#FF6666')" width=20></TD>
    <TD bgColor=#ff6699 height=15 onclick="ilus('#FF6699')" width=20></TD>
    <TD bgColor=#ff66cc height=15 onclick="ilus('#FF66CC')" width=20></TD>
    <TD bgColor=#ff66ff height=15 onclick="ilus('#FF66FF')" width=20></TD>
    <TD bgColor=#ff3300 height=15 onclick="ilus('#FF3300')" width=20></TD>

    <TD bgColor=#ff3333 height=15 onclick="ilus('#FF3333')" width=20></TD>
    <TD bgColor=#ff3366 height=15 onclick="ilus('#FF3366')" width=20></TD>
    <TD bgColor=#ff3399 height=15 onclick="ilus('#FF3399')" width=20></TD>
    <TD bgColor=#ff33cc height=15 onclick="ilus('#FF33CC')" width=20></TD>
    <TD bgColor=#ff33ff height=15 onclick="ilus('#FF33FF')" width=20></TD>
    <TD bgColor=#ff0000 height=15 onclick="ilus('#FF0000')" width=20></TD>
    <TD bgColor=#ff0033 height=15 onclick="ilus('#FF0033')" width=20></TD>
    <TD bgColor=#ff0066 height=15 onclick="ilus('#FF0066')" width=20></TD>
    <TD bgColor=#ff0099 height=15 onclick="ilus('#FF0099')" width=20></TD>

    <TD bgColor=#ff00cc height=15 onclick="ilus('#FF00CC')" width=20></TD>
    <TD bgColor=#ff00ff height=15 onclick="ilus('#FF00FF')" 
  width=20></TD></TR></TBODY></TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=1>
  <TBODY>
  <TR>
    <TD bgColor=#ffffff height=15 onclick="ilus('#FFFFFF')" width=20></TD>
    <TD bgColor=#dddddd height=15 onclick="ilus('#DDDDDD')" width=20></TD>
    <TD bgColor=#c0c0c0 height=15 onclick="ilus('#C0C0C0')" width=20></TD>
    <TD bgColor=#969696 height=15 onclick="ilus('#969696')" width=20></TD>

    <TD bgColor=#808080 height=15 onclick="ilus('#808080')" width=20></TD>
    <TD bgColor=#646464 height=15 onclick="ilus('#646464')" width=20></TD>
    <TD bgColor=#4b4b4b height=15 onclick="ilus('#4B4B4B')" width=20></TD>
    <TD bgColor=#242424 height=15 onclick="ilus('#242424')" width=20></TD>
    <TD bgColor=#000000 height=15 onclick="ilus('#000000')" 
  width=20></TD></TR></TBODY></TABLE>
<P>
<INPUT class=color name=selhex onchange=passclr(this.value) value=#FFFFFF size="20"> 
<INPUT class=color name=selcolor onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Chosen color</P>
<P>1. Set color for your scrollbars when it is actived (mouse over). Tip: you 
would better set the face color lighter the line color.</P>

<P><INPUT name=s1 onclick=line1.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=line1 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Line color<BR><INPUT name=s2 onclick=face1.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=face1 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Face color</P>
<P>2. And set the colors for scrollbars in normal state here, choose the color 
you like from above table and click <B>Set Color</B>:</P>
<P><INPUT name=s3 onclick=line2.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=line2 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Line color<BR><INPUT name=s4 onclick=face2.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=face2 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Face color</P>

<P>3. Finally set a type of scrollbars you want and click <B>Generate Source 
Code</B>, you will see the illustration on scrollbars around:</P>
<FORM name=myForm>
<P><INPUT CHECKED name=type type=radio value=false>&nbsp;&nbsp;&nbsp; Flat 
scrollbars&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT name=type type=radio 
value=true>&nbsp;&nbsp;&nbsp; 3D scrollbars</P>
<P><INPUT name=gen type=button value="Generate Source Code"> <INPUT name=copy onclick=copy() type=button value="Copy into Clipboard"></P>
<P><TEXTAREA cols=85 name=codearea rows=10></TEXTAREA></P></FORM>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

javascriptbank.com javascripton.com gomy.mobi gomymobi.com pornID.net CreditCard.rip ApexBTC.com CryptoKD.com choose.exchange CoinHolo.com ZWVQ.com ChainTutor.com index.services war.money eChainBank.com choose.works Card.rip ABP3.com this.bid ChatTotal.com YeuNu.com CTRCoin.com XMQV.com system.money

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
La Minh Khanh [more]
3,156
0
0
0
24.48 KBytes

Simple JavaScript Scrollbar Maker

0/5 0 votes / 3,156 previews / 0 comment 30/01/2007 Make colored, flat-style, and blinking scrollbars... striking effects that definitely get attention. Make your ...Simple JavaScript Scrollbar Maker - Simple JavaScript Scrollbar Maker

binhminhcongtu

Let's be first member to do this

kidsolo