Alternate row colours - Printable Version

Alternate row colours - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Alternate row colours (/showthread.php?tid=26156)

Pages: 1 2

Alternate row colours - El Forum - 01-07-2010

[eluser]Bainzy[/eluser]
Hi everyone,

i have being looking around for a way of making alternate row colors, the only information i can find is on the table class ... however i do not want to use tables to make my listings .. i use divs to contain my information, how can i alternate row colours using divs ??

Any help would be greatly appreciated.

Chris

Alternate row colours - El Forum - 01-07-2010

[eluser]n0xie[/eluser]
If it's tabular data, why not use a table?

Alternate row colours - El Forum - 01-07-2010

[eluser]Bainzy[/eluser]
because every website i code i use pure css and divs for .. i never use the table element of html just the way i work i guess

Maybe if i give some more information on the project.

Basically i am making a property listings website, now the front page has 10 of the latest properties listed, and all i wanted to do was have the alternating colours so people can easily distinguish the different properties.

eg

Code:
<div id="row1">

 // Property info

</div>

<div id="row2">

 // Property info

</div>

Alternate row colours - El Forum - 01-07-2010

[eluser]n0xie[/eluser]
Semantically speaking, imho the table element is correct if you are talking about 'rows' or in your case it should be a list. But to each his own.

Code:
&lt;?php 

$zebra = NULL;

foreach($list as $value): 

  $zebra = (is_null($zebra)) ? 'someclassname' : NULL;

  echo "<div class='$zebra'>some stuff here</div>";

endforeach;

?&gt;

Alternate row colours - El Forum - 01-07-2010

[eluser]alphane[/eluser]
What's wrong with just giving the alternative div a new css class when printing each property?

Code:
$alt = 'alt';

*start loop*

    &lt;?

    if ($alt) {

        $alt = '';

    }

    else

    {

        $alt = 'alt';

    }

    ?&gt;

    <div class="property &lt;?=$alt;?&gt;">

        //content...

    </div>

*do loop*

So you're looking for an output of

Code:
<div class="property"></div>

<div class="property alt"></div>

<div class="property"></div>

<div class="property alt"></div>

<div class="property"></div>

Alternate row colours - El Forum - 01-07-2010

[eluser]alphane[/eluser]
n0xie's version is tidier :-)

Alternate row colours - El Forum - 01-07-2010

[eluser]Eric Barnes[/eluser]
Just use the alternator function. Part of the string helper:
http://ellislab.com/codeigniter/user-guide/helpers/string_helper.html

Alternate row colours - El Forum - 01-07-2010

[eluser]sdotsen[/eluser]
You can do the same for CSS classes ...

Code:
$i=0;

$colors = array('blue', 'white');

foreach( $students as $student )

{

 <insert code seen below - CI forum strips the HTML code>

}

Quote:echo '<tr bgcolor="'.$colors[$i++ % 2].'"><td>'.$student.'</td></tr>';

Alternate row colours - El Forum - 01-08-2010

[eluser]Bainzy[/eluser]
hi everyone and thanks for the comments and the help. I ended up useing alphances code and it worked a charm so i will leave it like that for the time being.

Thanks again for the fast responces and great help !

Alternate row colours - El Forum - 01-08-2010

[eluser]Johan André[/eluser]
How the hell can this:

Code:
$alt = 'alt';

*start loop*

    &lt;?

    if ($alt) {

        $alt = '';

    }

    else

    {

        $alt = 'alt';

    }

    ?&gt;

    <div class="property &lt;?=$alt;?&gt;">

        //content...

    </div>

*do loop*

...be cleaner than this:

Code:
&lt;? foreach($items AS $item) : ?&gt;

   <div class="&lt;?=alternator('odd', 'even');?&gt;">

      // content

   </div>

&lt;? endforeach; ?&gt;

Just asking... Smile