Thelonius Beck
03-20-2011, 10:00 PM
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.
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'.
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 -->
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.)
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:Your Text Here...
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 (http://www.dynamicdrive.com/dynamicindex10/text5.htm). 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 (http://www.dynamicdrive.com/dynamicindex10/text5.htm).
For a preview of the functioning BBCode go HERE (http://www.crowsnestforums.com/showthread.php?t=3072)
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.
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'.
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 -->
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.)
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:Your Text Here...
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 (http://www.dynamicdrive.com/dynamicindex10/text5.htm). 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 (http://www.dynamicdrive.com/dynamicindex10/text5.htm).
For a preview of the functioning BBCode go HERE (http://www.crowsnestforums.com/showthread.php?t=3072)