« »

This JavaScript lets you create your own flashing scrollbars. Simply type in two colors to the prompt and let JavaScript do the rest.

Label: Flashing Scrollbar Maker

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=JavaScript>
function flashingscrollbars(){
//Colour 1 for scrollbars
pr1 = prompt('Choose a first color for your scrollbars\n\(USE ONLY SMALL LETTERS! e.g. blue NOT Blue or BLUE\)', '');
hid1.value=pr1
var done=0
if (hid1.value=="null") { location.reload(self); done=1; }
if (hid1.value=="crimson") { gogo(); done=1; }
if (hid1.value=="khaki") { gogo(); done=1; }
if (hid1.value=="red") { gogo(); done=1; }
if (hid1.value=="blue") { gogo(); done=1; }
if (hid1.value=="silver") { gogo(); done=1; }
if (hid1.value=="teal") { gogo(); done=1; }
if (hid1.value=="gray") { gogo(); done=1; }
if (hid1.value=="gold") { gogo(); done=1; }
if (hid1.value=="yellow") { gogo(); done=1; }
if (hid1.value=="pink") { gogo(); done=1; }
if (hid1.value=="purple") { gogo(); done=1; }
if (hid1.value=="violet") { gogo(); done=1; }
if (hid1.value=="turquoise") { gogo(); done=1; }
if (hid1.value=="brown") { gogo(); done=1; }
if (hid1.value=="white") { gogo(); done=1; }
if (hid1.value=="black") { gogo(); done=1; }
if (hid1.value=="green") { gogo(); done=1; }
if (hid1.value=="orange") { gogo(); done=1; }
if (hid1.value=="maroon") { gogo(); done=1; }
if (hid1.value=="lime") { gogo(); done=1; }
if (hid1.value=="cyan") { gogo(); done=1; }
if (hid1.value=="magenta") { gogo(); done=1; }
if (done==0) { if(confirm('There seems to have been an error on your first colour!\nPlease try again!')) { flashingscrollbars(); } else { location.reload(self); } }
}
//Second check for colours (Color 2)
function gogo(){
pr2 = prompt('Choose a second color for your scrollbars', '');
hid2.value=pr2
var done=0
if (hid2.value=="null") { location.reload(self); done=1; }
if (hid2.value=="crimson") { gogo2(); done=1; }
if (hid2.value=="khaki") { gogo2(); done=1; }
if (hid2.value=="red") { gogo2(); done=1; }
if (hid2.value=="blue") { gogo2(); done=1; }
if (hid2.value=="silver") { gogo2(); done=1; }
if (hid2.value=="teal") { gogo2(); done=1; }
if (hid2.value=="gray") { gogo2(); done=1; }
if (hid2.value=="gold") { gogo2(); done=1; }
if (hid2.value=="yellow") { gogo2(); done=1; }
if (hid2.value=="pink") { gogo2(); done=1; }
if (hid2.value=="purple") { gogo2(); done=1; }
if (hid2.value=="violet") { gogo2(); done=1; }
if (hid2.value=="turquoise") { gogo2(); done=1; }
if (hid2.value=="brown") { gogo2(); done=1; }
if (hid2.value=="white") { gogo2(); done=1; }
if (hid2.value=="black") { gogo2(); done=1; }
if (hid2.value=="green") { gogo2(); done=1; }
if (hid2.value=="orange") { gogo2(); done=1; }
if (hid2.value=="maroon") { gogo2(); done=1; }
if (hid2.value=="lime") { gogo2(); done=1; }
if (hid2.value=="cyan") { gogo2(); done=1; }
if (hid2.value=="magenta") { gogo2(); done=1; }
if (done==0) { if(confirm('There seems to have been an error on your second colour!\nPlease try again!')) { gogo(); } else { location.reload(self); } }
}
//If everything's OK, this script will allow you to preview it in your browser.
function gogo2(){
preview.disabled=false
cut_paste_box.value="\n<script language=\"JavaScript\">\nfunction go1\(\)\{\ndocument.body.style.scrollbarBaseColor\=\""+hid1.value+"\"\;\nsetTimeout\(\'clr2\(\)', 500\)\n\}\nfunction clr2\(\)\{\ndocument.body.style.scrollbarBaseColor\=\""+hid2.value+"\"\nsetTimeout\(\'go1\(\)\', 500\)\n\}\n\</script\>\n<script language=\"JavaScript\">\ngo1\(\)\n</script\>"
}
function prev(){
//The actual document.write (preview) script
document.write('\n<html>\n<head>\n</head\>\n<body bgcolor=\"#000000\" text=\"#FFFF00\" link=\"#00FF00\" vlink=\"#00FF00\" alink=\"#00FFFF\">\n<center>\n<p align=\"center\">You should see the scrollbar flashing \(as log as you\'ve picked 2 different colors!\)</p>\n<p>Color 1 = '+hid1.value+'</p>\n<p>Color 2 = '+hid2.value+'</p>\n'+cut_paste_box.value+'\n<p>Copy and Paste the following code, in your webpage, after the &lt;body&gt; tag.</p>\n<textarea rows=\"8\" cols=\"75\">'+cut_paste_box.value+'</textarea></center>\n<p align=\"center\"><a href=\"javascript\:history.back\(-1\)\;\">Back...</a\>\n</p>\n</body\>\n</html\>')
}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<INPUT onclick=flashingscrollbars() type=button value="Create some flashing scrollbars!" name=go> 
<TABLE cellSpacing=0 cellPadding=3 width="93%" border=0>
  <TBODY>
  <TR>
    <TD width="108%">
      <P align=center><TEXTAREA style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid; BACKGROUND-COLOR: #000000" disabled name=cut_paste_box rows=1 cols=1></TEXTAREA> 

      <P align=center><INPUT disabled onclick=prev() type=button value="Preview Scrollbars" name=preview> 
      </P></TD></TR>
  <TR>
    <TD align=middle width="100%">

      <P align=center>&nbsp; <FONT face=Tahoma color=#00ff00>NOTE: Press 
		&quot;Preview&quot; to get the copy &amp; paste code to put onto your webpage 
      </FONT></P></TD></TR></TBODY></TABLE>
<P align=center><INPUT id=hid1 type=hidden></P>
<P align=center><INPUT id=hid2 type=hidden></P>
<P align=center><INPUT id=hid3 type=hidden></P>
<SCRIPT>
cut_paste_box.value=""
cut_paste_box.style.scrollbar3dLightColor="black"
cut_paste_box.style.scrollbarHighlightColor="black"
cut_paste_box.style.scrollbarFaceColor="black"
cut_paste_box.style.scrollbarArrowColor="black"
cut_paste_box.style.scrollbarShadowColor="black"
cut_paste_box.style.scrollbarDarkShadowColor="black"
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->