html helper: ul (Alternating row colors)

[eluser]BigBonsai[/eluser]
Hello,

is it possible to give the <li>-points of the ul($array) output alternating colors? This would result in each row being more readable. Or would I have to edit the html_helper to do that?

Or is there a better way to output arrays in separate rows?

Thanks in advance.


BiB

[eluser]Stefan Hueg[/eluser]
Here you go:

Code:

<style type="text/css">
li.red {
color: red;
}

li.green {
color: green;
}

li span {
color: black;
}
</style>

<ul>
<li class="red"><span>Test</span></li>
<li class="green"><span>Test</span></li>
</ul>

(the span had to be inserted because you will have to reset the color of the text)

[eluser]BigBonsai[/eluser]
Well, that works if I create the UL manually.

I was wondering if it is possible to do the alternating thing - as you showed it nicely - with the ul() function.


BiB

[eluser]GrahamDj28[/eluser]
Hi,

There is a way you can do what you want to do.

Create a file in application/helpers/ and call it MY_html_helper.php
(if you have changed the file prefix in your config, then use what you have defined there instead of MY_)

Then copy the the following functions to that file:
You will find these functions in system/helpers/html_helper.php

Code:

if ( ! function_exists('ul'))
{
    function ul($list, $attributes = '')
    {
        return _list('ul', $list, $attributes);
    }
}

Code:

if ( ! function_exists('ol'))
{
    function ol($list, $attributes = '')
    {
        return _list('ol', $list, $attributes);
    }
}

Code:

if ( ! function_exists('_list'))
{
function _list($type = 'ul', $list, $attributes = '', $depth = 0)
{
  // If an array wasn't submitted there's nothing to do...
  if ( ! is_array($list))
  {
   return $list;
  }

  // Set the indentation based on the depth
  $out = str_repeat(" ", $depth);

  // Were any attributes submitted?  If so generate a string
  if (is_array($attributes))
  {
   $atts = '';
   foreach ($attributes as $key => $val)
   {
    $atts .= ' ' . $key . '="' . $val . '"';
   }
   $attributes = $atts;
  }
  elseif (is_string($attributes) AND strlen($attributes) > 0)
  {
   $attributes = ' '. $attributes;
  }

  // Write the opening list tag
  $out .= "<".$type.$attributes.">\n";

  // Cycle through the list elements.  If an array is
  // encountered we will recursively call _list()

  static $_last_list_item = '';
  foreach ($list as $key => $val)
  {
   $_last_list_item = $key;

   $out .= str_repeat(" ", $depth + 2);
   $out .= "<li>";

   if ( ! is_array($val))
   {
    $out .= $val;
   }
   else
   {
    $out .= $_last_list_item."\n";
    $out .= _list($type, $val, '', $depth + 4);
    $out .= str_repeat(" ", $depth + 2);
   }

   $out .= "</li>\n";
  }

  // Set the indentation for the closing tag
  $out .= str_repeat(" ", $depth);

  // Write the closing list tag
  $out .= "</".$type.">\n";

  return $out;
}
}

Update the last function to fit your needs. E.g. you can add a counter which is used to set the correct class on the <li>

And for the CSS given, instead of color, you can use background to set the background color. Color is used for the font coloring. Using background you also do not need to reset the text color with a span

[eluser]Aken[/eluser]
If 100% browser compatibility isn't a requirement, you can do it using CSS alone.

Code:

ul li { color: black; }
ul li:nth-child(odd) { color: red; }

[eluser]BigBonsai[/eluser]
I didn't think anyone would still have a solution. Thank you very much!!!

I will experiment with both. Great stuff!


BiB

[eluser]InsiteFX[/eluser]
css file

Code:

// change color to what you want.
.alt { background-color: #dfdfdf; }

./application/helpers/MY_html_helper.php

Code:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* ------------------------------------------------------------------------
* Created by Php Designer 8.
* Date  : 5/26/2012
* Time  : 4:38:21 PM
* Author: Raymond L King Sr.
* The Learn CodeIgniter Development Team.
*
* Helper Name
*
* ------------------------------------------------------------------------
* To change this template use File | Settings | File Templates.
* ------------------------------------------------------------------------
*/

// ------------------------------------------------------------------------

/**
* Generates the list
*
* Generates an HTML ordered list from an single or multi-dimensional array.
*
* Add: css style - change color to your liking.
* .alt  { background-color: #dfdfdf; }
*
* @access private
* @param string
* @param mixed
* @param mixed
* @param integer
* @return string
*/
if ( ! function_exists('_list'))
{
function _list($type = 'ul', $list, $attributes = '', $depth = 0)
{
  // If an array wasn't submitted there's nothing to do...
  if ( ! is_array($list))
  {
   return $list;
  }

  // Set the indentation based on the depth
  $out = str_repeat(" ", $depth);

  // Were any attributes submitted?  If so generate a string
  if (is_array($attributes))
  {
   $atts = '';
   foreach ($attributes as $key => $val)
   {
    $atts .= ' ' . $key . '="' . $val . '"';
   }
   $attributes = $atts;
  }
  elseif (is_string($attributes) AND strlen($attributes) > 0)
  {
   $attributes = ' '. $attributes;
  }

  // Write the opening list tag
  $out .= "<".$type.$attributes.">\n";

  // Cycle through the list elements.  If an array is
  // encountered we will recursively call _list()

  static $_last_list_item = '';
  $i = 0;

  foreach ($list as $key => $val)
  {
   $_last_list_item = $key;

   $out .= str_repeat(" ", $depth + 2);

   // We use modulus to alternate the row colors
   $li = (fmod($i++, 2)) ? "<li>" : "<li class='alt' ";

   $out .= $li;

   if ( ! is_array($val))
   {
    $out .= $val;
   }
   else
   {
    $out .= $_last_list_item."\n";
    $out .= _list($type, $val, '', $depth + 4);
    $out .= str_repeat(" ", $depth + 2);
   }

   $out .= "</li>\n";
  }

  // Set the indentation for the closing tag
  $out .= str_repeat(" ", $depth);

  // Write the closing list tag
  $out .= "</".$type.">\n";

  return $out;
}
}


/* ------------------------------------------------------------------------
* End of file MY_html_helper.php
* Location: ./application/helpers/MY_html_helper.php
* ------------------------------------------------------------------------
*/

[eluser]Aken[/eluser]
There's also the alternator() helper function. http://ellislab.com/codeigniter/user-gui...elper.html

[eluser]Near[/eluser]

Code:

<$cript>
  $("li:even").css("background-color", "#F4F4F8");
  $("li:odd").css("background-color", "#EFF1F1");
</$cript>

[eluser]Aken[/eluser]
That's a horribly vague and poor recommendation.