Paragraphs in Typing Text

[Zarite Prime]

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

[Twey]

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

[Zarite Prime]

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.

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

[Twey]

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.

* Typing Text script- Dy Trey @ Dynamic Drive Forums

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

[Zarite Prime]

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

[Twey]

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.

<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>

[jscheuer1]

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

<!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>

[Twey]

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:

<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:

<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.

[jscheuer1]

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.

[jscheuer1]

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