JavaScriptSource

Search 5,000+ Free JavaScript Snippets

Home / Generators / Flashing Scrollbar Maker

Flashing Scrollbar Maker

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

  1. Copy the coding into the HEAD of your HTML document
  2. Add the last code into the BODY of your HTML document
<!– STEP ONE: Paste this code into the HEAD of your HTML document  –>



<HEAD>



<SCRIPT LANGUAGE=”JavaScript”>

<!– Original:  Jamie Allen –>

<!– Web Site:  http://www.jamie.zibykid.com –>

<!– This script and many more are available free online at –>

<!– The JavaScript Source!! http://javascriptsource.com –>



<script language=”JavaScript”>

//This script may be used, UNEDITED

//www.jamie.zibykid.com

function flashingscrollbars(){

//Colour 1 for scrollbars

pr1 = prompt(‘Choose a first color for your scrollbarsn(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==”#fafafa”) { 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==”#fafafa”) { 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 <body> 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>



</HEAD>
<!– STEP TWO: Copy this code into the BODY of your HTML document  –>



<BODY>



<!– This script and many more are available free online at –>

<!– The JavaScript Source!! http://javascriptsource.com –>

<!– Original:  Jamie Allen –>

<!– Web Site:  http://www.jamie.zibykid.com –>

<p align=”center”><font size=”6″ face=”tahoma”><strong>Flashing Scrollbar Maker</strong></font></p>

<p align=”center”><font size=”3″ face=”tahoma”><strong>v1.1</strong></font></p>

<p align=”center”> 

  <input type=”button” value=”Create some flashing scrollbars!” name=”go” onClick=”flashingscrollbars()”>

</p>

<div align=”center”>

  <center>

  <table border=”0″ cellpadding=”3″ cellspacing=”0″ width=”93%”>

    <tr>

      <td width=”108%”>

        <p align=”center”> <textarea disabled rows=”1″ cols=”1″ name=”cut_paste_box” style=”background-color: #000000; border-style: solid; border-width: 0″></textarea>

        <p align=”center”> 

            <input disabled type=”button” value=”Preview Scrollbars” name=”preview” onclick=”prev()”>

          </td>

    </tr>

    <tr>

      <td width=”100%” align=”center”>

        <p align=”center”>  <font color=”#00FF00″ face=”Tahoma”>NOTE: Press 

            “Preview” to get the copy & paste code to put onto your 

            webpage </font></td>

    </tr>

  </table>

  </center>

</div>

<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>





<p><center>

<font face=”arial, helvetica” size”-2″>Free JavaScripts provided<br>

by <a href=”https://javascriptsource.com”>The JavaScript Source</a></font>

</center><p>

Related Snippets: