BB Code Enhancements - Text Typer BBCode

The Text Typer BB Code For vBulletin
by Thelonius Beck

***NOTE: Though I've indicated vB Version 3.8.x, there is no reason that this should not work in ANY vB version.***

For this fun and simple BB Code, you need only upload one (1) file, make a single template edit, and add a single CSS definition.
Let's get started.

1. First we upload the 'js' file to our forum root directory. For me, this is the 'public_html' directory, but yours may well be 'public_html/forum' or 'public_html/forums'.
2. Now we open our Admin CP > Styles & Templates > Style Manager > All Style Options (making sure to choose the correct style)
   Add to the bottom of your 'headinclude' template:
   

   <!-- Text Typer -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
   <script type="text/javascript" src="js/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>
   <script type="text/javascript">
   jQuery(function($){
       var typrs = $('.typer'), typng = [], tl = typrs.length, typr = 0;
       typrs.each(function(i){
           typng[i] = [$(this), new TypingText(this, 100, '_', delayType)];
       });
       function typeThem(){
           typrs.hide();
           typng[typr = typr % tl][0].show();
           typng[typr++][1].run();
       }
       function delayType(){
           setTimeout(typeThem, 3000);
       }
       typeThem();
   });
   </script>
   <!--/Text Typer -->

3. If you like, you can preformat the Text Typer by adding code to your 'Additional CSS Definitions'. It's not required, but I think it adds to the effect.
   
   I was going for an "80's Sci Fi thinking computer" look with mine. Looks great on my black background. You do what looks best for your style(s).
   

   /* ***** Text Typer ***** */
   
   .typer{
        font-family: lucida console;
        font-weight: bold;
        color: #00ff00;
   }

   *Click Save* (NOTE: If you use multiple styles, you will need to repeat steps 2 & 3 for each style you use.)
4. Now, for the final step, we go Admin CP > Custom BB Codes > Add New BB Code.
   • Title:

     Text Typer

   • BB Code Tag Name:

     typer

   • Replacement:

     <span class="typer">{param}</span>

   • Example:

     [typer]Your Text Here...[/typer]

   • Description:

     Self typing text effect.

   • Use {option}:

     No

   • Button Image (Optional):

     I Really Have No Idea What A 'Text Typer' Button Should Look Like, So Suggestions Are Welcome

   • Remove Tag If Empty:

     Yes

   • Disable BB Code Within This BB Code:

     Yes

   • Disable Smilies Within This BB Code:

     Yes

   • Disable Word Wrapping Within This BB Code:

     No

   *Click Save* and we're done.

Now for the 'important' bit.
This code is specifically designed to show one(1) instance of the text typer effect at a time. Meaning that if more than one post on a page contains the [typer] code, they will take turns displaying it. Also, being Java based, the effect will not show on 'Quick Reply' until the page is refreshed.

Please Note: I did not write the Text Typer script. I merely made it work as a vBulletin BB Code.
The Typing Text script utilized for this BB Code was written by 'Twey' at Dynamic Drive, and is available for download HERE. He has attached a notice of authorship to the code, and I have to ask that you DO NOT REMOVE IT.
The jQuery functions were done by 'jscheuer1', also at Dynamic Drive. You can find the original code posted HERE.

For a preview of the functioning BBCode go HERE

[Thelonius Beck]

Originally Posted by Hornstar

Thanks for taking a look.
http://www.gamerzneeds.net/forums/sp...ml#post1659611

As I feared, it's your BBCode name itself.

Your post shows you posting [typer]word word[/typer], but you BBCode list shows the BBCode to be [Text Typer].

To fix this, just go:

AdminCP> Custom BB Codes > BB Code Manager > Text Typer

Then change the second input field, 'BB Code Tag Name:', from ( Text Typer ) to ( typer ). All will be resolved.

*Parenthesis are for clarity only, of course, don't put them into the input field.

[Hornstar]

Originally Posted by Thelonius Beck

As I feared, it's your BBCode name itself.

Your post shows you posting [typer]word word[/typer], but you BBCode list shows the BBCode to be [Text Typer].

To fix this, just go:

AdminCP> Custom BB Codes > BB Code Manager > Text Typer

Then change the second input field, 'BB Code Tag Name:', from ( Text Typer ) to ( typer ). All will be resolved.

*Parenthesis are for clarity only, of course, don't put them into the input field.

Thanks, I must be going blind. Don't know how I missed that. I must not have pressed copy for that second one.

So is this working correctly: http://www.gamerzneeds.net/forums/sp...ml#post1659611


I thought on yours it started typing straight away, but on mine it appears to show you the whole text, and than start typing, and than it just keeps repeating. (I might have to check out your demo again).

[Thelonius Beck]

Not a problem.

Yes, everything looks to be working A-OK there. I think what you're seeing as it showing you the full text first is a byproduct of load time. I've noticed it before too, but I really just think that the script reached the end of the sentence before the page was done loading as I've also seen it "start" mid sentence.

It all makes more sense once you get a couple posts in a row using that code, as you start to see the cycle it runs in. It repeats (as you noted), but only after it has run each instance of code on the page.

ie.

Post #1 runs code-clears
then post #2 runs code-clears etc.

then it starts over with post #1 again.

I dunno, I'm rambling now. I keep feeling like I can't properly explain it. lol

[Alfa1]

Originally Posted by Thelonius Beck

That's a really great idea. I'll look into it.

EDIT: Do you already have a news ticker installed?

Yes, I have the vbnews ticker installed.

[Thelonius Beck]

Originally Posted by Alfa1

Yes, I have the vbnews ticker installed.

OK, I was just checking to see what kind of features you wanted out of a News Ticker.

I've looked at the code for that one, and there's no good way to integrate a typed effect with it, so I'll see if I can come up with a scratch build that does all vbnews ticker does.

[Alfa1]

Originally Posted by Thelonius Beck

I've looked at the code for that one, and there's no good way to integrate a typed effect with it, so I'll see if I can come up with a scratch build that does all vbnews ticker does.

That would be awesome.

[Hornstar]

I was wondering, is there any modification that can make certain BBCode like this one, only work in certain forums?

[FreshFroot]

This looks very promising... I think with more tweaks and all.. it will be really awesome!

[Thelonius Beck]

Originally Posted by Hornstar

I was wondering, is there any modification that can make certain BBCode like this one, only work in certain forums?

I dunno. Once I recover a bit from Friday's shoulder surgery, I'll do a search. It sounds usefull.

Originally Posted by FreshFroot

This looks very promising... I think with more tweaks and all.. it will be really awesome!

What type of tweaks were you thinking about?

[FreshFroot]

Originally Posted by Thelonius Beck

I dunno. Once I recover a bit from Friday's shoulder surgery, I'll do a search. It sounds usefull.




What type of tweaks were you thinking about?

Well the only problem I have is that you have to wait for each message as you mentioned. So if I was going to a thread to view the last post.

I am stuck waiting mins for the last post to show up.