Five Alternating Highlight Colors
One of the example in the W3C documentation shows how to alternate with four colors and I figured for the fun of it I’d create a quick solution for highlighting bold tags with five alternating colors.
I first created my paragraph, highlighting the crap out of the lipsum with the <strong> tags
HTML
<div id="highlighted">
<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>.
Nulla lectus velit, condimentum quis, mollis a, commodo vitae, mauris.
Suspendisse consequat. Fusce nec nunc. Nunc molestie convallis tortor.
Aliquam dui justo, mollis nec, <strong>laoreet vitae</strong>
[...]
</div>
Then I created the five styles with the colors from the incence burning colour palette on Colourlovers.com.
CSS
.link1 {background-color: #AC89A7;}
.link2 {background-color: #E09599;}
.link3 {background-color: #F9D8A2;}
.link4 {background-color: #FFF6E5;}
.link5 {background-color: #BB9F6D;}
Then the JavaScript used numeric calculations instead of :nth-child(odd) and :nth-child(even)
JavaScript
$$('div#highlighted p > strong:nth-child(5n+1)').each(function(s) {
s.addClassName('link1');
});
$$('div#highlighted p > strong:nth-child(5n+2)').each(function(s) {
s.addClassName('link2');
});
$$('div#highlighted p > strong:nth-child(5n+3)').each(function(s) {
s.addClassName('link3');
});
$$('div#highlighted p > strong:nth-child(5n+4)').each(function(s) {
s.addClassName('link4');
});
$$('div#highlighted p > strong:nth-child(5n+5)').each(function(s) {
s.addClassName('link5');
});
Check out the alternating multiple highlighting colors demo.
Very quick and very easy. This way I don’t have to use server side counting or looping to accurately alternate colors to help distinguish content!
Check out the demo to see the above examples in action as well as an alternating table column colors example not detailed in this entry. As always feel free to poke around in my code and even download the demo to play with it on your machine!
Pages: 1 2
This site runs on the Thesis WordPress Theme
If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.
If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:
