CodeIgniter Forums
html helper: ul (Alternating row colors) - 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: html helper: ul (Alternating row colors) (/showthread.php?tid=51368)

html helper: ul (Alternating row colors) - El Forum - 05-01-2012

[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. Smile


BiB

html helper: ul (Alternating row colors) - El Forum - 05-01-2012

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

Code:
&lt;style type="text/css"&gt;
li.red {
color: red;
}

li.green {
color: green;
}

li span {
color: black;
}
&lt;/style&gt;

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

html helper: ul (Alternating row colors) - El Forum - 05-01-2012

[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

html helper: ul (Alternating row colors) - El Forum - 05-01-2012

[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

html helper: ul (Alternating row colors) - El Forum - 05-01-2012

[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; }


html helper: ul (Alternating row colors) - El Forum - 05-26-2012

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

I will experiment with both. Great stuff! Smile


BiB

html helper: ul (Alternating row colors) - El Forum - 05-26-2012

[eluser]InsiteFX[/eluser]
css file
Code:
// change color to what you want.
.alt { background-color: #dfdfdf; }

./application/helpers/MY_html_helper.php
Code:
&lt;?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
* ------------------------------------------------------------------------
*/


html helper: ul (Alternating row colors) - El Forum - 05-26-2012

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

html helper: ul (Alternating row colors) - El Forum - 05-27-2012

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


html helper: ul (Alternating row colors) - El Forum - 05-27-2012

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