Textpattern CMS

#1 2006-10-23 21:28:59

sedated

Member

Registered: 2006-10-17

Posts: 11

Alternating row colors?

Hey folks. Is there any way to do alternating row colors on a list?

#2 2006-10-23 22:58:00

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: Alternating row colors?

I use the Zem_nth plugin to alternate colours for my comments section. It works with any list.

Last edited by NyteOwl (2006-10-23 23:19:44)

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#3 2006-10-23 23:51:43

jm

Plugin Author

From: Missoula, MT

Registered: 2005-11-27

Posts: 1,746

Website

Re: Alternating row colors?

I would use this from Bite Size Standards. Just insert this simple JS.

window.onload = stripe_lists;
function stripe_lists() {
	var li = document.getElementsByTagName('li');
	for (var i=0;i<li.length;i++) {
		if (i%2) {
			li[i].className = 'alt';
		}
	}
}

/*CSS*/
.alt { background-color: #eee; }

Last edited by jm (2006-10-23 23:53:36)

---

What? My name is… | GitHub

#4 2006-10-24 13:02:06

jayrope

Plugin Author

From: Berlin

Registered: 2006-07-06

Posts: 687

Website Mastodon

Re: Alternating row colors?

jm, question to this:
is it possible to modify the JS in favor of using classes instead of tagNames?

if i’d use the JS as above i’d alternate colors on all sorts of “li”-based entries, not only comments…

thanx for info in advance!

Last edited by jayrope (2006-10-24 13:02:46)

---

A hole turned upside down is a dome, when there’s also gravity.

#5 2006-10-24 19:10:48

edeverett

Archived Plugin Author

From: London

Registered: 2005-03-17

Posts: 42

Website

Re: Alternating row colors?

Try this – it’s a quick fix, and not tested, but if you replace XXXX with the class of your <ul> or <ol> it should work.

window.onload = stripe_lists("XXXX");
function stripe_lists(listClass) {
	var li = document.getElementsByTagName('li');
	for (var i=0;i<li.length;i++) 
       {
		if (i%2 && li[i].parentNode.className = "listClass") 
                      li[i].className = 'alt';
	}
}

Hope it works, if it doesn’t I’ll test it (I’ll need this soon for a project anyway).

ed

Last edited by edeverett (2006-10-24 19:11:36)

#6 2006-10-24 21:11:54

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: Alternating row colors?

These work but the advantage of the plugin is that it works even with javascript disabled.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#7 2006-10-25 08:00:44

neptho

Member

From: A cold, dark place.

Registered: 2006-02-01

Posts: 48

Re: Alternating row colors?

NyteOwl wrote:

I use the Zem_nth plugin to alternate colours for my comments section. It works with any list.

Yep. That works perfectly. As a little test, I ran this with ras_recent_articles with the ugliest test code I’ve ever tested on a production site:

<ul><li><txp:ras_recent_articles wraptag="span" break="</li><li <txp:zem_nth step=1 of=2>span class='alt'</txp:zem_nth>>" /></li></ul>

Cool beans!