Javascript - Typing text / scrolling text/ color changing texth

Text Banner / Typing text in a text field using javascript:

A script that type text on the text field typing out, one letter at a time.You have to store the messages to be typed in an array.See the typing text example below.

Complete javascript Code for typing text in a form field:

<body >
<FORM NAME= "testform" ACTION=" ">
    <input type="text" NAME="msgbox" size="100" >
<SCRIPT>
<!-- Hide from old browsers
MsgSeperator = '#';
CharacterPos=0;
MsgBuffer         = "";
var TypeDelay = 50;
var NxtMsgDelay   = 1500;
MsgIndex=0;
var MsgArray = Array("Welcome to webgimmicks.com! #","Learn the gimmicks here... #","Very useful Javascript examples for free at webgimmicks.com ...#")

   function StartTyping(CharacterPos) {
   if (MsgArray[MsgIndex].charAt(CharacterPos) != MsgSeperator) {
      MsgBuffer    = MsgBuffer + MsgArray[MsgIndex].charAt(CharacterPos)
     self.document.forms[0].elements[0].value=MsgBuffer
     delay=TypeDelay
    }

    else {
       delay=NxtMsgDelay
       MsgBuffer   = ""
     CharacterPos=-1
if (MsgIndex!=MsgArray.length-1){
      MsgIndex++
}
else {MsgIndex=0 }
    }
    CharacterPos++
    setTimeout("StartTyping('"+CharacterPos+"')",delay)
}

//-->
StartTyping(0)
</SCRIPT>
</body>

Top

Javascript - Scrolling text in a text field

The following is an example for scrolling text field.A script that shows scrolling text in a text field.This can be usefult when you want to show any special message to your webpage visitors.

Copy and paste the following javascript code to display a scrolling text in a text field.

<HTML>
<body >
<form name="msgtest">
<input type="text" name="welcome" size=30>
</form>
<script language="Javascript">
<!--
var ScrollMsg= "Welcome to webgimmicks.com ........"
var CharacterPosition=0;
var spacer = "... ";
function StartScrolling() {
document.msgtest.welcome.value=ScrollMsg.substring(CharacterPosition,ScrollMsg.length)+

ScrollMsg.substring(0, CharacterPosition);
CharacterPosition++;
if(CharacterPosition > ScrollMsg.length) CharacterPosition=0;
// Set a Timer to call StartScrolling() at an interval
window.setTimeout("StartScrolling()",150); }

StartScrolling();

// -->

</script>
</body>
</html>

Top

Javascript- Automatically Changing text color (Works only in IE 4.x and Netscape 4.x)

Some times you want the visitors to notice a portion of your text at first sight. Then you want to give some special effects, sothat it can be visible fast. You can accomplish this by changing text color in specified time. The following is the script for changing text color written on a layer

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

ns4x = (navigator.appName == "Netscape")
ie4x = (navigator.appName == "Microsoft Internet Explorer")
LayerText = "See the color changing ...";

function layerWrite(LayerId,LayerText) {
if (ns4x) {
var ColorLayer = document.layers[LayerId].document
ColorLayer.open()
ColorLayer.write(LayerText)
ColorLayer.close()
}
else if (ie4x) document.all[LayerId].innerHTML = LayerText
}
var speed = 1000

var ColorIndex = 0

var ColorArray = Array("red", "blue", "green","yellow");

function ChangeColor(){
(ColorIndex < ColorArray.length-1) ? ColorIndex++ : ColorIndex=0;
layerWrite('ColorLayer','<font color="'+ColorArray[ColorIndex]+'"><h4>Notice the Color change

here ...Works only in IE4.x or Netscape 4.x </h4></font>')

}

//-->
</SCRIPT>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="setInterval('ChangeColor()',1000)">
<DIV ID="ColorLayer"><h1>See Color of this layer getting changed ...</h1></DIV>
</BODY>
</HTML>

Top

Javascript- Changing text color on mouse over (works only in IE 4.x) Have you noticed changing link color on mouse over? Do you ever wonder how to change the text color on mouse over?. Well, Try the following piece of javascript.

Source Code for changing text color on mouse over:

<!--

ns4x = (document.layers)? true:false
ie4x = (document.all)? true:false

function ChangeLinkColor(Msg,LayerId) {
        if (ns4x) {
var MsgLayer = document.layers[LayerId]Document
                MsgLayer.open()
                MsgLayer.write(MSG)
                MsgLayer.close()
        }
        else if (ie4x) {document.all[LayerId].innerHTML = MSG}
}

function TextMouseOver(LayerId,MSG,link) {
ChangeLinkColor('<font color="red"

onMouseOut="TextMouseLeave(\''+LayerId+'\',\''+link+'\',\''+MSG+'\')">'+MSG+'</font>',LayerId)
}

function TextMouseLeave(LayerId,MSG,link) {
ChangeLinkColor('<font color="blue"

onMouseOver="TextMouseOver(\''+LayerId+'\',\''+link+'\',\''+MSG+'\')">'+MSG+'</font>',LayerId)
}

//-->

</SCRIPT>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<b>Pass the mouse over the text (Works only for IE 4.x)</b>
<DIV ID="Layer1"><font color="blue" onMouseOver="TextMouseLeave('Layer1','<h1>Text

1</h1>','<h1>Text 1</h1>')"><h1>Text 1</h1></font></DIV>
<DIV ID="Layer2"><font color="blue" onMouseOver="TextMouseLeave('Layer2','<h1>Text

2</h1>','<h1>Text 2</h1>')"><h1>Text 2</h1></font></DIV>

</BODY>
</HTML>

Top