How to alternate list iems with Javascript
December 10, 2005
developmentSo, 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