?
Solved

How to apply alternating colors via CSS and Javascript?

Posted on 2009-04-20
4
Medium Priority
?
435 Views
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
 
$(document).ready(function(){
  ('#lists li:nth-child(odd)').addClass('alternate');
});
 
</script>
 
======================================================================
 
<cfoutput query="qGetListLinks" group="SubCatName">  <-----------in the listtype.cfm
  <h3>
  #qGetListLinks.SubCatName#
  </h3>
  <ul id="lists">
  <cfoutput>
    <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>
      <cfelse>
      <li><a href="index.cfm?ID=#qGetListLinks.pageID#&Type=#qGetListLinks.linkType#" >#qGetListLinks.linkLabel#</a> </li>
    </cfif>
  </cfoutput> 
  </ul>
</cfoutput>

Open in new window

0
Comment
Question by:rrattie
  • 2
4 Comments
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24187512
You should be able to apply the following.
var element = document.getElementsByTagName('li');
for(i=0;i<element.length;i++)
{
  if((i%2) == 0)
  {
    element[i].style.backgroundColor = 'cccccc';
  }
}

Open in new window

0
 
LVL 2

Author Comment

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

Accepted Solution

by:
hard2u2001 earned 2000 total points
ID: 24194229
If you are using jquery then better do it this short and sweet way.
See the code below

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

Open in new window

0
 
LVL 2

Author Closing Comment

by:rrattie
ID: 31572310
Thanks!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

839 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