Text Typer BBCode
 

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

   ---

   <!-- 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).
   
   Code:

   ---

   /* ***** 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:
     Code:

     ---

     Text Typer

     ---

   • BB Code Tag Name:
     Code:

     ---

     typer

     ---

   • Replacement:
     Code:

     ---

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

     ---

   • Example:
     Code:

     ---

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

     ---

   • Description:
     Code:

     ---

     Self typing text effect.

     ---

   • Use {option}:
     Code:

     ---

     No

     ---

   • Button Image (Optional):
     Code:

     ---

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

     ---

   • Remove Tag If Empty:
     Code:

     ---

     Yes

     ---

   • Disable BB Code Within This BB Code:
     Code:

     ---

     Yes

     ---

   • Disable Smilies Within This BB Code:
     Code:

     ---

     Yes

     ---

   • Disable Word Wrapping Within This BB Code:
     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

tagged and thanks

looks cool

Great, glad you like it. I know it's a silly little feature, but it's fun. I just hope someone gets some use out of it.

Actually I have been searching for something very similar for years. Is there any chance that you would release a typing ticker? Similar to this, but typing:
vB News Ticker - Your Blogs RSS Feeds and Forums in a Marquee

Awesome!

Update, Tried everything, refreshed page several times. It does not seem to parse the bbcode. Instead I see in the post [typer]words words words[/typer]

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

EDIT: Do you already have a news ticker installed?

Hmmm...odd.

The only thing I can think of that would cause that is incorrect BBCode parameters.

I even went so far as to remove the JavaScipt document & mess up the code in my 'headinclude' template and could not reproduce the issue.

As far as I know, even if you have it set to do nothing whatsoever, your BBCode should parse as long as what's in your tag matches what's in the 'BB Code Tag Name:' field.

Is there any way you could provide a link to an example of the failure? PMs accepted in case you don't want to post the link here.

Very Minor Update: (not enough for a version change)

I noticed that I had left an unnecessary <div></div> around the replacement code in the instructions.

Post & ReadMe file changed to reflect this.

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.

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

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

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.

That would be awesome.

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

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

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.

I had to remove this rofl

someone typed a message

Whooo
o
o
o
o
o
o
and another 40 lines downs.... WOW it was annoying lol

Hello, i am using it on VB 3.8.7

I did correct everything as you stated.

Nothing happens, i tried with Firefox 4 and IE 8

Any known bugs ?