Paragraphs in Typing Text

Printable View

Show 40 post(s) from this thread on one page

03-18-2006, 03:39 PM
Twey

Like this:

Code:

<script type="text/javascript"> function getElementsByClassName(oElm, strTagName, strClassName){ /* Written by Jonathan Snook, http://www.snook.ca/jonathan Add-ons by Robert Nyman, http://www.robertnyman.com */ var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/\-/g, "\\-"); var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); var oElement; for(var i=0; i<arrElements.length; i++){ oElement = arrElements[i]; if(oRegExp.test(oElement.className)){ arrReturnElements.push(oElement); } } return (arrReturnElements) } var e = getElementsByClassName(document, "*", "typing"); for(var il = 0;il < e.length;il++) new TypingText(e[il]); TypingText.runAll(); </script>

Someone else's getElementsByClassName function; I apologize, but I'm sure it's better than whatever I'd have written.

Quote:

Originally Posted by John

You can use unlimited spans

But nothing else.

Quote:

start them and stop them wherever you like

Starting can be done with the element.typingText.run() method. Stopping's a good idea. I'll add a .stop() method.

Quote:

with whatever HTML you wish to use in between and/or around them without having to worry about any special characters.

But you can't run them simultaneously. Personally, I'd rather have the special characters than have all that extra HTML just for a linebreak.

Quote:

Oh, and you have a '£' key on your keyboard? Figures. :)

Of course I do. I'm British. :p I used it here to illustrate the point that any character could be used.
03-18-2006, 03:47 PM
Zarite Prime

Hi Twey,

Fantastic !!!:D

This solves the problem perfectly.:) However, since I am in the US and may someday have a need of displaying the "$" Character using this script, I have made the following change to suit my own purposes ...
I changed the following line ...

Code:

typingBuffer += (mytext.charAt(it) == "$" ? "<br>" : mytext.charAt(it));

to the following ...

Code:

typingBuffer += (mytext.charAt(it) == "¶" ? "<br><br>" : mytext.charAt(it));

Since I can't imagine ever having to use the "¶" character when "typing" some text, this is a better implementation, at least for me.:cool: I hope you don't mind.

Thanks again for all the great, and quick, help.

Zarite Prime
03-18-2006, 04:19 PM
Zarite Prime

Hi Guys,

I didn't mean to get you guys all excited about this, but I guess that's what us newbies are here for. :p

I tried using <span> tags around the 3 different paragraphs but it only typed out one of the paragraphs (the first one I think).

Twey's solution, with the small change I made works perfectly for me, since I never plan to use the "¶" character in any text that I want to type.

I don't have the code posted at a url, but here's my code if you want to see how it works with the "¶" character between the first and second and second and third paragraphs.

Code:

<!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> <title>Commonwealth of Haven News</title> <meta name="GENERATOR" content="Arachnophilia 4.0"> <meta name="FORMATTER" content="Arachnophilia 4.0"> </head> <body bgcolor="peachpuff" text=""#800000"" link="#ff0000" vlink="#ff8080" alink="#ff8040"> <P ALIGN="center"> <FONT SIZE="6" COLOR="#800000"><U><CITE><B>NEWS RELEASE</FONT></B></CITE></U><BR><FONT SIZE="4" COLOR="#000080">{Stardate 1003.42}</FONT> <P ALIGN="left"> <span id="typing"> The Haven Expanse was rocked this week by two explosions of violence which left three Nations reeling with political fallout. ¶ In the first incident a seemingly low level dispute between the Zarite Confederation and the Helkaran Theocracy suddenly and dramatically became a major crisis of relations. While some details remain unclear the facts of the case were last night confirmed by Commonwealth sources. While entering orbit of Helkara an unarmed Zarite starship was locked onto and fired upon by Helkaran planetary defences. Struck by powerful lasers the ship immediately and catastrophically blew up. Initial findings suggest that there were no survivors. Captain and crew alike were incinerated in the fireball or perished following exposure to space. In an emergency session Parliament was riven by angry scenes. Pundits were amazed. While pointing out that the Helkara technically have the right to defend their borders, force continues to be viewed by almost all Commonwealth politicians as a last resort. ¶ In the second incident what should have been a historic occasion descended into chaos as a Volani vessel made the first recorded jump into a star system beyond Junction. While many of the details remain classified by the Volani government, what now seems clear is that the Volani ship was engaged and fired upon by a small fleet of alien ships as it entered the new system. Details of damage or casualties remain unconfirmed, but it seems the Volani ship survived the attack and fled in a direction not known. Whether the aliens are aggressive or afraid, or whether the entire episode was some sort of terrible mistake, is not known. Contact with the alien race is proving to be elusive. Worried faces at Parliament were easily found as politicians and pundits alike expressed fears that the Commonwealth was on the brink of a war with an unknown alien race. </span> <script type="text/javascript"> /**************************************************** * Typing Text script- By Twey @ Dynamic Drive Forums * Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com * This notice MUST stay intact for legal use ****************************************************/ interval = 25; // 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) == "¶" ? "<br><br>" : mytext.charAt(it)); t.innerHTML = typingBuffer; it++; setTimeout("typeit()", interval); } } </script> </body> </html>

If you want to see it, just save it as an html file, and view it in your browser. This is exactly the effect I wanted to achieve. :)

Zarite Prime
03-18-2006, 04:43 PM
Zarite Prime

Oh, if you didn't notice it in my code, I changed the interval to 25, so that the text would type a little faster. :cool:

Zarite Prime
03-18-2006, 05:14 PM
Twey

Quote:

I hope you don't mind.

Why would we mind? :)

/EDIT: I've finally done what I should have a while ago, and fixed the problems with HTML tags and entities, rather than finding new and more imaginitive work-arounds.

Show 40 post(s) from this thread on one page