Typing Text Script

UPDATED: JULY 25, 2016 – ARTICLE: TYPING TEXT SCRIPT

Category: Web Design & Development

Typing text script. Demo of the typing text script above. Customize your typing text script change the speed that the letters move, text colour and size. Letters type across your page. Its a nice way to display short messages where space is limited as it will type the first sentence which will disappear then start the next sentence and so on, the typing text script is fast loading so what effect your page load time.

If you find that the message goes off the screen then you will have to shorten your message. Add another line and carry on with the message where it says “Specify Typing Text contents” also keep the numbers in order on the code. Do not have duplicate numbers in the code To remove unwanted messages remove the line or if you want more typing text add a line with a higher number in the code followed by the message.

Letters Type Across Web Page To Make A Sentence

Letters type across your web page and make a sentence once the sentence has finished being typed out it will be removed, and the new sentence will start to be typed out. The typing text script is a great eye catcher for your site use it to tell visitors about your site.

How To Edit The Typing Text Script

Replace our content with your content look in the code for this section remove ours and replace with yours.

line[1]="Welcome to our website this is what the typing text script will look like on your website."
line[2]="Once the script has completed the first line the next line will start as you can see."
line[3]="Its a fun eye catching script that is sure to catch your visitors eye."
line[4]="Visitors even stay on the page to see what you are going to say next .. just like you!"
line[5]="You can also change the colour of the text and text size in the code."
line[6]="If you copy our code to a website with a black background you will not see the typing text."
line[7]="Change the text colour to white and you will it."
line[8]="Please click our share buttons above if you like the typing text."
line[9]="Thanks have a great day ....... Mike"

To change the text size look for the below code and change 17 to what ever size you want the typing text to be.

//Specify font size for Typing Text
var ts_fontsize="17px"

To change text colour and font look for the below code in the typing text script and change.

document.write('style="background-color:transparent; '+document.bgColor+'; color:#000000; '+document.body.text+'; font-family: Bitter, Georgia, serif; font-size: '+ts_fontsize+'; font-weight:none; border: medium none" onfocus="blur()">')

SPONSORED ADVERTISEMENTS

Copy the typing text script below

 <script type="text/javascript">
/* <![CDATA[ */
//Specify Typing Text contents
var line=new Array()
line[1]="Welcome to our website this is what the typing text script will look like on your website."
line[2]="Once the script has completed the first line the next line will start as you can see."
line[3]="Its a fun eye catching script that is sure to catch your visitors eye."
line[4]="Visitors even stay on the page to see what you are going to say next .. just like you!"
line[5]="You can also change the colour of the text and text size in the code."
line[6]="If you copy our code to a website with a black background you will not see the typing text."
line[7]="Change the text colour to white and you will it."
line[8]="Please click our share buttons above if you like the typing text."
line[9]="Thanks have a great day ....... Mike"

//Specify font size for Typing Text
var ts_fontsize="17px"
//--Don't edit below this line
var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}
//Auto set Typing Text width
var tscroller_width=line[longestmessage].length
lines=line.length-1 //--Number of lines
//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write('style="background-color:transparent; '+document.bgColor+'; color:#000000; '+document.body.text+'; font-family: Bitter, Georgia, serif; font-size: '+ts_fontsize+'; font-weight:none; border: medium none" onfocus="blur()">')
document.write('</form>')
}
temp=""
nextchar=-1;
nextline=1;
cursor=""
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}
function nextstep(){
if (cursor=="\\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\\"}
nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",160)}
//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
/* ]]> */
</script>

You may also like this.

Best Way To Create a Website
Typing Text Script From Dynamic Drive
Cut & Paste Typing Text

 
Tags: typing text script, text typing across website, moving text on website
ARTICLE: TYPING TEXT SCRIPT WAS FIRST PUBLISHED: DECEMBER 13, 2013