Paragraphs in Typing Text

**Twey** · 03-18-2006, 03:39 PM

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.

Originally Posted by John

You can use unlimited spans

But nothing else.

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.

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.

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

Of course I do. I'm British.

I used it here to illustrate the point that any character could be used.

**Zarite Prime** · 03-18-2006, 03:47 PM

Hi Twey,

Fantastic !!!

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.

I hope you don't mind.

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

Zarite Prime

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

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.

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

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

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.

Zarite Prime

**Twey** · 03-18-2006, 05:14 PM

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.

Thread: Paragraphs in Typing Text

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions