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

Text Banner/Typing text Scrolling Text Color changing text
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 fieldThe 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 = 1000var ColorIndex = 0var 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 changehere …Works only in IE4.x or Netscape 4.x </h4></font>’)}//–>
</SCRIPT>
<STYLE TYPE=”text/css”>
<!–
#ColorLayer {position:absolute; left:50; top:100;}
–>
</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:<html>
<head>
<SCRIPT LANGUAGE=”JavaScript”><!–ns4x = (document.layers)? true:false
ie4x = (document.all)? true:falsefunction 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”>
<!–
A.red {color:red;}
A.blue {color:blue;}
#Layer1 {position:absolute; left:50; top:50;}
#Layer2 {position:absolute; left:50; top:100;}
–>
</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>Text1</h1>’,'<h1>Text 1</h1>’)”><h1>Text 1</h1></font></DIV>
<DIV ID=”Layer2″><font color=”blue” onMouseOver=”TextMouseLeave(‘Layer2′,'<h1>Text2</h1>’,'<h1>Text 2</h1>’)”><h1>Text 2</h1></font></DIV></BODY>
</HTML>


Top

Page contents: itechies.net – Learn how to create a typing text in a text field, scrolling text in a text fiels, and change the text color using javascript.