vb.org Archive - Forum Display Enhancements - Super Display Suite [Animated Rainbow] vB4

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

- vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)

- - Forum Display Enhancements - Super Display Suite [Animated Rainbow] vB4 (https://vborg.vbsupport.ru/showthread.php?t=253499)

Super Display Suite [Animated Rainbow] vB4

NOTE: This is originally made by: AlchemyX to vB Version: 3.5.4
Original Topic: https://vborg.vbsupport.ru/showthrea...effects&page=6

I Just updated it to work with vB 4.0.8 or any other version.

First things... What is "Super Display Suite"?
Answer: This modification allows you to add DHTML and javascript text effects to various areas of your forums, for example, if you put it in the HTML Markup for your usergroups, then all of your users in that group, and any legend you may have, will display with these effects. You can also add them around different phrases and words in your template to make it even cooler.
This can be used ANYWHERE in your forum that allows HTML code! you can even, with a few minor changes, turn it into a BBCODE.

The modification currently has 3 animations.
1.) Shining - Like the car in Knight Rider (Where, oddly enough, the main character also plays the German coach in "Dodgeball") this effect runs over your text from right to left and vice versa, highlighting a letter at a time, making a kind of... neon lighting effect.; if you will.
2.) Glitter - Very similar to the Shining effect, except it chooses a random letter from the string to light up, then lights up for an amount of time based generally around the set speed for your span item, but it is slightly edited (randomly, as said before, by up to 10 integers in difference going positive, and another going negative... giving it a variable range of 50-70 if you put in 60 as the speed.) In the end, making a kind of "glittering" effect.
3.) A new class all it's own, the dynamically self retaining rainbow effect (I just HAD to say that) this little miracle splits your string up into individual characters, counts them, and then sets a percentile range of colors chosen specifically from a 16bit color code variance, and display them across your string, a perfect rainbow, animating from left to righ. This is probably not a good effect for small strings (8 or less characters) but it is wonderful in longer strings.

Install instructions:

- Upload all files of upload.zip to your root folder.
- In AdminCP, go to: Style Manager, in the style that you want, select "All Style Options" and click in "GO"
- In first line of header add:

Code:

<script language="javascript" src="header_color.js"></script>

- In the first line of footer add:

Code:

<script language="javascript" src="footer_color.js"></script>

You're done!

Using This Modification...
We're going to go over how to use this modification as a usergroup markup here, if you'd like to use it in your templates, just follow the basic idea herein.
Find your usergroup manager, and open up the userroup you would like to add the chosen effect to. (In usergroup markups, the following code needs to be on ONE line before you paste it, or else it will only paste the first line)
A note about speed: speed here is reversed, if you want it to be fast, set it to a low speed, if you want it to be slow, set it to a higher speed.

1.) To use the "Shine" animation: Being careful to replace
You can configure all color and speed if you want editing the s1.js.

LIVE PREVIEW: http://www.garenamaster-forum.com/me...iled.LGND.Kace
User: test
Pass: test123

add this is the first box of the usergroup html markup

Code:

<script language="javascript" src="s1.js"></script>

and this is the second box of the usergroup markup

Code:

</span>

It is not recomended that you remove the <b> tags here, as it would make the animation nearly pointless, because you would hardly be able to see it, if at all.

2.) To use the "Glitter" animation: Being careful to replace
You can configure the color if you want.

LIVE PREVIEW: http://www.garenamaster-forum.com/member.php?29-Lolo
User: test
Pass: test123

add this is the first box of the usergroup html markup

Code:

<b><i><font face="Palatino Linotype" color="#ffa500" style="background:url(pxg.gif) repeat-x">

and this is the second box of the usergroup markup

Code:

</font></i></b>

It is not recomended that you remove the <b> tags here, as it would make the animation nearly pointless, because you would hardly be able to see it, if at all.

3.) To use the "Rainbow" animation:
You can configure the color if you want.

LIVE PREVIEW: http://www.garenamaster-forum.com/me...?1-DarkSupremo
User: test
Pass: test123

add this is the first box of the usergroup html markup

Code:

<font color="red"><b><script language="javascript" src="r1.js"></script>

and this is the second box of the usergroup markup

Code:

</span></b></font>

Note: You can enclose the code here with <b> or <strong> (bold) if you like to add a thickness to your rainbow. Just make sure you add the <b> before <SCRIPT language="JavaScript"> in the opening markup; and the </b> after </span> in the closing markup.

That's it for now... REMEMBER, you can use these animations anywhere in your forum where HTML is allowed, in templates, in posts that allow html... anywhere :-)

nice idea but make website lagging....

I use on my forum, and no lag here :)

Your DEMO links:

Permissions are set to NOT allow guest views and you did NOT provide a test log-in account.

hmm.....i tried this and it jacked my forum all up...the entire forum was no lined up and out of wack!

Any help?

Added user and pass...

User: test
Pass: test123

Quote:

Originally Posted by djscoop (Post 2120595)

hmm.....i tried this and it jacked my forum all up...the entire forum was no lined up and out of wack!

Any help?

same with me mate, Im using vB v4.3

Un-installed for now

Quote:

Originally Posted by El Intocable (Post 2120631)

same with me mate, Im using vB v4.3

Un-installed for now

Glad it wasnt just me...i followed directions to a T!

Strange....

You fallowed the installation steps?
Uploaded the .js to root folder?
Pasted the first part in HEADER, not in HEADER INCLUDE, right?
Added the code to each group in User Group?

Tested here on v4.0.8 and worked 100%

if you did everything and still not worked, try this:

Another way to do it:

Instead of using .js

on first line of head, paste it:

Code:

<script type="text/javascript">

<!--

  function setFloatboxOptions() {

    fb.resizeDuration = 2.5;

    fb.imageFadeDuration = 2.5;

    fb.overlayFadeDuration = 0;

    fb.navType = 'both';

  };

//-->

</script><script type="text/javascript">

var rainbowcount = 0;

var glitcount=0;

var glitstring='';

var shimmercount=0;

var shimmerstring='';

var ie4 = false;

        if(document.all) {

                ie4 = true; 

        }       

        function setContent(name, value) {

                var d;  

                if (ie4) { 

                        d = document.all[name];

                } else {

                        d = document.getElementById(name);

                }       

                d.innerHTML = value;    

        }       



        function getContent(name) {

                var d;

                if (ie4) {

                        d = document.all[name];

                } else {

                        d = document.getElementById(name);

                }

                return d.innerHTML;

        }



        function setColor(name, value) {

                var d;  

                if (ie4) { 

                        d = document.all[name];

                } else {

                        d = document.getElementById(name);

                }

                d.style.color = value;  

        }



        function getColor(name) {

                var d;

                if (ie4) {

                        d = document.all[name];

                } else {

                        d = document.getElementById(name);

                }

                return d.style.color;

        }

                function toSpans(span) {

                  var str=span.firstChild.data;

                  var a=str.length;

                  span.removeChild(span.firstChild);

                  for(var i=0; i<a; i++) {

                        var theSpan=document.createElement("SPAN");

                        theSpan.appendChild(document.createTextNode(str.charAt(i)));

                        span.appendChild(theSpan);

                  }

                }

        function glitter(name, col, speed) {

                var value = getContent(name);

                while ( value.indexOf("&nbsp;", "-10") != (-1) ) {

                        var value = value.replace("&nbsp;", "");

                        };

                if (value.indexOf('<span') >= 0) { return; }

                var length = 0;

                var str = '';

                var ch;

                var token = '';

                var htmltag = false;        

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

                        ch = value.substring(i, i+1);

                        if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; }

                        token += ch;

                        if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; }

                        if (ch == '>' && htmltag) { htmltag = false; }

                        if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') {                

                                str += '<span id="' + name + '_' + length + '">' + token + '</span>';

                                token = '';

                                length++;

                        }

                }

                setContent(name, str);

                glitcommand = 'glitterloop(\'' + name + '\', ' + length + ', 0, 1, \'' + col + '\', ' + speed + ')';

                setTimeout(glitcommand , speed);

        }

        function shine(name, col, speed) {

                        var value = getContent(name);

                        while ( value.indexOf("&nbsp;", "-10") != (-1) ) {

                                var value = value.replace("&nbsp;", "");

                                };

                        if (value.indexOf('<span') >= 0) { return; }

                        var length = 0;

                                        var str = '';

                        var ch;

                        var token = '';

                        var htmltag = false;        

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

                                ch = value.substring(i, i+1);

                                if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; }

                                token += ch;

                                if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; }

                                if (ch == '>' && htmltag) { htmltag = false; }

                                if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') {                

                                                                str += '<span id="' + name + '_' + length + '">' + token + '</span>';

                                        token = '';

                                        length++;

                                }

            }

                setContent(name, str);

                shinecommand = 'shineloop(\'' + name + '\', ' + length + ', 0, 1, \'' + col + '\', ' + speed + ')';

                setTimeout(shinecommand , speed);

        }

                function RainbowSpan(span, hue, deg, brt, spd, hspd) {

                        this.deg=(deg==null?360:Math.abs(deg));

                        this.hue=(hue==null?0:Math.abs(hue)%360);

                        this.hspd=(hspd==null?3:Math.abs(hspd)%360);

                        this.length=span.firstChild.data.length;

                        this.span=span;

                        this.speed=(spd==null?50:Math.abs(spd));

                        this.hInc=this.deg/this.length;

                        this.brt=(brt==null?255:Math.abs(brt)%256);

                        this.timer=null;

                        toSpans(span);

                        this.moveRainbow();

                }

RainbowSpan.prototype.moveRainbow = function() {

  if(this.hue>359) this.hue-=360;

  var color;

  var b=this.brt;

  var a=this.length;

  var h=this.hue;



  for(var i=0; i<a; i++) {



    if(h>359) h-=360;



    if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }

    else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }

    else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }

    else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }

    else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }

    else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }



    h+=this.hInc;



    this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";

  }

  this.hue+=this.hspd;

}

        function shineloop(name, length, ind, delta, col, speed) {

                        var next = ind + delta;

                        if (next >= length) { delta = delta * -1; next = ind + delta; }

                        if (next < 0) { delta = delta * -1; next = ind + delta; }

                setColor(name + '_' + ind, getColor(name + '_' + next));

                setColor(name + '_' + next, col);

                shinecommand = 'shineloop(\'' + name + '\', ' + length + ', ' + next + ', ' + delta + ', \'' + col + '\', ' + speed + ')';

                setTimeout(shinecommand , speed);

                }

                

        function glitterloop(name, length, ind, delta, col, speed) {

                        var new_spd = Math.floor(Math.random()*31);

                        var new_spd = (new_spd - 15);

                        var new_spd = (new_spd + speed);

                        var next = Math.floor(Math.random()*(length+1));

                    if (next >= length) { delta = delta * -1; next = (-1); }

                    if (next < 0) { delta = delta * -1; next = 1; }

                setColor(name + '_' + ind, getColor(name + '_' + next));

                setColor(name + '_' + next, col);

                glitcommand = 'glitterloop(\'' + name + '\', ' + length + ', ' + next + ', ' + delta + ', \'' + col + '\', ' + speed + ')';

                setTimeout(glitcommand , new_spd);

        }

</script>

in first line of footer, paste it:

Code:

<script language="JavaScript">

while(shimmercount>0) {

   var shimmerstring=shimmercount+ 'shine';

   eval('var colcon= shimmercolor' +shimmercount);

   eval('var shimspeed="shimmerspeed' +shimmercount+ '"');

   eval('var shimcolor="' +colcon+ '"');

   shine(shimmerstring, shimcolor, shimspeed);

   var shimmercount=shimmercount-1;

};

while(glitcount>0) {

   var glitstring=glitcount+ 'glitter';

   eval('var colcon= glitcolor' +glitcount);

   eval('var glitspeed="glitspeed' +glitcount+ '"');

   eval('var glitcolor="' +colcon+ '"');

   glitter(glitstring, glitcolor, glitspeed);

   var glitcount=glitcount-1;

};

while(rainbowcount>0) {

        eval('var rain'+rainbowcount+'=document.getElementById("rain'+rainbowcount+'");');

        eval('var rainbowspanning'+rainbowcount+'=new RainbowSpan(rain'+rainbowcount+', 0, 360, 255, 50, 348);');

        eval('rainbowspanning'+rainbowcount+'.timer=window.setInterval("rainbowspanning'+rainbowcount+'.moveRainbow()", 50);');

        var rainbowcount=(rainbowcount-1);

};



</script>

as with the other 2 member's, I too, have v4.0.3 and have tried 1st install, and it failed, now your latest 'fix', and it still fails... thanks anyway! :(

that made it worse...im on 4.0.8...this is weird!

The first box of usergroup html markup is not enough for the number of characters that you gave us
How can I increase the numbers of usergroup html markup?

Quote:

Originally Posted by T.Nguyen (Post 2120818)

The first box of usergroup html markup is not enough for the number of characters that you gave us
How can I increase the numbers of usergroup html markup?

This is why its doing strange things to some forums.
You can use an application like phpMyAdmin to edit your database fields.

oh wow finally :D tagged for later install.

TY!

Quote:

Originally Posted by Harley D (Post 2120864)

This is why its doing strange things to some forums.
You can use an application like phpMyAdmin to edit your database fields.

As you said, maybe someone will need increase the size of it, and it can be done by phpMyAdmin...

or...

Try remove the <font...></font> maybe it can fit ok without it...

Quote:

Originally Posted by Harley D (Post 2120864)

This is why its doing strange things to some forums.
You can use an application like phpMyAdmin to edit your database fields.

Can you give me a guide for that?

A much better way to do it would be to use a global CSS call and use a span tag.

https://vborg.vbsupport.ru/showthread.php?t=105598

I believe this mod could be modified to work this way, resolving the code length issue by creating a class in your CSS that will contain the style you need, and use that class name inside your html markup.

Open the DB, click on the table in which you wish to change the value (usergroup), click structure, then click the little pen(change) to edit the field you wish to change (title). Change the field length/value and save.
This is fine if you are not entering huge amounts of code, but if you are doing something large or something you want to use in multiple groups etc a CSS class would be the way to do it.

I've been getting these answers from other members in this thread and others: https://vborg.vbsupport.ru/showthrea...arkup+increase

I know how to use that. But I don't know how to put this code in

Code:

<SCRIPT language="JavaScript">var rainbowcount=(rainbowcount+1); document.write("<span id='rain"+rainbowcount+"'>"); </SCRIPT>

I've tried to put like this and it's not working

.rainbow {
color: red; font-weight: bold; <SCRIPT language="JavaScript">var rainbowcount=(rainbowcount+1); document.write("<span id='rain"+rainbowcount+"'>"); </SCRIPT>
}

I'm not sure if it can be done for this mod, I'm looking into it, but short on time today.
Maybe someone with some coding skills could jump in.

I make a product that increase the size of HTML Markup, install it and try, and report me....
It is added to topic, product-increasetag.xml

The number of code Characters that is suppose to be placed in the box of the usergroup html markup area is 313, The max adjustable size allowed in the database is 225, this will prevent this mod from working.

So our only option is to code it for CSS, ANYONE?

The product is not working. :(
Anyone can make this with CSS code?

@DarkSupremo: How did you do on your forum?
Show me step by step please

i did in the same way that i make this product... i changed the text area from TinyText to LongText in database....

Can you show my how to changed the text area from tiny text to long text in database?
I'm just a newbie with this

just install the product that will automatically do it...

I already installed the product. Then I paste the code in the html markup box. How come it doesn't work to me?

Anyone else have the answer for this?

The rainbow one looks super awesome.

I would like to give this a go on 3.8.x

Is there anything I may have to change for it to work on that?

Quote:

Originally Posted by T.Nguyen (Post 2121217)

I already installed the product. Then I paste the code in the html markup box. How come it doesn't work to me?

Anyone else have the answer for this?

What exactly not work?
You can't paste it on HTML Markup because of size, or nothing happens?

I'm using this code right now on my forum and everything is working perfect...

Quote:

Originally Posted by DarkSupremo (Post 2121236)

What exactly not work?
You can't paste it on HTML Markup because of size, or nothing happens?

I'm using this code right now on my forum and everything is working perfect...

I've seen your forum, it's really prefect. I've imported the product on my forum. After that I copied and pasted the code that you've given in this thread. Then I update the usergroup, when I check that usergroup again. The code has missed some characters, that's why It doesn't work to me.

Not working for me... Even when I add it through phpmyadmin.

Doesn't matter how much I add it through the usergroup, the HTML is still being limited.

So, i don't know... my HTML Markup here is basically unlimited, lol...

Damn, unlimited? when I installed your product it's still 100 characters limit. But I saw some forum can use this mod too. Like muonline.biz/fortress or muonline.biz/grudge

Quote:

Originally Posted by DarkSupremo (Post 2121118)

I make a product that increase the size of HTML Markup, install it and try, and report me....
It is added to topic, product-increasetag.xml

I installed the product-increasetag.xml, and The code in the HTML Markup is still getting cut short.

EXAMPLE:

<SCRIPT language="JavaScript">var rainbowcount=(rainbowcount+1); document.write("<span id='rain"+rainbowcount+"'>"); </SCRIPT>

Gets cut down too:

<SCRIPT language="JavaScript">var rainbowcount=(rainbowcount+1); document.write("<span id='rain"+rai

VB 4.08

In your number 2 code you need to remove "); </SCRIPT>

Quote:

Originally Posted by Harley D (Post 2121455)

Yeah, I got the same problem

@DarkSupremo: You should do something, man. Make these code shorter or whatever you can do :)

well idk about the MOD itself but you got me a way to increase my character limit for that. For that i click install :D

Please test this new product attached to this post and report me...

Quote:

Originally Posted by DarkSupremo (Post 2122183)

Please test this new product attached to this post and report me...

Nope, That didn't work.
I believe the problem is the some servers only allow a MAX of 255 characters, so no matter what its limited.

I have managed to get Shadow text to work using CSS

its not working its making my forum going nuts ,all text moves to one side and weird coloring ,tnx for the work ,but i uninstalled ,looking great on your forum ,to bad :(

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01275 seconds Memory Usage 1,896KB 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 (11)bbcode_code_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: