Home » Webmaster Tools and Resources » Software & Scripts » JavaScript » Links and Buttons » [*TITLE HERE*]

Animated Submit Button Script

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

Sample:

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>

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

Replace <body> with <body onLoad="banner()">

Related Resources: