Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#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?

Offline

#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>;

Offline

#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)

Offline

#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.

Offline

#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)

Offline

#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>;

Offline

#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!

Offline

Board footer

Powered by FluxBB