PDA

View Full Version : Typing text



favorite_radio
11-16-2005, 07:33 PM
http://dynamicdrive.com/dynamicindex10/text5.htm

I can't seem to get this animation to work on FireFox. I works on Windows and other browsers but not on FX. What am I don't wrong.

By the way I love the site. I was just introduced to it a week ago. Great job with the website.

Radio,

Twey
11-16-2005, 07:57 PM
I can't seem to get this animation to work on FireFox.

IE5+ Opr7+
That's why.

favorite_radio
11-17-2005, 02:27 PM
Thanks, Twey

Is there a way I can make it work on FireFox.

radio

Twey
11-17-2005, 05:41 PM
I have rewritten this script to use much more compliant functions. Use as the old version. Tested in Firefox v1.0.7, Opera v8, Konqueror v3.2.1, and IE v6.

<small><span id="typing">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Phasellus risus nisl, vehicula in, hendrerit vitae, iaculis vel, nisl. Praesent rhoncus
semper velit. Ut sed nunc. Proin id metus eget neque consectetuer semper. Donec
consectetuer auctor nisl. Sed metus. Sed eu felis. Sed accumsan bibendum leo. Mauris
accumsan dapibus odio. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Integer sodales dui ac justo.<br/><br/>
Donec ante nulla, suscipit quis, pharetra id, consectetuer non, magna. Phasellus viverra
lobortis eros. Integer eu arcu. Praesent accumsan nunc ac ante mollis cursus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aenean volutpat enim vitae turpis. Vestibulum sit amet nunc. Maecenas nunc turpis,
cursus eu, vulputate sed, pretium id, urna. Suspendisse potenti.</span></small>

<script type="text/javascript">

/*
Typing Text Script
Last updated: 18/11/05
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
hundreds more DHTML scripts, and Terms Of
Use, visit http://www.dynamicdrive.com/.

Rewritten by Twey to be compatible with Firefox
(and now Konqueror and presumably Safari).
The script will strip all HTML tags from the text, but
non-supporting browsers won't. This will allow you to
hide the text or display differently on such browsers.
*/

interval = 100; // Interval in milliseconds to wait between characters

if(document.getElementById) {
t = document.getElementById("typing");
if(t.innerHTML) {
typingBuffer = ""; // buffer prevents some browsers stripping spaces
it = 0;
mytext = t.innerHTML;
t.innerHTML = "";
typeit();
}
}

function typeit() {
mytext = mytext.replace(/<([^<])*>/, ""); // Strip HTML from text
if(it < mytext.length) {
typingBuffer += mytext.charAt(it);
t.innerHTML = typingBuffer;
it++;
setTimeout("typeit()", interval);
}
}
</script>

ddadmin
11-20-2005, 07:16 AM
Hi Trey:
Thanks for the code. I'll do some testing on it, and if all is well, update the script with your changes.

Thanks!

George

AJRussell
01-15-2006, 03:17 PM
I have inserted this script into a test page, and I was wondering if there is a way to make the text repeat until the page is closed?

Please advise!

AJRussell

Twey
01-15-2006, 04:40 PM
Try:

<small><span id="typing">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Phasellus risus nisl, vehicula in, hendrerit vitae, iaculis vel, nisl. Praesent rhoncus
semper velit. Ut sed nunc. Proin id metus eget neque consectetuer semper. Donec
consectetuer auctor nisl. Sed metus. Sed eu felis. Sed accumsan bibendum leo. Mauris
accumsan dapibus odio. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Integer sodales dui ac justo.<br/><br/>
Donec ante nulla, suscipit quis, pharetra id, consectetuer non, magna. Phasellus viverra
lobortis eros. Integer eu arcu. Praesent accumsan nunc ac ante mollis cursus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aenean volutpat enim vitae turpis. Vestibulum sit amet nunc. Maecenas nunc turpis,
cursus eu, vulputate sed, pretium id, urna. Suspendisse potenti.</span></small>

<script type="text/javascript">

/*
Typing Text Script
Last updated: 18/11/05
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
hundreds more DHTML scripts, and Terms Of
Use, visit http://www.dynamicdrive.com/.

Rewritten by Twey to be compatible with Firefox
(and now Konqueror and presumably Safari).
The script will strip all HTML tags from the text, but
non-supporting browsers won't. This will allow you to
hide the text or display differently on such browsers.
*/

interval = 100; // Interval in milliseconds to wait between characters

if(document.getElementById) {
t = document.getElementById("typing");
if(t.innerHTML) {
typingBuffer = ""; // buffer prevents some browsers stripping spaces
it = 0;
mytext = t.innerHTML;
t.innerHTML = "";
typeit();
}
}

function typeit() {
mytext = mytext.replace(/<([^<])*>/, ""); // Strip HTML from text
if(it < mytext.length) {
typingBuffer += mytext.charAt(it);
t.innerHTML = typingBuffer;
it++;
setTimeout("typeit()", interval);
} else {
t = document.getElementById("typing");
if(t.innerHTML) {
typingBuffer = ""; // buffer prevents some browsers stripping spaces
it = 0;
mytext = t.innerHTML;
t.innerHTML = "";
typeit();
}
}
}
</script>Untested.

AJRussell
01-15-2006, 05:26 PM
Thank you.

That worked great. And, thank you for responding so quickly.

AJRussell :)

Glen
02-04-2006, 10:56 AM
Hi just thought i would add that you can easily use this as an external js file by encasing the if(document.getElementById){ part in a function and call it at the end of your document to check all using it.

DreamMover
05-30-2006, 01:55 AM
This Script is amazing i love it.... there is something els i was wondering about also..... some sort of tweak or what not...

I was wondering if you can Make the Text Pause for an X-amount of time before it continues to the next line.. just to make it look as if someone is acctually typing on the other end hehehe... thanks.

djr33
05-30-2006, 02:48 AM
Shouldn't be too hard, I suppose... just adding a function on the occurance of a line-break character in the inputted text... would require a bit of scripting, though.
Not my area, sorry... someone should know.

Twey
05-30-2006, 11:35 AM
The script I posted here is now obsolete. I wrote a better version (http://dynamicdrive.com/dynamicindex10/text5.htm), with support for HTML tags and entities, and DD accepted it and deleted the old one.
Using the old version, it's actually fairly tricky. Using the new version, this is simple enough:
} else if(this.origText.charAt(this.currentChar) == ">" && this.inTag) {
this.tagBuffer += ">";
this.inTag = false;
this.currentText += this.tagBuffer;
this.currentChar++;
if(this.tagBuffer != "<br>") this.run();
else window.setTimeout(this.run, 1000);
return;

djr33
05-30-2006, 01:45 PM
Gah. You can ignore my post above... somehow I missed all of the posts... didn't realize there were any responses. Maybe I hadn't refreshed in a while.

Anyway, glad Twey figured it out.

//leaving now. :)

jnthnu
09-24-2006, 11:24 PM
} else if(this.origText.charAt(this.currentChar) == ">" && this.inTag) {
this.tagBuffer += ">";
this.inTag = false;
this.currentText += this.tagBuffer;
this.currentChar++;
if(this.tagBuffer != "<br>") this.run();
else window.setTimeout(this.run, 1000);
return;


This doesn't seem to work for me - I get "Error: this.element has no properties" and it stops after the first line (when it gets to the first <br>.)

Any suggestions? I'm actually trying not only to have it pause for X milliseconds after each line, but clear each line and type the next in its place, which is also proving to be finicky...

Twey
09-25-2006, 06:22 PM
Try:
if(this.tagBuffer != "<br>") this.run();
else {
var me = this;
window.setTimeout(function(){me.run();}, 1000);
}

Masry
01-21-2007, 03:20 PM
Hi ,

I'm sorry that my first post is asking for some thing :o
All what I need that when the first line ends I want it to be replaced with another line then the other line with another one .....and so on for X of times , and when lines finished it's repeated again .

Can that be done ? :confused:

Twey
01-21-2007, 03:36 PM
if(this.tagBuffer != "<br>") this.run();
else {
var me = this;
this.currentText = "";
this.currentChar = 0;
window.setTimeout(function(){me.run();}, 1000);
}

mburt
01-21-2007, 03:39 PM
You have to explain to the OP to add this to the script rather than just replacing, correct?

Twey
01-21-2007, 03:43 PM
If s/he's read through the rest of the thread, s/he should know what to do.

Masry
02-16-2007, 01:03 PM
Hi ,

Thanks alot for replying me ..
I know that I might be look like an idiot but I really didn't know what to do with the code you gave to me ..
And I really readed the whole thread many times ..

So would you please give me the full modified script code and tell me where to put my lines 1,2,3 etc...


Thanks alot ..:o

Monstar
02-18-2007, 09:12 AM
You have to explain to the OP to add this to the script rather than just replacing, correct?
Correct.

Twey
02-18-2007, 02:06 PM
It goes in the place of the code I previously marked red.

Twey
04-25-2007, 08:29 AM
Thread locked and the last two queries moved to separate threads.