Alternator function inside template loop

[eluser]guidorossi[/eluser]
Hi!

I'm doing a list of articles with the template parser class like:

Code:

{articles}
            <ul class="&lt;?=alternator('even', 'odd');?&gt;">
                <li class="article_name">{name}</li> <li class="article_descr">{description}</li>
            </ul>
{/articles}

The idea is to user alternator() to make the zebra like list, alternating the rows colors
But with that code I get always:

Code:

<ul class="even">

which would be the right way to do this? because it seems that the alternator function doesn't recognize the template loop as a loop

Thanks!

[eluser]InsiteFX[/eluser]
I do it using CI Table Class and assigning a css class alt to the Table row.

InsiteFX

[eluser]guidorossi[/eluser]
But that way you can't also use the template class, right?
By not using the template class I can simply do:

Code:

<?php if($articles): foreach($articles as $article): ?>
            <ul class="&lt;?=alternator('even', 'odd');?&gt;">
                <li class="article_name">&lt;?=$article->name?&gt;</li>
                <li class="article_descr">&lt;?=$article->description?&gt;</li>
            </ul>
&lt;?php endforeach; endif;?&gt;

But as I was coding all the views using template, I just want to use for this too...

[eluser]John_Betong_002[/eluser]
Try this:

Code:

// css_file
  #alternator_001 li:nth-child(even) {background:#fe9}
  #alternator_001 li:nth-child(odd)  {background:#fe6}

// view_file
{articles}
<ul id="alternator_001">
   <li>
      {name}
      {description}
   </li>
  </ul>
{/articles}

 
 

[eluser]guidorossi[/eluser]
Thanks john!

I've made it with:

Code:

//css file
#articles_list ul:nth-child(even){
    background:#EDF3FE
}

#articles_list ul:nth-child(odd){
    background:#FFF
}


//view file
<div id="articles_list">
{articles}
            <ul>
                <li class="article_name">{name}</li>
                <li class="article_descr">{description}</li>
            </ul>
{/articles}
</div>

Thank you very much!

[eluser]John_Betong_002[/eluser]
I am curious to know the values of "article_name" and "article_descr".

I think it is better to use "li h3 {...}" and "li p {...}" instead of replicating your classes.

I think also you can apply id="articles_list" directly to your unorderd-list and eliminate the div.

Code:

//css file
#articles_list li h3 {font-weight:700; color:red; font-size:2em; line-height:4em; margin-bottom:2em}
#articles_list li p  {font-size:0.88em; padding:0.42em; background-color:#eee;color:#333}

#articles_list li:nth-child(even){ background:#EDF3FE}
#articles_list li:nth-child(odd) { background:#FFF}

//view file
{articles}
  <ul id="articles_list">
    <li>
        <h3> {name}        </h3>
        <p>  {description} </p>
    </li>
  </ul>
{/articles}

 
 

[eluser]guidorossi[/eluser]
John,

But each line is a <ul> in my code, and each <li> is a column. As I want each line with a different colour the way I posted I think is the best one.

It's a kind of grid but without using tables, just css. My li's are display:inline

Maybe I can just use tables, but I like it this way.

[eluser]John_Betong_002[/eluser]
It is difficult for me to picture your requirements. If it works and you are happy then no problem. Just move on to the next hurdle
&nbsp;

[eluser]cideveloper[/eluser]
Just be careful. nth-child is only supported in IE9

[eluser]InsiteFX[/eluser]
If you view the source code to the alternator method you will see why it doe's not work for you!

InsiteFX