vb.org Archive - BB Code Enhancements - Text Fade (Rainbow Faded Text) BBCode

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- Modification Graveyard (https://vborg.vbsupport.ru/forumdisplay.php?f=224)

- - BB Code Enhancements - Text Fade (Rainbow Faded Text) BBCode (https://vborg.vbsupport.ru/showthread.php?t=246569)

BirdOPrey5

07-14-2010 10:00 PM

Text Fade (Rainbow Faded Text) BBCode

This BB Code produces a rainbow like text fade effect. It uses Javascript to put multiple html font color tags between characters. There are two ways of doing this, the first method uses an external javascript file. In the second post you add the javascript to every page via the header template instead, this may be better if you expect the rainbow text to be called many times on a single page.

Demo: here.

Screen Shot:
https://vborg.vbsupport.ru/external/2011/08/71.jpg

Before You Start - See tyteen4a03's post (#18) for additional code changes that will allow you to rainbow color usernames and remove a limitation where you couldn't use double-quotes (").

1. Download the attached textfade.js.txt file, rename it to textfade.js, and upload it to your forums/clientscript folder.

2. Add a new BBCode

Title: Text Fade
BB Code Tag Name: fade
Replacement:

Code:

<script type="text/javascript" src="/forums/clientscript/textfade.js"></script> 

<script>fadeText("{param}");</script>

*Adjust the path to the textfade.js file as necessary. For example if your forum is installed in the web root (www.my-domain.com/) instead of (www.my-domain.com/forums/) then your path would simply be src="/clientscript/textfade.js"

Example: [fade]This code fades text in a rainbow.[/fade]
Description: This uses javascript to make a smooth rainbow effect in text.
Use Option: No
Button Image: (optional) https://vborg.vbsupport.ru/external/2011/08/71.jpg
Remove Tag If Empty: Yes
All Disable Options: Yes except disable word wrapping: No

Limitations:

You can not use other bbcode within this bbcode, but you can use it OUTSIDE of this bbcode to change the font style/color/type etc...
You can't use smilies within this bbcode.
You can't use the double quote (") within this bbcode.

This BB Code was tested on vb4 but should work on all current versions.

Please mark as installed if you use this. :)

BirdOPrey5

07-15-2010 01:00 AM

Alternate Method- no external file.

1. In Style Manager -> All Style Options edit the headinclude Template for each style
At the bottom add:

Code:

<script type="text/javascript">

function makeHex()

{

  this.length = 16;

     this[1]  = "0";

     this[2]  = "1";

     this[3]  = "2";

     this[4]  = "3";

     this[5]  = "4";

     this[6]  = "5";

     this[7]  = "6";

     this[8]  = "7";

     this[9]  = "8";

     this[10] = "9";

     this[11] = "A";

     this[12] = "B";

     this[13] = "C";

     this[14] = "D";

     this[15] = "E";

     this[16] = "F";

     return this;

}

newHex = new makeHex();



function con2hex (x)

{

     if( x < 17)

          x = 16;

     var top = (x / 16);

     var sub = top + '';

     sub = sub.substring (0, 2);

     top = parseInt (sub, 10);

     var before = newHex[top + 1];

     var bot = x - top * 16;

     if (bot < 1)

        bot = 1;

     sub = bot + '';

     sub = sub.substring (0, 2);

     bot = parseInt (sub, 10);

     var after = newHex[bot + 1];

     var thestring = before + '' + after;

     return thestring;

}



  function fadeText (intext)

{

     intext = intext.substring (0, intext.length);

     colorx = 255;

     z = colorx / intext.length;

     for (var i = 0; i < intext.length; i++)

     {

        colorx = 255 * Math.sin (i / (intext.length / 3));

        colory = con2hex (colorx);

        colorz = z * i;

        colorw = con2hex(colorz);

        k = intext.length;

        j = k - i;

        if(j < 0)

           j = 0;

        coloru = z * j;

        colorv = con2hex(coloru);

        document.write("<font color=\"#" + colorv + colory + colorw + "\">" + intext.substring(i, i + 1) + "</font>")

     }

}

</script>

2.Add a new BBCode

Title: Text Fade
BB Code Tag Name: fade
Replacement:

Code:

<script>fadeText("{param}");</script>

Example: [fade]This code fades text in a rainbow.[/fade]
Note- the example won't work in Admin CP because the standard header is not loaded, but it will work in your forum.

Description: This uses javascript to make a smooth rainbow effect in text.
Use Option: No
Button Image: (optional) https://vborg.vbsupport.ru/external/2011/08/71.jpg
Remove Tag If Empty: Yes
All Disable Options: Yes except disable word wrapping: No

All the same limitations as the original method in the top post apply.

asj	07-15-2010 11:24 AM

the problem of the Arabic language ?

BirdOPrey5

07-15-2010 01:56 PM

I'm sorry I can't try this on other languages, maybe if you can describe the problem you're having? I have marked this to allow 'translations' so if someone who knows what issues might come up with other languages are free to post versions for those other languages.

From the screen shot it appears to be working?

BirdOPrey5

07-15-2010 05:40 PM

If you want the rainbow to fade the other direction (VIBGTOR instead of ROYGBIV) then change the line near the bottom from:

Code:

document.write("" + intext.substring(i, i + 1) + "")

Code:

document.write("" + intext.substring(i, i + 1) + "")

https://vborg.vbsupport.ru/external/2010/07/39.jpg

whitedd

07-16-2010 04:30 AM

...is it posible to make fade text in name of usergroups?...

BirdOPrey5

07-16-2010 10:15 AM

Quote:

Originally Posted by whitedd (Post 2069870)

...is it posible to make fade text in name of usergroups?...

A 'search' on this topic revealed this mod:
https://vborg.vbsupport.ru/showthread.php?t=208274

But I've never used it. My guess is if you end up using that mod you could use it to make rainbow bbcode as well... [s]use the same settings as above but don't bother uploading the javascript file here nor putting the javascript in post #2 in the header. Then instead of the replacement text I provided use:[/s]

Code:

{param}

[s]That should do it and save you from installing 2 mods.[/s]

And yes that mod should work on 4.0 too, no reason it wouldn't.

The only 'issue' with that mod is that it isn't a rainbow per say because it doesn't fade from red-to-orange-to-yellow... etc... (ROYGBIV) but I'm sure that won't bother most people.

Xencored

07-28-2010 01:36 AM

Code:

{param}

Dont work the "{param}" is just sitting there doing nothing

anyways nice bbcode thanks installed

also tryed

Code:

 

Without luck

BirdOPrey5

07-28-2010 01:46 AM

ehh.. sorry. Thanks.

sulasno

08-08-2010 05:23 AM

do I need special rights to upload the js file to the server ?

BirdOPrey5

08-08-2010 12:13 PM

If you're able to upload files (usually via FTP) then you don't need any special permissions to upload javascript (.js) files.

COL NIL SATIS

08-08-2010 03:28 PM

Brilliant mate ...works A1 on 4.0.3 ...look bling too ...rates 5 and hits install

LatinoCheats

08-08-2010 04:20 PM

Friend, I do not want to accept the changes.

After boardcode and save, I get the gray screen, ie, no more anything goes.

Not seem to accepted JAVA SCRIPT.

I installed several BBCodes yours, but sorry, it does not want to install. Can you help?

Thanks

BirdOPrey5

08-08-2010 06:17 PM

Quote:

Originally Posted by LatinoCheats (Post 2080933)

I'm doing my best to understand you but I'm not exactly sure what the problem is.

Did you rename and upload the javascript file to your clientscript directory?

Maybe you can tell me exactly when you are having the problem= installing the code, or trying to use it?

sulasno

08-09-2010 12:12 AM

Quote:

Originally Posted by BirdOPrey5 (Post 2080816)

If you're able to upload files (usually via FTP) then you don't need any special permissions to upload javascript (.js) files.

thanks
got it uploaded
not sure whether the ftp client has a bug

LatinoCheats

08-09-2010 01:15 PM

Ok, I explain better. Excuse me, is that I use google translator.

I make all the correct procedures and I "Save BBcode" I do not generate changes.

The screen is gray, then change. That is, it generates no change.

But it seems that is why the code works with "JAVA SCRIPT." I do not understand.

Here a picture of the error:

https://vborg.vbsupport.ru/external/2010/08/52.jpg

Thanks

BirdOPrey5

08-09-2010 03:18 PM

Quote:

Originally Posted by LatinoCheats (Post 2081285)

OK the first issue I see with the picture if that you are in "Styles & Templates." To add a BB Code you need to be in "Custom BB Codes" -> "Add a new BB Code" then follow the instructions in the first post.

"Java Script" is a programming language used on websites to make pages more interactive and do things beyond the basic display of text and graphics.

http://en.wikipedia.org/wiki/JavaScript

In order to make the text fade colors it utilizes "Java Script" - this is a short program that has been written in order to manipulate the text. You need to upload the attached textfade.js.txt file via FTP to your "clientscript" directory and rename it to "textfade.js" (Unfortunately we can't attach .js files in the forum so I had to make it a .txt file).

tyteen4a03

08-10-2010 01:50 PM

Added some bodaudinh's code in to make it support Username colouring and (should) fix the double quotes bug. Thanks to him for the code!

1. Replace fadeText with:

Code:

function fadeText (intext)

{

    var result="";

    intext = intext.substring (0, intext.length);

    colorx = 255;

    z = colorx / intext.length;

    for (var i = 0; i < intext.length; i++)

    {

        colorx = 255 * Math.sin (i / (intext.length / 3));

        colory = con2hex (colorx);

        colorz = z * i;

        colorw = con2hex(colorz);

        k = intext.length;

        j = k - i;

        if(j < 0)

          j = 0;

        coloru = z * j;

        colorv = con2hex(coloru);

        result += ("<font color=\"#" + colorv + colory + colorw + "\">" + intext.substring(i, i + 1) + "</font>")

    }

        return result;

}

2. Add these 2 functions below fadeText function:

Code:

function showRainbow(classname){

    var txtValue = "";

        var b = getElementsByClassName(classname);



    for (var i = 0; i < b.length; i++ ) {

                txtValue = fadeText(b[i].innerHTML,1);

        b[i].innerHTML = txtValue;

    }

}



function getElementsByClassName(classname, node) {



        if(!node) node = document.getElementsByTagName("body")[0];

                var a = [];

                var re = new RegExp('\\b' + classname + '\\b');

                var els = node.getElementsByTagName("*");

                for(var i=0,j=els.length; i<j; i++)

                        if(re.test(els[i].className)) a.push(els[i]);

        return a;

}

3. Replace the BBcode replacement bit to:

Code:

{param}

(which also means you can turn off all Disable options)
3. Add this in anywhere in footer:

Code:

<!-- DOUBLE RAINBOW ALL THE WAY CROSS THE SKY -->

<script type="text/javascript"> 

<!--

showRainbow('rainbow');

//  End -->

</script>

<!-- WOW WOW OH MY GOD LOOK AT THAT RAINBOW -->

BirdOPrey5

08-10-2010 05:10 PM

Very cool.Thanks for the code- will update the top post.

8thos

10-02-2010 01:47 AM

This BB code doesn't work anymore.

BirdOPrey5

10-02-2010 02:08 AM

Quote:

Originally Posted by Octavius. (Post 2105765)

This BB code doesn't work anymore.

What version of vbulletin are you running?

COL NIL SATIS

10-02-2010 07:49 PM

Quote:

Originally Posted by Octavius. (Post 2105765)

This BB code doesn't work anymore.

Still works flawlessly on 4.0.6 ...before posting random this doesnt work etc,you should always explain what issues etc you are having :confused::confused::confused:

8thos

10-02-2010 08:17 PM

Quote:

Originally Posted by BirdOPrey5 (Post 2105769)

What version of vbulletin are you running?

4.06

Quote:

Originally Posted by COL NIL SATIS (Post 2106040)

Still works flawlessly on 4.0.6 ...before posting random this doesnt work etc,you should always explain what issues etc you are having :confused::confused::confused:

It worked, then stopped working. I follow directions.

*checks again*

Wow look at that! It's working again! But now instead of bringing me back to my post, it brings me to a white page with just the text.

WTF...

BirdOPrey5

10-02-2010 09:07 PM

I really doubt the issue is being caused by this bb code but if you can give me a link to a thread on your forum I'll take a look and see if I can figure it out.

I have it running on a 4.0.6 test board myself and it's working fine.

8thos

10-03-2010 12:25 AM

K thanks man.

koby411

10-23-2010 03:32 AM

Whenever I install this and make a post with the bbcode.. it sends me to a white page with just the text. So I'm going to have to remove this till this gets fixed.

BirdOPrey5

10-23-2010 11:46 AM

I've seen this happen in 1 other forum, there is another mod interfering with it- unfortunately I was never able to track down which one. Someone else has released a combined rainbow bb code and rainbow text usernames, you might want to try that and see if you get better results.

OldSchoolDSL

01-05-2011 08:43 PM

Working and Installed

4.1 PL2

RK KINGKONG

01-22-2011 09:33 AM

thank you you sir nice one , installed on 4.1.1 yeah the update you helped me do . have a great day

steveyos666

05-31-2011 01:51 PM

4.1.4

I love this so much I want to just set it as the default text for everything in my life

The problem is it doesn't play nice with other codes, size and bold italics etc etc and even asterisks

If you play with the ordering of the tags it you can get it to work somewhat but not fully

Here's an example of me using WYSIWYG to have the text size 7, bold, italic and underlined, when I clicked post I got this:

https://vborg.vbsupport.ru/external/2011/05/1.png

Is it just me? Is it 4.1.4's new horrible editor?

BirdOPrey5

05-31-2011 05:51 PM

The [FADE] BB Code should always be the INNER most code:

[FADE]Example[/FADE]

If this doesn't work on 4.1.4's new editor there's not much else to do. I don't have 4.1.4 and doubt I ever will so I can't test it. If someone else with 4.1.4 wants to improve upon the code they are welcome to re-release an updated version.

8thos

06-18-2011 03:59 AM

Quote:

Originally Posted by BirdOPrey5 (Post 2202154)

The [FADE] BB Code should always be the INNER most code:

[SIZE="3"][B][I][FADE]Example[/FADE][/I][/B][/SIZE]

If this doesn't work on 4.1.4's new editor there's not much else to do. I don't have 4.1.4 and doubt I ever will so I can't test it. If someone else with 4.1.4 wants to improve upon the code they are welcome to re-release an updated version.

Can you test it out on mine again?

BirdOPrey5

06-18-2011 09:50 AM

Sure, how do you want me to do that?

8thos

06-18-2011 06:56 PM

Quote:

Originally Posted by BirdOPrey5 (Post 2209361)

Sure, how do you want me to do that?

I gotta mod you again my bad I forgot. Okay try now please!

n00bl3t

08-07-2011 10:40 PM

Would really love to see this working for 4.1.4

All times are GMT. The time now is 06:45 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01308 seconds Memory Usage 1,837KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (12)bbcode_code_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (35)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: