Rainbow Effect

Hi, I'm a temporary admin on the following forum: http://bleachburningworlds.forumotion.com/forum

It is phpbb2.

We have experienced a problem regarding the rainbow effect on names and groups. All of the codes that have been tried all failed. This includes...

Code:

a[href="/u1"] span{color:#F00;animation:svcolor 1s infinite;-moz-animation:svcolor 1s infinite;-webkit-animation:svcolor 1s infinite;}
            @keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}
            @-moz-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}
            @-webkit-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}

Code:

$.getScript("http://xoxco.com/projects/code/rainbow/rainbow.js",function() {
var selectMe= ["u1","u2"];
for(var i =0;i<selectMe.length;i++){
$('a[href="/'+selectMe[i]+'"]').addClass('rainbow');
}
$('.rainbow').find('*').andSelf().contents().filter(function(){
return this.nodeType===3;
}).parent().text(function() {
$(this).rainbow({
colors: [
'#FF0000',
'#f26522',
'#fff200',
'#00a651',
'#28abe2',
'#2e3192',
'#6868ff'
],
animate:true,
animateInterval:100,
pad:false,
pauseLength:100
});
});
});

Code:

$.getScript("http://xoxco.com/projects/code/rainbow/rainbow.js",function(){
$('a[href="/u1"] strong').rainbow({
colors: [
'#FF0000',
'#f26522',
'#fff200',
'#00a651',
'#28abe2',
'#2e3192',
'#6868ff'
],
animate: true,
animateInterval: 100,
pad: false,
pauseLength: 10,
});
});

The first one is for CSS and the other two are Javascript. None of us can figure out why nothing works. If someone can help with a working code, that would be great.

Hi,

I just tried to fix the one that works with css. First of all you forgot to close the animation. I corrected this.

Code:

a[href="/u1"] span{color:#F00;animation:svcolor 1s infinite;-moz-animation:svcolor 1s infinite;-webkit-animation:svcolor 1s infinite;}
@keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-moz-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-webkit-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}

Then you need to change the settings for 'Optimize your CSS' to 'no', else the animation won't work.

When I change it to 'no' will anything happen to the other codes in the CSS?

Normally not but you can take a back up of your code and save it in notepad if you want.

Okay, I'll make the backup code and then try this thing out. Thanks for the help! I'll post back to let you know if it worked or not.

Yay, it works! And it doesn't mess with any of the other codes. Everything is looking great! Thank you very much, you have been wonderful!

I'm marking this as solved!