Type Writer effect (IE)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Type Writer</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#FA5D00; font-weight:bold}
</style>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/type_writer.htm
//*********************************************
//* Type Writer effect                        *
//* 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 text_type = "Type Writer effect by Premshree Pillai";
 var text_type_len= text_type.length;
 
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();
}

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"');
 if(i<text_type_len)
 {
 i++;
 dotype();
 }
 }
}

type();

</script>
<!--END REQUIRED-->
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Type Writer effect</span>
<br>

<br><br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a JavaScript that creates a type writer effect for a text like the one above.<br><br>
You can change the text by changing the variable <font face="courier">text_type</font>.
The distance of the text from top can be changed by changing the variable <font face="courier">begin_pos</font> (Here it is 55). The distance of the text from the left can be changed by changing the variable <font face="courier">left_pos</font> (Here it is 110). You can also change the speed of typing by changing the variable <font face="courier">time_length</font>.
</font>

</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.com" class="link">&#169 Premshree Pillai</a></center>
</body>
</html>
Type Writer effect (IE) : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

Type Writer effect (IE)

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
