Getting Typing Text to work with a class

**General_Sun** · 01-04-2009, 02:21 AM

1) Script Title: Typing text

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex10/text5.htm

3) Describe problem:
Typing text currently requires you to use an id for your layer. How do I get it to apply to multiple layers via a class?

Thanks.

**jscheuer1** · 01-04-2009, 01:40 PM

If document.getElementsByClassName were universally supported, it would be a simple matter as the TypingText function accepts any element object as its first argument.

Even so, with a little extra code we can still accomplish the same result even for browsers that don't support document.getElementsByClassName:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
</head>
<body>
<div class="typer">Thanks for visiting <a href="http://www.dynamicdrive.com/">Dynamic Drive!</a> 
Wow, HTML gets properly typed out too!</div>

<p class="typer">This text has a <b>Bold Section</b> and <br>a line break thanks to the &lt;br&gt; tag.</p>

<script type="text/javascript">
(function(){
 var getClass = function(c){
  if(document.getElementsByClassName) return document.getElementsByClassName(c);
   var els = document.all || document.getElementsByTagName('*'), ar = [],
   re = new RegExp('\\b' + c + '\\b');
   for(var i = 0; i < els.length; ++i)
    if(re.test(els[i].className))
     ar[ar.length] = els[i];
  return ar;
  };

 //Define typing for the typer class:
 for(var c = getClass("typer"), i = 0; i < c.length; ++i)
  new TypingText(c[i]);
 
 //Type out all:
 TypingText.runAll();
})();
</script>
</body>
</html>

**General_Sun** · 01-04-2009, 09:34 PM

Oh thank you so much, that works marvelously. Is there any way to prevent the script from running on hidden elements but run only when the element is shown (with jquery in my case).

**jscheuer1** · 01-04-2009, 10:22 PM

Yes, but exactly how would depend upon what the rest of your code is like. While setting up you can do:

Code:

<script type="text/javascript">
(function(){
 TypingText.instances = [];
 var getClass = function(c){
  if(document.getElementsByClassName) return document.getElementsByClassName(c);
   var els = document.all || document.getElementsByTagName('*'), ar = [],
   re = new RegExp('\\b' + c + '\\b');
   for(var i = 0; i < els.length; ++i)
    if(re.test(els[i].className))
     ar[ar.length] = els[i];
  return ar;
  };
 //Define typing for the typer class:
 for(var c = getClass("typer"), i = 0; i < c.length; ++i)
 TypingText.instances[i] = new TypingText(c[i]);
 
 //Type out all:
 //TypingText.runAll();
})();
</script>

Now nothing will run onload of the page. But each instance will have a reference:

Code:

TypingText.instances[0].run();

will run the first instance on the page.

Code:

TypingText.instances[1].run();

will run the second instance on the page, and so on.

If you can integrate that into your jQuery code, you are all set. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**General_Sun** · 01-05-2009, 11:17 PM

Thank you, great post.

I can't show you my website yet unfortunately, but I'm trying to think about how I can integrate your example into my code, and unfortunately it sounds a bit hard.

What's happening with me is that I have many hidden divs which are shown sequentially onclick.

So for example:

Code:

$(this).hide().parent("span").next("span").show().addClass('this-is-visible').children();

Normally I would just add a count inside this code and get it to sequentially display the typingtext.

However, there is another layer of div I have here, and so, on the last span, span:last-child I do something different:

Code:

$(this).hide().parents("span").parents("div").hide().next("div").show().children('span:first').show().addClass('this-is-visible');

So this is a bit more complicated. I can use a variable to count how many spans I have per div and set the #of the typer accordingly, but is there a way to write the typer in such a way that it runs for the parent span on click?

So for instance:

HTML Code:

<div><span class="typingspan" style="display:none;">Text that I want to be typed out <span onclick="runtyper for this particular typingspan"></span></span></div>

Thank you for all your help.

**jscheuer1** · 01-06-2009, 12:18 PM

That's some pretty convoluted jQuery code you've got there. Anyways, once you've setup your array (TypingText.instances), since each instance has a property named element which is equal to the element initialized for that instance, you should be able to work it out from there.

Here is an oversimplified non-jQuery example of the concept:

Code:

document.onclick = function(e){
for(var i = 0; i < TypingText.instances.length; ++i)
if(TypingText.instances[i].element == e.target)
TypingText.instances[i].run();
}

Oversimplified, because with it the element itself must be displayed and clickable, and the code will not work in IE. But hopefully you get the idea.