
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || RAM

Search Site:

Home » DHTML » Article

DHTML Type Writer Effect

Article by:

Premshree Pillai (8/28/2002)

	Add to Favourites
	Tell a friend

Summary:

Classic DHTML script that creates text onscreen as if it were being type-written.

Viewed: 48773 times

Rating (42 votes):

2 out of 5

Rate this Article

Read Comments

Post Comments

DHTML Type Writer Effect

This is a Teletypewriter that types out a message you want.

You can change the text by changing the variable text_type. The distance of the text from top can be changed by changing the variable begin_pos (Here it is 55). The distance of the text from the left can be changed by changing the variable left_pos (Here it is 110). You can also change the speed of typing by changing the variable time_length.

After all the text is typed out the cursor blinks. The blink speed can be changed by changing the value of the variable cursor_blink_speed (Here it is 300). You can also change the cursor character by changing the variable cursor_char (Here it is $).

Place the following code in the head of your web page.

Select All Code

<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/type_writer11.htm
//*********************************************
//* Type Writer effect 1.1                    *
//* This script create a  type writer effect  *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.com                  *
//* E-mail : premshree@hotmail.com            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************

window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" 
 && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" 
 && bVer < 4);
 var time_length =100; //Scroll speed
 var begin_pos=55;
 var left_pos=110;
 var i=1;
 var j=0;
 var cursor_blink_speed=300;
 var text_type = "Type Writer effect by Premshree Pillai";
 var text_type_len= text_type.length;
 var cursor_var="cursor";
 var cursor_char="$"

function type()
{
for(var i=1; i<=text_type_len; i++)
{
document.write('<div id="' + text_type + i + '" style="position:absolute; visibility:hidden; top:' + begin_pos + '; left:' + (left_pos+15*i) + '">');
document.write('<font face="verdana,arial,helvetica" size="2" color="#003399"><b>' + text_type.charAt(i-1) + '</b></font></div>');
}
dotype();
}

document.write('<div id="' + cursor_var + '" style="position:absolute; visibility:hidden; top:' + begin_pos + ';">');
document.write('<font face="verdana,arial,helvetica" size="2" color="#FA5D00"><b>' + cursor_char + '</b></font></div>');

function dotype()
{
 setTimeout("Show('"+text_type+i+"')",time_length);
}

if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="this.document.all";
 styleSwitch=".style";
 }
}

//SHOW
function Show(layerName){
 if (NS4 || IE4) { 
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="visible"');
 eval(layerRef+'["'+cursor_var+'"]'+
 styleSwitch+'.visibility="visible"');
 eval(layerRef+'["'+cursor_var+'"]'+
 styleSwitch+'.left="' + (left_pos+10+15*i) + '"');
 if(i>=text_type_len)
 {
 blink();
 }
 if(i<text_type_len)
 {
 i++;
 dotype();
 }
 }
}

function blink()
{
if(j%2==0)
{
 eval(layerRef+'["'+cursor_var+'"]'+
 styleSwitch+'.visibility="visible"');
}
else
{
 eval(layerRef+'["'+cursor_var+'"]'+
 styleSwitch+'.visibility="hidden"');
}
if(j<2)
{
j++
}
else
{
j--
}
 setTimeout("blink()",cursor_blink_speed);
}



type();

</script>
<!--END REQUIRED-->

Useful Links

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'DHTML Type Writer Effect '

RELATED ARTICLES
Simple Thumbnail Browsing Solution by Troy Wolf This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets.

Creating CSS Buttons by Thomas D. Greer With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript.

DHTML Javascript Ticker by Premshree Pillai This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature.

DHTML Horizontal Scroller by Premshree Pillai Scroll text horizontally when the user hovers over a link.

Manipulate Scrollbar Colors Using CSS and JavaScript by Mike Thompson The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

DHTML News Bar by Premshree Pillai This is the News Bar script which displays a number of messages and rotates them using DHTML.

DHTML Scrolling Image by Premshree Pillai Using this script the user can scroll an image left or right by clicking a buttong

DHTML Image Zoom Out by Premshree Pillai Click on the image and it zooms out and disappears. This script could be a way to handle advertising or other images.

DHTML Zoom In and Out Script by Premshree Pillai Using zoOom, you can zoom in and zoom out any image that is specified in the code.

Simple Mouse Trail using VB Script by Jeff Anderson With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch.

Recent Forum Threads

•	Run a program both on windows and linux
•	VERO.SurfCAM.v2014
•	Schlumberger.Petrel.V2013.2
•	Petrel.V2013.2
•	Altair.HyperWorks.v12
•	VoluMill.v6.1
•	VoluMill.NEXION.6
•	VERO.SurfCAM.v2014
•	Schlumberger.Petrel.V2013.2

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

privacy - contact - advertise - hot links - link to us - submit your article