The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Super Display Suite [Animated Rainbow] vB4 Details »» | |||||||||||||||||||||||||||||
Super Display Suite [Animated Rainbow] vB4
Developer Last Online: Jan 2011
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> Code:
<script language="javascript" src="footer_color.js"></script> 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> Code:
</span> 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"> Code:
</font></i></b> 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> Code:
</span></b></font> 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 :-) Download Now
Show Your Support
|
Comments |
#2
|
||||
|
||||
nice idea but make website lagging....
|
#3
|
|||
|
|||
I use on my forum, and no lag here
|
#4
|
||||
|
||||
Your DEMO links:
Permissions are set to NOT allow guest views and you did NOT provide a test log-in account. |
#5
|
|||
|
|||
hmm.....i tried this and it jacked my forum all up...the entire forum was no lined up and out of wack!
Any help? |
#6
|
|||
|
|||
Added user and pass...
User: test Pass: test123 |
#7
|
|||
|
|||
Quote:
Un-installed for now |
#8
|
|||
|
|||
Glad it wasnt just me...i followed directions to a T!
|
#9
|
|||
|
|||
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(" ", "-10") != (-1) ) { var value = value.replace(" ", ""); }; 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(" ", "-10") != (-1) ) { var value = value.replace(" ", ""); }; 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> |
#10
|
||||
|
||||
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!
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|