Paragraphs in Typing Text

Script: Typing text

http://dynamicdrive.com/dynamicindex10/text5.htm

Hello,

I did a search on Typing Text and couldn't find the answer to this question, or even if it is possible, but I hope it is. Read on ...

Is it possible to use the "Typing Text" script with some text that you want to show in several paragraphs? For instance, let's say that I have the following text file that I want to type out on a page:

The Haven Expanse was rocked this week by two explosions of violence which left three Nations reeling with political fallout.
Paragraph Break
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 ut 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.
Paragraph Break
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.

OK, where you see the Paragraph Break's, I would like for the typing to skip to another line and continue. Obviously I now realize that other tags don't work inside the span tags. I tried enclosing each paragraph in it's own span tags but it only types out the first paragraph.

Anybody have any idea what I might do to make this work?

Thanks in advance,
Zarite Prime

A <p> won't go inside a span tag. However, you can use <br>.

Quote:

---

Originally Posted by Twey

A <p> won't go inside a span tag. However, you can use <br>.

---

Hi Twey,

Thanks for responding so quickly.

I had already tried both <p> and <br> and found out that <p> totally crashes the browser and the 2 <br> tags between each paragraph works for the first paragraph only. In other words, what happens is that when the page comes up the second and third paragraph are already on the page immediately and the first paragraph is the only one that uses the typing effect. I then tried wrapping the 3 paragraphs inside a <pre></pre> preformatted block, both inside and outside the <span></span> tags. That had the effect of scrolling the typing for all 3 paragraphs to the right, all on one line, not what I was looking for.:eek:

Finally, I tried changing the ID of each paragraph (typing1 for paragraph one, etc.) and putting the JS code below each paragraph with the changed ID, but that didn't work either. What happened there was that the 3rd paragraph (id="typing3") typed out correctly, but only the first letter of paragraphs 1 and 2 were typed.:(

Anything else you can think of that I might try?

Zarite Prime

You can use something other than a <span>; that was only given as an example, and to avoid confusion. In your case, I think a <div> would be appropriate. Just keep the ID the same.

Quote:

---

Code:

---

* Typing Text script- Dy Trey @ Dynamic Drive Forums

---

---

ddadmin: eh?! Dy Trey? I take it this was not a good day for typographical accuracy? :p

Hi Twey,

OK, I tried it with <div> tags instead of <span> tags, with both the <br> tags and the <p> tags, but they don't do anything. All 3 paragraphs are typed without paragraph breaks :( .

I might try one more thing, setting up each paragraph in a 3 row table inside the <div> tags, but I have a feeling that won't work either.

<sigh> I may have to just resign myself to the fact that what I'm trying to do is just not possible.

Anything else you can think of that I might try?

Zarite Prime

Ack! That was daft: I forgot what I built into my own script. Yes, the script will remove any HTML tags. This is bad; what was I thinking? The old version allowed $ to be used as a linebreak character. Let's bring this back.

Code:

---

<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 = 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) == "$" ? "<br>" : mytext.charAt(it));
    t.innerHTML = typingBuffer;
    it++;
    setTimeout("typeit()", interval);
  }
}
</script>

---

Ah, but what if you wanted to use $ in the text? Here is my solution:

Code:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p {
text-indent:1em;
}
</style>
<script type="text/javascript">
if(document.getElementsByTagName)
document.write('<style type="text/css">\n\
.typing {\n\
display:none;\n\
}\n\
<\/style>')
</script>
</head>
<body>
<p><span class="typing">Pluto is the ninth planet in the solar system. Discovered in 1930 and immediately classified as a planet, its status is currently under dispute. Pluto has an eccentric orbit that is highly inclined in respect to the other planets and takes it inside the orbit of Neptune. Its largest moon is Charon, discovered in 1978; two smaller moons were discovered in 2005.</span>
</p>
<p><span class="typing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</p>
<p><span class="typing">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
</p>
<script type="text/javascript">

/****************************************************
* Typing Text script- Dy Trey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/

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

function weType(){
if(document.getElementsByTagName) {
  typ = document.getElementsByTagName('span');
for (var i_tem = 0; i_tem < typ.length; i_tem++)
if (typ[i_tem].className=='typing'){
t = typ[i_tem]
break
}
  if(t.innerHTML) {
    typingBuffer = ""; // buffer prevents some browsers stripping spaces
    it = 0;
    mytext = t.innerHTML;
    t.innerHTML = "";
    if (t.className=='typing')
    t.className=''
    else return;
    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);
    return;
  }
  else
  for (var i_tem = 0; i_tem < typ.length; i_tem++)
  if (typ[i_tem].className=='typing'){
  weType();
  return;
  }
}

weType();
</script>
</body>
</html>

---

Yes, I realized this was far from perfect under all circumstances, and I was working on a more comprehensive solution as you posted that. Here it is.
The main body of the script is in TypingText.js. Save this to your webserver and include it into your page, preferably in the head:

Code:

---

<script type="text/javascript" src="TypingText.js">
/****************************************************
* 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
****************************************************/
</script>

---

Then, instantiate a new object for all the elements you want to apply the effect to, and call the TypingText.runAll() method:

Code:

---

<p id="penguin">Some text goes here.%This is on a new line, thanks to the \% character.</p>
<p><span id="typing">Some text goes here.&#163;This is on a new line, thanks to the \&#163; character.</span></p>

<script type="text/javascript">
new TypingText(document.getElementById("penguin"), 100, '%');
new TypingText(document.getElementById("typing"), 100, '&#163;');
TypingText.runAll();
</script>

---

Documentation is included in the TypingText.js file.

I still like my solution better. You can use unlimited spans with the class="typing" attribute set, start them and stop them wherever you like with whatever HTML you wish to use in between and/or around them without having to worry about any special characters.

Still, there is much to be said for oo scripting, perhaps a blending of the two methods would be even better.

Oh, and your link to your script is, at the moment, broken. Nice custom 404 though it returned me to where I was in the old window in the new window the forum had created.

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

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 '&#163;' 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.

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

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

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

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.