Home » Webmaster Tools and Resources » Software & Scripts » JavaScript » Buttons » Animated Submit Button

JavaScript Animated Submit Button

This script creates a button which dynamically changes it's length.

Change the <body> to <body onLoad="banner()"> or it wouldn't works.

Insert this code before </head>

<script language="JavaScript">
<!-- Hide this script from old browsers --

   var i = 0;

   var TextNumber = 0;

   var TextInput = new Object();

   var HelpText="";

   var Text = "";

   var Speed=300

   var WaitSpace="  "

TextInput[0] = "To Submit";

TextInput[1] = "Click Here";

TotalTextInput =1;

for (var addWait = 0; addWait <= TotalTextInput; addWait++)

   { TextInput[addWait]+=WaitSpace; }

var TimerId

var TimerSet=false;

function startBanner (form)

   {

   if (!TimerSet)

      {

      TimerSet=true;

      banner();

      }

   }

function banner()

   {

   Text=rollMessage();

   TimerId = setTimeout("banner()", Speed);

   document.form2.banner.value=Text;

   }

function rollMessage ()

   {

   Wait_yn=false;

   i++;

   var CheckSpace = HelpText.substring(i-1, i);

   CheckSpace = "" + CheckSpace;

   if (CheckSpace == " ")

      {i++;}

   if (i >= HelpText.length+1)

      {

      i=0;

      if (TextNumber < TotalTextInput)

         {TextNumber++;}

      else

         {TextNumber = 0;}

      initBanner();

      }

   Text = HelpText.substring(0, i);

   return (Text);

   }

function initBanner()

   {

   Text = TextInput[TextNumber];

   HelpText = Text;

startBanner ();

   }

function stopBanner()

   {

   TimerSet=false;

   clearTimeout (TimerId);

   }

function resetBanner()

   {

   TimerSet=false;

   clearTimeout (TimerId);

   TextNumber=0;

   i=0;

   Speed=300;

   document.form2.banner.value=" ";

   initBanner();

   }

// -- End Hiding Here -->
</script>

Insert this code before </body>

<center><form name="form2" onSubmit=null>
<!-- Replace the 'onSubmit=null' with 'action=[blah.html]' -->
<input type="submit" name="banner" VALUE="..Submit.." onClick="alert('Neat, isn\'t it?')">
<br>
</form></center>

Related Resources: