Myreader.co.uk  
uk news, chat and community
   home   |   control panel login   |   archive   |  
 
net
net
news.announce
news.config
news.management
news.moderation
providers
providers.aaisp
web.authoring
  
 
date: Wed, 13 May 2009 10:37:41 +0100,    group: uk.net.web.authoring        back       
Zebra striped list   
(yes I'm back on the job)

This isn't the first time I've made a list with zebra striped lists. I've 
previously set a class for each BGcolor and classed the tags one by one.

Anyone know a way to do this without classing each LI tag, maybe with pseudo 
classes?

Cheers

-- 
======= dE|_ =======
www.websitefoundry.co.uk
www.crackguitar.com
Fender~Photoshop~Markup
date: Wed, 13 May 2009 10:37:41 +0100   author:   dE|_

Re: Zebra striped list   
In article <ExwOl.18062$9S1.6241@newsfe30.ams2>,
 "dE|_"  wrote:

> (yes I'm back on the job)
> 
> This isn't the first time I've made a list with zebra striped lists. I've 
> previously set a class for each BGcolor and classed the tags one by one.
> 
> Anyone know a way to do this without classing each LI tag, maybe with pseudo 
> classes?
> 
Interested in giving a URL so we can get more of a clue what you are 
talking about?

For a start, btw, you would only need to class half the LIs, the other 
can be taken care of simply by 

li {...}

The CSS for the classed ones would overide.

Or if you have other lists and this one is special

<ul class="special">
<li>..
<li class="stripe">...
<li>..
<li class="stripe">...

and 

.special li {will cover them all)

except for the ones that are overridden by

.stripe {background:...}

Something like this.

Javascript solutions are often quite good for this sort of thing.

-- 
dorayme
date: Wed, 13 May 2009 20:07:06 +1000   author:   dorayme

Re: Zebra striped list   
Message-ID: 
from dorayme contained the following:

>For a start, btw, you would only need to class half the LIs, the other 
>can be taken care of simply by 
>
>li {...}
>
>The CSS for the classed ones would overide.

The problem with large lists is probably when changes need to be made.
If you need to insert an item into a list all subsequent items need to
be changed.

I'd get around that by having all list items in an array and then using
a simple script to generate the zebra list.

e.g. assume list items are in an array called $listitems
<?php
$count=0;
foreach($listitems as $item){
$style=($countt%2>0)?"class='zebra'":"";
echo "<li $style>$item</li>\n";
}
?>

Untested.

-- 
Geoff Berrow  0110001001101100010000000110
001101101011011001000110111101100111001011
100110001101101111001011100111010101101011
http://slipperyhill.co.uk - http://4theweb.co.uk
date: Wed, 13 May 2009 12:23:06 +0100   author:   Geoff Berrow

Re: Zebra striped list   
"dorayme" replied:
>
>> (yes I'm back on the job)
>>
>> This isn't the first time I've made a list with zebra striped lists. I've
>> previously set a class for each BGcolor and classed the tags one by one.
>>
>> Anyone know a way to do this without classing each LI tag, maybe with 
>> pseudo
>> classes?
>>
> Interested in giving a URL so we can get more of a clue what you are
> talking about?
>
> For a start, btw, you would only need to class half the LIs, the other
> can be taken care of simply by
>
> li {...}
>
> The CSS for the classed ones would overide.
>
> Or if you have other lists and this one is special
>
> <ul class="special">
> <li>..
> <li class="stripe">...
> <li>..
> <li class="stripe">...
>
> and
>
> .special li {will cover them all)
>
> except for the ones that are overridden by
>
> .stripe {background:...}

I thought someone would bring that up, I don't like that method because of 
the messy sawtooth HTML you get. If I've got to manually class every other 
tag I'd rather class them all. Thanks for your input though.

Here's the URL of first draft, feel free to throw stones, I'm asking 
'Providor' to do the same.
http://www.websitefoundry.co.uk/providorgasdemo/index.html

> Something like this.
>
> Javascript solutions are often quite good for this sort of thing.

Javascript to set auto classes? That's a bit controversial in here isn't it?

-- 
======= dE|_ =======
www.websitefoundry.co.uk
www.crackguitar.com
Fender~Photoshop~Markup
date: Wed, 13 May 2009 13:56:46 +0100   author:   dE|_

Re: Zebra striped list   
"Geoff Berrow" pointed out:
>
>>For a start, btw, you would only need to class half the LIs, the other
>>can be taken care of simply by
>>
>>li {...}
>>
>>The CSS for the classed ones would overide.
>
> The problem with large lists is probably when changes need to be made.
> If you need to insert an item into a list all subsequent items need to
> be changed.
>
> I'd get around that by having all list items in an array and then using
> a simple script to generate the zebra list.
>
> e.g. assume list items are in an array called $listitems
> <?php
> $count=0;
> foreach($listitems as $item){
> $style=($countt%2>0)?"class='zebra'":"";
> echo "<li $style>$item</li>\n";
> }
> ?>
>
> Untested.

So you don't reckon having alternating background colours from LI-LI is 
anything that can be set up with pseudo classes? I was in doubt too. Thanks 
for the starting point of the script, I'll keep that for Mr Ben if it 
doesn't work.

PS feel free to comment on the draft URL in my reply to dorayme. I'm not set 
on the colour scheme but I can tell you the logo will be shrinking as there 
is an extra nav tab to go in.

-- 
======= dE|_ =======
www.websitefoundry.co.uk
www.crackguitar.com
Fender~Photoshop~Markup
date: Wed, 13 May 2009 14:04:54 +0100   author:   dE|_

Re: Zebra striped list   
Message-ID: <VzzOl.20542$M64.7388@newsfe26.ams2> from dE|_ contained the
following:

>So you don't reckon having alternating background colours from LI-LI is 
>anything that can be set up with pseudo classes? I was in doubt too. Thanks 
>for the starting point of the script, I'll keep that for Mr Ben if it 
>doesn't work.

Apart from 

$listitems=array(
"reduce energy usage in all areas of your business ",
"reduce carbon emissions to gain 'green points' and reduce your Climate
Change Levy ",
"reduce energy costs by cutting down waste energy ",
"meet environmental targets and ambitions and avoid future government
penalties "
);


That's pretty much all there is to the script. No Ben required. :-)  

 I made a small error but here is the script in a working form
http://www.4theweb.co.uk/test/zebralist.php

Source:
http://www.4theweb.co.uk/test/zebralist.phps


>
>PS feel free to comment on the draft URL in my reply to dorayme. I'm not set 
>on the colour scheme but I can tell you the logo will be shrinking as there 
>is an extra nav tab to go in.

I'm not going to comment on aesthetics but you should name your classes
semantically.  BL and GL  presumably refer to blue line and green line.
You don't want to change the markup if you change the colours else the
whole point of a style sheet is lost.  So name them something like
list_stripe_1 and list_stripe_2 to make your code clear and unambiguous.
-- 
Geoff Berrow  0110001001101100010000000110
001101101011011001000110111101100111001011
100110001101101111001011100111010101101011
http://slipperyhill.co.uk - http://4theweb.co.uk
date: Wed, 13 May 2009 14:57:38 +0100   author:   Geoff Berrow

Re: Zebra striped list   
On Wed, 13 May 2009 10:37:41 +0100, "dE|_"
 wrote:

>Anyone know a way to do this without classing each LI tag, maybe with pseudo 
>classes?

Until ":nth-child()" gets some browser support, no. So I'd go with PHP
and an array for now.
date: Wed, 13 May 2009 19:30:11 +0100   author:   Stuart Millington

Re: Zebra striped list   
On Wed, 13 May 2009 14:04:54 +0100, "dE|_"
 wrote in
<VzzOl.20542$M64.7388@newsfe26.ams2>:

>So you don't reckon having alternating background colours from LI-LI is 
>anything that can be set up with pseudo classes? I was in doubt too. Thanks 
>for the starting point of the script, I'll keep that for Mr Ben if it 
>doesn't work.

Not until CSS 3 is widely supported.

See <http://www.w3.org/TR/css3-selectors/#nth-child-pseudo>.

For now, personally, I would probably use an XSLT transform to add class
attributes according to the appropriate formula but if you are not
already generating your HTML by applying XSLT to XML page descriptions
this may be a step beyond where you want to go.

-- 
Owen Rees
[one of] my preferred email address[es] and more stuff can be
found at <http://www.users.waitrose.com/~owenrees/index.html>
date: Wed, 13 May 2009 19:58:11 +0100   author:   Owen Rees

Re: Zebra striped list   
In article <hszOl.20541$M64.18752@newsfe26.ams2>,
 "dE|_"  wrote:

> > Javascript solutions are often quite good for this sort of thing.
> 
> Javascript to set auto classes? That's a bit controversial in here isn't it?

The idea is that js is good for things that are not absolutely needed. I 
would say striping was not absolutely needed, wouldn't you?

-- 
dorayme
date: Thu, 14 May 2009 14:52:51 +1000   author:   dorayme

Re: Zebra striped list   
In article <hszOl.20541$M64.18752@newsfe26.ams2>,
 "dE|_"  wrote:

> I don't like that method because of 
> the messy sawtooth HTML you get. If I've got to manually class every other 
> tag I'd rather class them all.

Even if you had 17,000,000 list items? My, my, what some people will do 
when it comes to the aesthetics of the webpage *source*! <g>

-- 
dorayme
date: Thu, 14 May 2009 14:51:27 +1000   author:   dorayme

Re: Zebra striped list   
Message-ID: 
from dorayme contained the following:

>> 
>> Javascript to set auto classes? That's a bit controversial in here isn't it?
>
>The idea is that js is good for things that are not absolutely needed. I 
>would say striping was not absolutely needed, wouldn't you?

Yes it would be a good use for Javascript but as it would be as
difficult to do it with JS as with a server side script, why bother?

However, again at the risk of becoming controversial, I think we are
coming to the point where developers can expect JS to be available if
they want to offer enhanced effects (such as interactive graphs for
example).  Javascript is fine for offering advanced features (try
looking at Google maps with JS on and off).  
-- 
Geoff Berrow  0110001001101100010000000110
001101101011011001000110111101100111001011
100110001101101111001011100111010101101011
http://slipperyhill.co.uk - http://4theweb.co.uk
date: Thu, 14 May 2009 08:59:05 +0100   author:   Geoff Berrow

Re: Zebra striped list   
"dorayme" wrote in message 
news:doraymeRidThis-89FCFD.14525114052009@news.albasani.net...
>
>> > Javascript solutions are often quite good for this sort of thing.
>>
>> Javascript to set auto classes? That's a bit controversial in here isn't 
>> it?
>
> The idea is that js is good for things that are not absolutely needed. I
> would say striping was not absolutely needed, wouldn't you?

I should have put a smiley wink at the end of that, I've got nothing against 
it. I'll give Geoff's PHP a go once I've reinstalled apache.

BTW, if I had a list of 17million *that* would probably be generated 
server-side. The sawtooth aesthetics has limits but we are looking at 4-8 
items going in here.

-- 
======= dE|_ =======
www.websitefoundry.co.uk
www.crackguitar.com
Fender~Photoshop~Markup
date: Thu, 14 May 2009 10:12:40 +0100   author:   dE|_

Re: Zebra striped list   
In article ,
 Geoff Berrow  wrote:

> Message-ID: 
> from dorayme contained the following:
> 
> >> 
> >> Javascript to set auto classes? That's a bit controversial in here isn't 
> >> it?
> >
> >The idea is that js is good for things that are not absolutely needed. I 
> >would say striping was not absolutely needed, wouldn't you?
> 
> Yes it would be a good use for Javascript but as it would be as
> difficult to do it with JS as with a server side script, why bother?
>
>
Fair enough
 
> However, again at the risk of becoming controversial, I think we are
> coming to the point where developers can expect JS to be available if
> they want to offer enhanced effects (such as interactive graphs for
> example).  Javascript is fine for offering advanced features (try
> looking at Google maps with JS on and off). 

And again in many ways...

-- 
dorayme
date: Thu, 14 May 2009 19:12:34 +1000   author:   dorayme

Re: Zebra striped list   
In article <dgROl.3$0V4.1@newsfe25.ams2>,
 "dE|_"  wrote:

> BTW, if I had a list of 17million *that* would probably be generated 
> server-side. The sawtooth aesthetics has limits but we are looking at 4-8 
> items going in here.

<g>

-- 
dorayme
date: Thu, 14 May 2009 20:25:09 +1000   author:   dorayme

Re: Zebra striped list   
Message-ID: <dgROl.3$0V4.1@newsfe25.ams2> from dE|_ contained the
following:

>> The idea is that js is good for things that are not absolutely needed. I
>> would say striping was not absolutely needed, wouldn't you?
>
>I should have put a smiley wink at the end of that, I've got nothing against 
>it. I'll give Geoff's PHP a go once I've reinstalled apache.

I don't test locally any more.  I find it's just as easy to have an ftp
window open and test everything on the server, usually using a
subdomain.
>
>BTW, if I had a list of 17million *that* would probably be generated 
>server-side.

And you'd need a whole load of pagination code too <g>
-- 
Geoff Berrow  0110001001101100010000000110
001101101011011001000110111101100111001011
100110001101101111001011100111010101101011
http://slipperyhill.co.uk - http://4theweb.co.uk
date: Thu, 14 May 2009 11:37:22 +0100   author:   Geoff Berrow

Re: Zebra striped list   
"Geoff Berrow"  wrote in message 
news:9vsn05h9i9mie7mku0hf6muho6egd10218@4ax.com...
> Message-ID: <dgROl.3$0V4.1@newsfe25.ams2> from dE|_ contained the
> following:
>
>>> The idea is that js is good for things that are not absolutely needed. I
>>> would say striping was not absolutely needed, wouldn't you?
>>
>>I should have put a smiley wink at the end of that, I've got nothing 
>>against
>>it. I'll give Geoff's PHP a go once I've reinstalled apache.
>
> I don't test locally any more.  I find it's just as easy to have an ftp
> window open and test everything on the server, usually using a
> subdomain.
>>
>>BTW, if I had a list of 17million *that* would probably be generated
>>server-side.
>
> And you'd need a whole load of pagination code too <g>

If I was working on a site big enough to knock out millions of listed 
articles generated by a database or whatever, that's where I call in Mr Ben. 
:D

-- 
======= dE|_ =======
www.websitefoundry.co.uk
www.crackguitar.com
Fender~Photoshop~Markup
date: Thu, 14 May 2009 12:53:32 +0100   author:   dE|_

Re: Zebra striped list   
In uk.net.web.authoring message <eugn05h7tkjvu5s6rltaagv7omaaea80bp@4ax.
com>, Thu, 14 May 2009 08:59:05, Geoff Berrow 
posted:
>
>Yes it would be a good use for Javascript but as it would be as
>difficult to do it with JS as with a server side script, why bother?

Some do not have server side scripting.

But applying alternating classes to successive lines is something that
can easily enough be done author-side, by a program that prepares the
data, by a script for a suitable RegExp processor, or by a small
purpose-written program.

-- 
 (c) John Stockton, nr London UK. ?@merlyn.demon.co.uk  BP7, Delphi 3 & 2006.
 <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/&c., FAQqy topics & links;
 <URL:http://www.bancoems.com/CompLangPascalDelphiMisc-MiniFAQ.htm> clpdmFAQ;
 NOT <URL:http://support.codegear.com/newsgroups/>: news:borland.* Guidelines
date: Thu, 14 May 2009 20:58:18 +0100   author:   Dr J R Stockton

Re: Zebra striped list   
At 11:37:22 on Thu, 14 May 2009, Geoff Berrow  
wrote in :

>And you'd need a whole load of pagination code too <g>

You rang?
-- 
Molly Mockford
Pagination Associates
http://www.pagination.co.uk
My Reply-To address *is* valid, although it may not remain so for ever.
date: Sun, 17 May 2009 08:19:52 +0100   author:   Molly Mockford

Re: Zebra striped list   
Message-ID: <C4VslvNYq7DKFw5t@molly.mockford> from Molly Mockford
contained the following:

>>And you'd need a whole load of pagination code too <g>
>
>You rang?
 

Heh...small p
-- 
Geoff Berrow  0110001001101100010000000110
001101101011011001000110111101100111001011
100110001101101111001011100111010101101011
http://slipperyhill.co.uk - http://4theweb.co.uk
date: Sun, 17 May 2009 17:07:15 +0100   author:   Geoff Berrow

Re: Zebra striped list   
On 13 May, 10:37, "dE|_"  wrote:

> Anyone know a way to do this without classing each LI tag, maybe with pseudo
> classes?

No, bite the baboon and put classes on your <li> / <tr> as needed.
It's easier to do this from the content generation widget that's
making your HTML than it is from within a client-side or CSS context.
Read Haakon Lie's PhD thesis for long discussions thereof.

If your "content generation widget" is SQL feeding BIRT (Eeeuuwwww!!)
or Jasper, it appears that one might even need to generate the
classnames in the SQL to do this (which is just plain icky).
date: Fri, 29 May 2009 09:44:54 -0700 (PDT)   author:   Andy Dingley

Google
 
Web myreader.co.uk


    COPYRIGHT 2007, YARDI TECHNOLOGY LIMITED, ALL RIGHT RESERVE  |   contact us