codelode

[codelode]

JavaScript Snippet: Rainbow Tags

Rainbow Tags

jQuery Version

Here is a javascript snippet you can add to your themes to rainbow-fy your tag links. Required: jQuery

This method cycles through css classes and applies them to the tag links. This way, you can manipulate the effects in your css instead of mucking about in javascript.

Step One Make sure your tags are grouped in a container (such as a div, list, section, etc.) with a .tags class applied:

Tumblr Theme

<div class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a><br />{/block:Tags} </div>

or regular HTML

<div class="tags"> <a href="/tagged/tag1">#tag</a><br /> <a href="/tagged/tag2">#another tag</a><br /> <a href="/tagged/tag3">#third tag</a><br /> </div>

Step Two In your CSS, create classes for each of the colors (and whatever other link effects) you want to apply. They should have the same prefix (this example uses 'tag-') and end in a number. The number needs to start from one, incrementing by one until you get to however many colors you want:

CSS

.tag-1 { color: pink; } .tag-2 { color: purple; } .tag-3 { color: green; } .tag-4 { color: yellow; } .tag-5 { color: orange; }

Step Three Add the following javascript to your page (just before the closing body tag, but after your link to jQuery). Make sure to change colors to the total number of css classes you've created in your css. Also, change the tagPrefix if you have a different prefix for your css classes (just remember to keep the name surrounded by either apostrophes('prefix-') or quotes("prefix-").

jQuery JavaScript

<script> $(document).ready(function() { // tag link rainbow colors // requires extra css (.tag-# classes) var $tags = $('.tags'), // Get each tag section tagPrefix = 'tag-', // Prefix for your color classes colors = 5; // total number of color classes $.each($tags, function tagsEachCB() { var $this = $(this), links = $this.find('a'), $links = $(links), loopCount = 1; $.each($links, function linksEachCB() { var $this = $(this); $this.addClass(tagPrefix + loopCount.toString()); // Assign new class // reset or increase loopCount based on colors if (loopCount === colors) { loopCount = 1; } else { loopCount += 1; } }); }); }); </script>