How to alternate list iems with Javascript

December 10, 2005

development

So, TJ and I were trying to figure out a way to get the sidebar on ganb to alternate list item background colors. We did some research on possible CSS classes and pseudo classes but could not figure out a way to do it how we wanted to. So, I set out to create reusable javascript method to take care of this issue.

What I wanted:
1. alternating list item background colors
2. ability to specify which container i wanted to apply this method to (in this case a div).

So, here it is ...

<script language="javascript">

    function doLoadFunctions() {
        setListItemAltColor('test2');
    }

    function setListItemAltColor (src) {
        var divWithLists = document.getElementById(src);
        var items = divWithLists.getElementsByTagName('li');
        var itemsLength = items.length;

        for ( i = 0; i < itemsLength; i++ ) {
            if ( i%2 == 0 ) { 
                items\[i\].style.backgroundColor = "#369"; 
            }
        }
    }

  </script>

I generally have a function that handles all onload javascript events that I call like this: body onload="doLoadFunctions()". Within function doLoadFunctions(), simply call function setListItemAltColor(src), whereas src is the container you wish to apply this to. In the example above, the div I want to apply this to is 'test2'.

There are a few interesting javascript functions I used in this code.
1. if ( i%2 == 0) -- checks to see if integer i is odd or even
2. divWithLists.getElementsByTagName('tag') returns a collection of all elements with the specified tag -- in this instance it's all 'li' tags. `

Enjoy


Active Projects

Here are some of the projects I am currently working on. Some are side projects, some are client projects, and some are just for fun. I like to build things and I like to share what I learn along the way. If you have any questions about any of these projects, feel free to reach out.

📦 Flow Export

Export Salesforce Flow to Miro to collaborate with your team. Read more about the launch of Flow Export on the Salesforce AppExchange.

🤖 Make Storytime

Personalized children's stories generated by AI. This is an app I am building with my kids.

📠 Fax Online

Yea, I know. But there is a long tail for everything and believe it or not there was an underserved market for people that need to send a fax online. Some people (like me!) just need to send a one time fax.

Read more about this micro Saas project in a blog post about building an online fax service.

📱 Cloud Number

Cloud Number is a virtual phone app that helps you protect your privacy online. Use it to receive SMS online and keep your phone number private. It's also a great service for a freelancer or entrepreneur that wants to have a separate phone for their business for SMS and voicemail.

🥑 Free URL Indexer

Free URL Indexer is a free tool to help you index your backlinks and get them into Google faster. It's a simple tool that I built to help me with my own SEO efforts and I decided to share it with the world. It's a free tool and I don't even ask for your email address. Just paste in your URL and click the button.

👉 See all projects