Click to See Complete Forum and Search --> : Using JS to Simulate Typing?
Hello, I am new here and found this help forum via the JSS site. I have been searching for a particular code for some time, but have been unable to find what i'm looking for. I'm unfamiliar with JS script in that I can't write it from scratch (if I could, I would'nt be asking for help lol), but I have edited and used it in the past, and I can program HTML.
Onto my problem, I am trying to use JS to simulate text being typed on a web page. Something like you would see on a computer screen ala The Matrix or like an old DOS (ok, really old... :p ) screen. I'm trying to implement it using the Courier font, which simulates old style computer text. The body itself is green text on a black background, very similar to a Matrix screen. In fact, the script is intended for a Matrix roleplaying page.
Now, i've found a script which displays a typing text in the status bar. Apparently this is a commonly used script. But I cannot figure out how to edit it so that it types text in the body of the HTML document rather than the status bar. I've tried simply moving the script past the BODY, instead of before it, as the script was intended. But that simply doesn't show anything at all.
I don't want to post the whole script, as it's long and ungainly (and recommended against in the guidelines). I will though if someone wishes me to. I don't know enough of the actual code to edit the variables and whatnot, so any help on this would be greatly appreciated.
Thanks,
-Khan
Vladdy
01-10-2004, 12:11 PM
Google results for "teletype javascript":
http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=teletype+javascript&spell=1
pick one, or better yet do not use it at all, unless you can answer the following question:
What kind of information on the web page is so important that it needs to draw visitors attention by utilizing some sort of animation technique, and at the same time can be ignored since it requires visitor to wait for a certain period of time before he/she can read it???:confused:
Originally posted by Vladdy
What kind of information on the web page is so important that it needs to draw visitors attention by utilizing some sort of animation technique, and at the same time can be ignored since it requires visitor to wait for a certain period of time before he/she can read it???
As I said, it's for a Matrix-esque roleplaying game. The page is mean't to be a part of the game, in which it simulates a computer screen in which the text content of the page slowly types itself out, all by itself - just like in the first Matrix movie.
But danke for the Google results. Now at least I know what the script is called. :)
I have some examples here, they may be of help to you
www.huntingground.freeserve.co.uk/scripts/type_effects.htm
Khalid Ali
01-11-2004, 12:16 PM
Originally posted by Mr J
I have some examples here, they .......
in case you didn't notice,theh page will not copy to clipboard by clicking of the link in NS6+(mozilla based) browsers.
good detailed effect description though.
Thanks Khalid
I know its only IE propriety, its one of the things I have to rectify.
I have an alert in there for Moz/NS but it won't fire because of that.
A bit of a catch 22
I may have to take out the copy feature altogether
Thanks for the examples.
Is there a way to put the code into a page without putting it into a text box?
Something like this?
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<SCRIPT language=javascript>
<!--
var count = 0 // counter
var text1= "These examples shows how to create a simple typing effect."
+ " The text box below"
+ " Shows how many characters there are."
function type(){
isrunning=1 //
document.getElementById("display1").innerHTML=document.getElementById("display1").innerHTML + text1.charAt(count)
count++ // increment counter by 1
timeID= setTimeout("type()",50) // speed
if(count==text1.length){ // stop running when all characters shown
clearTimeout(timeID)
count=-1 // reset counter
isrunning=0 // not running
}
}
isrunning=0 // not running
function restart1(){ // reset values on restart
if(isrunning==1){return} // if already running then return
document.getElementById("display1").innerHTML=""
type()
isrunning=1 // is running
}
// include onload="type()" in the opening body tag
// -->
</SCRIPT>
</HEAD>
<BODY onload="type()">
<div id="display1" style="width:100px"></div>
</BODY>
</HTML>
Khalid Ali
01-11-2004, 02:44 PM
Originally posted by Mr J
I may have to take out the copy feature altogether
Naah you don't have to...
I did put together some code quite some time ago, and luckily with all the changes Mozilla has gone thru over the years it still works(just checked it).
take a look and incorporate it in your existing code (http://www.webapplikations.com/pages/html_js/forms/CopyToClipboard.html)
Works for both IE and NS6+(mozilla based)
Thanks Khalid.
I will definately take a look at this as my attempt many moons ago failed dismally and I did not really see the point in it myself.
I only used to code for IE and it was only a few lines of code to use.
But now I am expanding in my knowledge of other browsers, well mainly mozilla, so yes it will be nice to see how it is done.
Thank you
J
Originally posted by Mr J
Something like this?
Yes! That's perfect!
Thank you.