How to apply alternating colors via CSS and Javascript?

Posted on 2009-04-20
Last Modified: 2012-08-13
I'm trying to alternate the colors (tiger striping) on a list that is dynamically generated.

I found a mention online of using Jquery, but I cannot get it to work.
I'm posting the code I have below.
<script type="text/javascript" src="js/jquery.js"></script>  <---- in the header.cfm (header.cfm is included in the index.cfm)


<script language="javascript" type="text/javascript"> <-----------in the listtype.cfm


  ('#lists li:nth-child(odd)').addClass('alternate');




<cfoutput query="qGetListLinks" group="SubCatName">  <-----------in the listtype.cfm




  <ul id="lists">


    <cfif qGetListLinks.linkType LT "1" >

      <li>There is no content for this page. If you feel this is a mistake, feel free to contact the <a href="contact_form.cfm">webmaster</a>.</li>

<cfelseif qGetListLinks.linkSubCatID EQ "5"  >

      <li><a href="#qGetListLinks.URL#" target="_blank">

        <div id="list_acronym">#qGetListLinks.linkLabelAcronym# </div>&nbsp;&nbsp;

        |&nbsp;&nbsp; #qGetListLinks.linkLabel#</a></li>

      <cfelseif qGetListLinks.linkType EQ "4" >

      <li><a href="#qGetListLinks.URL#" target="_blank">#qGetListLinks.linkLabel#</a></li>

      <cfelseif qGetListLinks.linkType EQ "3" >

      <li><a href="#qGetListLinks.URL#" target="_blank">#qGetListLinks.linkLabel#</a></li>


      <li><a href="index.cfm?ID=#qGetListLinks.pageID#&Type=#qGetListLinks.linkType#" >#qGetListLinks.linkLabel#</a> </li>





Open in new window

Question by:rrattie
    LVL 6

    Expert Comment

    You should be able to apply the following.
    var element = document.getElementsByTagName('li');
      if((i%2) == 0)
        element[i].style.backgroundColor = 'cccccc';

    Open in new window

    LVL 2

    Author Comment

    That almost worked.  It affected a list based menu elsewhere on the page, but not the li elements inside of the <ul id="lists">
    LVL 3

    Accepted Solution

    If you are using jquery then better do it this short and sweet way.
    See the code below

    //Just  replace your code
      ('#lists li:nth-child(odd)').addClass('alternate');
    //with this code
      $("#lists li:odd").addClass('alternate');

    Open in new window

    LVL 2

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Suggested Solutions

    Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
    How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now