We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ C ] Rainbow Text
Topic Started: May 14 2013, 07:02 PM (850 Views)
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Board Address: Great Escape
Board Software: ZetaBoards
Description: A member of my board has asked me to see if it's possible to get a button that creates a "rainbow" effect across a line of text.


I saw a "BB Code" option on another forum HERE that does exactly what I am looking for, and I was wondering if it would be possible here as something that could be added to the general board template.

Ideally I'd like another [button] in both the "Full Reply" screen and in the "Edit Signature" screen as those are the two places I can imagine it being used.

Anyone have any ideas (preferably without adding in color codes around every single letter, thus making it impossible to read when quoting)?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Use this code (remove a.member) and this code:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('#c_bbcode button:last').after(' <button type="button" onclick="ZetaTag(\'RAINBOW\')">Rainbow</button>');

$('td.c_post, #topic_review td, div.search_results').each(function () {
$(this).html($(this).html().replace(/\[rainbow\](.+?)\[\/rainbow\]/gi, '<span class="bbcode-rainbow">$1</span>'));
});
//]]>
</script>
Edited by Cory, May 14 2013, 08:23 PM.
Offline Profile Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Remove "a.member"? JUST that... or everything after it or what? And that one (according to what it says) doesn't rainbow a line of text, it just cycles through 7 colors, one at a time, then repeats... as often as necessary.

I was looking for something that would be one "rainbow" across the entire line of text (like can be seen on my example, 4th code from the bottom).
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Basically, change $('a.member span.bbcode-rainbow') to $('span.bbcode-rainbow') in the code.

As many colors as you'd like can be added to the array and the 7 (i % 7) will have to be changed to the amount of colors used in the array.
Offline Profile Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
But wouldn't that still limit it to a specific color to every {whatever number} letter, instead of one fade across the entire line?

Since lines of text will be variable as to the number of characters in them, there's no way to specify the appropriate number of colors in that code.

ETA: I signed up on the site I linked in my OP so I could test the function of their version, and the following created ONE fade of rainbow color across the entire line of text:

Quote:
 
[rainbow]testing one two three testing. testing one two three testing[/rainbow]
Edited by RichardInTN, May 14 2013, 09:12 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
So, you had something like this in mind?
Quote:
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget venenatis risus. Donec facilisis justo ut sapien molestie eleifend. Quisque faucibus neque nulla. Suspendisse potenti. Maecenas sagittis lacus turpis, sit amet elementum dolor. Integer porttitor iaculis pharetra. In aliquam lobortis odio, eu iaculis erat malesuada sed. In in ligula diam. Fusce consectetur odio a dui convallis eleifend. Morbi consectetur mi quis orci fringilla non aliquam ligula faucibus. Nam euismod, ante porta tincidunt porttitor, diam lectus iaculis velit, eget tincidunt metus nunc consectetur purus. Suspendisse nibh leo, viverra sed euismod vitae, vehicula at nisi. Fusce dui lacus, varius non aliquet at, tristique at urna. Curabitur lobortis tincidunt lorem nec viverra. Pellentesque imperdiet ultricies rutrum. Nunc eu nisi eros. Suspendisse sit amet dui quis est ultricies vehicula. Aenean aliquet cursus eros a commodo. Donec vehicula hendrerit elit, non sodales leo tristique et. Maecenas sapien nisl, lobortis vel scelerisque sit amet, faucibus a metus. Curabitur fringilla risus a nisi mattis ornare. Pellentesque consequat felis eget nisi aliquet commodo. Suspendisse quis dolor velit, vel vestibulum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam enim urna, elementum a viverra eu, vehicula in lectus. Nulla sodales risus et justo venenatis bibendum. Etiam fringilla sapien quis metus dapibus consectetur. Aliquam erat volutpat. Sed blandit adipiscing dapibus. Maecenas porttitor venenatis ligula, eget feugiat quam consectetur quis. Vestibulum scelerisque ligula sed leo ullamcorper sit amet tempus mauris porta. Donec quis nunc turpis, vestibulum mattis lectus. Cras nec justo arcu. Curabitur pretium sagittis justo in tempus. Quisque eu neque leo, in posuere lorem. Pellentesque massa odio, eleifend in pulvinar tincidunt, elementum pellentesque tellus. Praesent dictum accumsan fermentum.
Offline Profile Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Exactly... but without all the color codes wrapped around each letter (like it is in your example) so it was still legible when writing up the reply while quoting.
Edited by RichardInTN, May 14 2013, 09:31 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Admin CP Posted Image Themes Posted Image Board Template Posted Image Javascripts
Code:
 
<style type="text/css">
.rainbowize {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color: transparent;
-webkit-background-clip: text;
}
</style>
Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p476592/rainbow.js"></script>
Rainbow script found on the web.
Offline Profile Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Works great! One question though... the colors aren't in "Red, Orange, Yellow, Green, Blue, Indigo, Violet" order... was that a boo-boo... or the only way to get it to work here?

ETA: after playing with it a bit... it has a weird bug in it. It drops out parts of text sometimes from the middle, sometimes just truncating the post.

for one example, I copied a couple of paragraphs from wikipedia on rainbows, and then "surrounded" it with the [rainbow] and [/rainbow] tags. Here's what I posted:
Quote:
 
[rainbow]A rainbow is an optical and meteorological phenomenon that is caused by reflection of light in water droplets in the Earth's atmosphere, resulting in a spectrum of light appearing in the sky. It takes the form of a multicoloured arc.
Rainbows caused by sunlight always appear in the section of sky directly opposite the sun.

In a "primary rainbow", the arc shows red on the outer part and violet on the inner side. This rainbow is caused by light being refracted while entering a droplet of water, then reflected inside on the back of the droplet and refracted again when leaving it.

In a double rainbow, a second arc is seen outside the primary arc, and has the order of its colours reversed, red facing toward the other one, in both rainbows. This second rainbow is caused by light reflecting twice inside water droplets.[/rainbow]


Here's what I got (it did have the "rainbow" effect):
Quote:
 
A rainbow is an optical and meteorological phenomenon that is caused by reflection of light in water droplets in the Earth's atmosphere, resulting in a spectrum of light
and the rest was "there"... it was just invisible (I could see it when highlighted). And, weirdly enough, the part that WAS "rainbowed" was done appropriately, color-wise (only part of the rainbow effect appeared).

ETA II: if you look at the Original Post in THIS THREAD something REALLY weird happens... the missing part JUMPS into place when highlighted.
Edited by RichardInTN, May 15 2013, 07:13 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The script isn't really mine to edit, it was found here.
Offline Profile Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
I can live with the colors not being in order.

Any ideas on why it's altering the text?
Offline Profile Goto Top
 
SlyCooperFan1
Member Avatar
Coder
[ *  *  *  * ]
I found the problem. The code is currently inputting the text into a <span> like this:
Code:
 
<span class="rainbow rainbowize">your text goes here</span>
It appears that the -webkit-background-clip CSS property has not been optimized as of yet with the <span> tag. Using the Developer Tools on Chrome, I was messing around with a bunch of things to see what would work, and it turns out that it works perfectly if the text is put into a <div> instead of a <span> like this:
Code:
 
<div class="rainbow rainbowize">your text goes here</div>
So Cory, if you just edit your hosted code to change the span to a div, it should work as intended.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
It has been done.
Offline Profile Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
That fixed it!

You guys are both RockStars!


ETA: One strange thing (I actually LIKE IT though!) it doesn't spread the effect from the [rainbow] to the [/rainbow], it's like it takes a picture of the whole paragraph or multiple paragraphs, and rainbows the whole thing as one, from left to right. Unexpected... but COOL.
Edited by RichardInTN, May 15 2013, 10:28 PM.
Offline Profile Goto Top
 
Helena
Member Avatar
M is for Mod

Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic