Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

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

<!--

#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: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">

<!--

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



 

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.
javascript tutorial
javascript book
Buy this book