PDA

View Full Version : Forum Display Enhancements - Super Display Suite 0.3.7c - Effects Mod ( Rainbow & Shine & Glitter ) for vb 4.x.x


Pilot iQ
05-19-2011, 10:00 PM
NOTE: This is originally made by: AlchemyX to vB Version: 3.5.4
Original Topic: https://vborg.vbsupport.ru/showthread.php?t=108910

I Just updated it to work with all vB 4.x.x .




Effects have been tested in and are now compatable in IE4+, Opera6+, NN7, and Mozilla Firefox 1.5

Note: This product is still in beta stages.
But has been updated for those of you with problems in the usergroup manager. It should all work fine everywhere now. For any other problems, feel free to ask. :-)

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, which I am currently working on optimizing, and be turned into an addon with the next release of this hack. :-).

Demo : Click Here (http://www.iraqedu.com/vb/member.php?u=1121)

user : demo1
password : 123456

{ https://vborg.vbsupport.ru/external/2011/07/38.jpg }





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.

Don't forget to hit the https://vborg.vbsupport.ru/ button if you're using this.

Install instructions:
1.) Import the product through your product manager. - Easy as pie.

2.a) Go to your "header template and add this line at the very top of the template:
{vb:rawphrase alchemy_display_func1} 3.b) Go to your "footer" template and add this line at the very bottom of the template:
{vb:rawphrase alchemy_display_func2}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
*#Your_Base_color* =>With=> a hexidecimal color code, starting with the "#" number symbol. An Example would be #990000
*#Your_shine_color* =>With=> a hexidecimal color code, starting with the "#" number symbol. An Example would be #ff5050
*Your_Speed* =>With=> with a numeric value, generally between 50 and 250. An Example would be 120

add this is the first box of the usergroup html markup

<font color="*#Your_Base_color*"><SCRIPT language="JavaScript"> var scolor='*#Your_Base_color*'; var a_speed='*Your_Speed*'; var shimmercount=shimmercount+1; eval('var shimmerspeed' +shimmercount+ '="' +a_speed+ '"'); eval('var shimmercolor' +shimmercount+ '="' +scolor+ '"'); document.write("<b><span id='" + shimmercount + "shine'>"); </SCRIPT> and this is the second box of the usergroup markup

</span></b></font> 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
*#Your_Base_color* =>With=> a hexidecimal color code, starting with the "#" number symbol. An Example would be #009900
*#Your_glitter_color* =>With=> a hexidecimal color code, starting with the "#" number symbol. An Example would be #40ee40
*Your_Speed* =>With=> with a numeric value, generally between 30 and 250. An Example would be 140

add this is the first box of the usergroup html markup

<font color="*#Your_Base_color*"><SCRIPT language="JavaScript">var scolor='*#Your_glitter_color*'; var s_speed='*Your_Speed*'; var glitcount=glitcount+1; eval('var glitspeed' +glitcount+ '="' +s_speed+ '"'); eval('var glitcolor' +glitcount+ '="' +scolor+ '"'); document.write("<b><span id='" + glitcount + "glitter'>"); </SCRIPT> and this is the second box of the usergroup markup

</span></b></font> 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:

add this is the first box of the usergroup html markup

<SCRIPT language="JavaScript">var rainbowcount=(rainbowcount+1); document.write("<span id='rain"+rainbowcount+"'>"); </SCRIPT> and this is the second box of the usergroup markup

</span> 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 :-)

Known Issues:
1.) If you have vBShout installed. The shoutbox does not seem to allow javascript... so the animations will all display right everywhere but inside the actual shoutbox. BUT in the shoutbox's individual page, it will work... just not in the AJAX area of the shoutbox.

NOTE: this mod not deal with complicated AJAX .
NOTE: if you had problem " blank page " when add postreply or visitormessage " disable all ajax features " from admincp and everything will be fine .

For arab : اذا واجهت مشكله الصفحه البيضاء عند اضافه رد على موضوع او تعليق داخل البروفايل فقط قم بتعطيل الاجاكس من لوحة التحكم وسوف تختفي هذه المشكله نهائياً .

To get support click Mark as Installed if you are using this hack.

Regards,

rob01
05-19-2011, 10:50 PM
let me test it, installed

Pilot iQ
05-19-2011, 11:45 PM
let me test it, installed

take your time my friend ;)

lapiervb
05-20-2011, 12:56 AM
How about a demo link?

Pilot iQ
05-20-2011, 01:11 AM
How about a demo link?

http://www.iraqedu.com/vb/member.php?u=51

user : demo1
password : 123456


:cool:

WEBDosser
05-20-2011, 04:16 AM
interesting.. tagged

IRAQEDU.COM
05-20-2011, 04:29 AM
amazing, works perfect.

thanks bro,,

Pilot iQ
05-20-2011, 04:42 AM
interesting.. tagged

you are welcome

amazing, works perfect.

thanks bro,,

you are welcome bro :p
حياك الله ابو جاسم

تحياتي

WEBDosser
05-20-2011, 04:44 AM
Hmm.. pilot iq & iraqedu.com same person maybe?.

Pilot iQ
05-20-2011, 04:48 AM
Hmm.. pilot iq & iraqedu.com same person maybe?.

lol >>>

sorry my friend but you missed out ... :D

he is my best friend and his name is mohammed

WEBDosser
05-20-2011, 04:53 AM
aah.. was just curious is all your website and his username ;)

Still a nice little addon there i have not used it but it is nice :)

Pilot iQ
05-20-2011, 05:04 AM
aah.. was just curious is all your website and his username ;)

Still a nice little addon there i have not used it but it is nice :)

No problem .. the site is a live demo

i hope the product will be useful for every site owner .

:cool:

Pilot iQ
05-20-2011, 05:38 AM
the product Contains this code :

alchemy_display_func1
<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.ch arAt(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>


alchemy_display_func2
<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>

RobbieZ
05-20-2011, 06:27 AM
http://www.iraqedu.com/vb/member.php?u=51

user : demo1
password : 123456


:cool:

Thanks

IRAQEDU.COM
05-20-2011, 03:53 PM
Hmm.. pilot iq & iraqedu.com same person maybe?.

Are u an investigator? this is not ur business.

all the best,
iraqedu.com

COL NIL SATIS
05-21-2011, 01:09 PM
tagged

leejohn02
05-23-2011, 09:54 AM
Thanks for the mod, it works really well, the only problem is i cant get it to work in the CB which is where i wanted to use it, i am currently using VSA Chatbox AKA Ajax Shoutbox

Any help will be appreciated

Pilot iQ
05-23-2011, 10:57 AM
Thanks for the mod, it works really well, the only problem is i cant get it to work in the CB which is where i wanted to use it, i am currently using VSA Chatbox AKA Ajax Shoutbox

Any help will be appreciated

try to add new Plugin


Go to Admin CP -> Plugin Manager -> Add a New Plugin

Product: VSA Chatbox
hook location: global_start
Title: AJAX Disable on VSA Chatbox
Execution Order: 5
if (THIS_SCRIPT == 'member' AND in_array($vbulletin->userinfo['usergroupid'], array(x) ))
$vbulletin->options['disable_ajax'] = 2;
Set ACTIVE to YES and SAVE.

x : usergroupid


use this only with colored group



and set ajax on from admincp - general setting

whitedd
07-23-2011, 09:29 PM
dont work in MGC Chatbox Evo

Successfulsteps
07-23-2011, 09:53 PM
I don't understand this mod, and the demo site isn't showing me anything. Does this work well on 4.1.4 and you can explain a bit more about what it is?

Pilot iQ
07-27-2011, 12:05 AM
I don't understand this mod, and the demo site isn't showing me anything. Does this work well on 4.1.4 and you can explain a bit more about what it is?

with this mod you can put effect for any text inside your forum ( like user color )

rainbow effect like this pic : https://vborg.vbsupport.ru/attachment.php?attachmentid=129760&stc=1&d=1307258442



and it's work for all vb4 :)

Pilot iQ
07-27-2011, 12:24 AM
dont work in MGC Chatbox Evo

Because MGC Chatbox work depends complicated ajax . But this mod not deal with complicated ajaxhttps://vborg.vbsupport.ru/external/2011/07/3.gif

Juggernaut
07-27-2011, 01:12 AM
Man I tried checking out your site but there were pop-up windows everywhere I went, every single click into your threads and profiles gave a pop up, makes me think you created this mod just to generate clicks for revenue for your site.

Pilot iQ
07-27-2011, 10:00 AM
Man I tried checking out your site but there were pop-up windows everywhere I went, every single click into your threads and profiles gave a pop up, makes me think you created this mod just to generate clicks for revenue for your site.

it's not necessary to check live demo because there is a picture explain how this mod work .

*site owner free to do everything in his site !!

doctorsexy
07-27-2011, 01:46 PM
Not working with DragonByte Chatbox either...shame

Pilot iQ
07-27-2011, 09:48 PM
Not working with DragonByte Chatbox either...shame

Sorry this mod not deal with complicated AJAX .

baileyjojoms
08-12-2011, 01:25 AM
This is not working with VB 4.1.5

Pilot iQ
08-14-2011, 11:47 PM
This is not working with VB 4.1.5

it's work ----> you can check the demo link (http://www.iraqedu.com/vb/member.php?1121-demo1)

Iguana Goddess
04-17-2012, 10:51 PM
The Rainbow effect works great, but after much trying I can't get the other 2 to work. Still a great mod though.

EDIT: Finally got it working completely, just remove the * from the code. So this is working on 4.1.12

RoG Aftermath
05-09-2012, 03:30 AM
Is there any way at all to get this to work in the VSA Advanced Forum Statistics mod? I tried what was posted above but it did not work, stupid AJAX crap.