Most of the time we need to create a effect just like typing text in web page but don't know how to do such task through javascript.
This article is for creating typing effect for given text through javascript, below is auto started, manual through started through button click demo is given below.
Desingner Source Code :
This article is for creating typing effect for given text through javascript, below is auto started, manual through started through button click demo is given below.
Desingner Source Code :
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Typing Text Effect</title>
<script type="text/javascript">
/****Class Defination****/
function TypingText(element, interval, cursor,
finishedCallback) {
if ((typeof
document.getElementById == "undefined")
|| (typeof element.innerHTML == "undefined")) {
this.running = true;
return;
}
this.element = element;
this.finishedCallback = (finishedCallback ?
finishedCallback : function () { return; });
this.interval = (typeof
interval == "undefined" ? 100 :
interval);
this.origText = this.element.innerHTML;
this.unparsedOrigText = this.origText;
this.cursor = (cursor ? cursor : "");
this.currentText = "";
this.currentChar = 0;
this.element.typingText = this;
if (this.element.id
== "") this.element.id
= "typingtext" +
TypingText.currentIndex++;
TypingText.all.push(this);
this.running = false;
this.inTag = false;
this.tagBuffer = "";
this.inHTMLEntity = false;
this.HTMLEntityBuffer = "";
}
/**** Static Valiables ****/
TypingText.all = new Array();
TypingText.currentIndex = 0;
/*** Static Fuction Add ***/
TypingText.runAll = function () {
for (var i = 0; i
< TypingText.all.length; i++) TypingText.all[i].run();
}
/*** Instance Fuction Add ***/
TypingText.prototype.run = function () {
if (this.running) return;
if (typeof this.origText == "undefined")
{
setTimeout("document.getElementById('"
+ this.element.id + "').typingText.run()",
this.interval);
return;
}
if (this.currentText
== "") this.element.innerHTML
= "";
if (this.currentChar
< this.origText.length) {
if (this.origText.charAt(this.currentChar) == "<"
&& !this.inTag) {
this.tagBuffer = "<";
this.inTag = true;
this.currentChar++;
this.run();
return;
}
else if (this.origText.charAt(this.currentChar)
== ">" && this.inTag) {
this.tagBuffer += ">";
this.inTag = false;
this.currentText += this.tagBuffer;
this.currentChar++;
this.run();
return;
}
else if (this.inTag) {
this.tagBuffer += this.origText.charAt(this.currentChar);
this.currentChar++;
this.run();
return;
}
else if (this.origText.charAt(this.currentChar)
== "&" && !this.inHTMLEntity) {
this.HTMLEntityBuffer = "&";
this.inHTMLEntity = true;
this.currentChar++;
this.run();
return;
}
else if (this.origText.charAt(this.currentChar)
== ";" && this.inHTMLEntity) {
this.HTMLEntityBuffer += ";";
this.inHTMLEntity = false;
this.currentText += this.HTMLEntityBuffer;
this.currentChar++;
this.run();
return;
}
else if (this.inHTMLEntity) {
this.HTMLEntityBuffer += this.origText.charAt(this.currentChar);
this.currentChar++;
this.run();
return;
}
else {
this.currentText += this.origText.charAt(this.currentChar);
}
this.element.innerHTML = this.currentText;
this.element.innerHTML
+= (this.currentChar < this.origText.length - 1 ? (typeof
this.cursor == "function"
? this.cursor(this.currentText)
: this.cursor) : "");
this.currentChar++;
setTimeout("document.getElementById('"
+ this.element.id + "').typingText.run()",
this.interval);
} else {
this.currentText = "";
this.currentChar = 0;
this.running = false;
this.finishedCallback();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divTypingtext">
<%--Place your text here--%>
Hi this
is Jitendra Gangwar. I love to write article in asp.net.if u like this plz
share.
</div>
<p id="pTypingtext">
<%--Place your text here--%>
Hi this is
Jitendra Gangwar. I love to write article in asp.net.if u like this plz share.
</p>
<input type="button" id="btnShow" onclick='TypingText.runAll();' value="Start Typing Text"/>
<script type="text/javascript">
new
TypingText(document.getElementById("divTypingtext"),
100, "_", TaskCompleted1);
new TypingText(document.getElementById("pTypingtext"), 100, function (i) { var ar
= new Array("_",
" "); return
" " + ar[i.length % ar.length]; },
TaskCompleted2);
function TaskCompleted1() {
alert("Task 1 Completed")
}
function TaskCompleted2() {
alert("Task 2 Completed")
}
</script>
</div>
</form>
</body>
</html>
Here you can also use manual cursor as you want,
just to change the function of cursor some
manual cursor function given below.
function (i) { var ar = new Array("_",
" "); return
" " + ar[i.length % ar.length]; }
No comments:
Post a Comment