tips and tricks for movable type
alternating colors
March 24, 2002
Using Javascript to get alternating colors by class, courtesy of Ben Trott in this Community Forum topic.
<script language="javascript">
var counter = 0;
</script>
<MTEntries>
<script language="javascript">
if (counter++ % 2)
document.write('<div class="even">');
else
document.write('<div class="odd">');
</script>
...
</div>
</MTEntries>
var counter = 0;
</script>
<MTEntries>
<script language="javascript">
if (counter++ % 2)
document.write('<div class="even">');
else
document.write('<div class="odd">');
</script>
...
</div>
</MTEntries>
Replace ... with MT Entries coding.
Edited 05.04.2002 to add:
And here's the PHP version, courtesy of Brenna in this MT support forum thread:
<div class="<? echo <MTCommentOrderNumber> % 2 ? "alt2" : "alt1" ?>"><MTCommentBody>
</div>
Stylesheet:
.alt1 {
background-color: #ffffff;
}
.alt2 {
background-color: #eeeeee;
}
Edited 05.01.2005 to add:
You can also use a plugin for this:
Comments
This didn't seem to work for me. It caused alternating classes to be different colors but it bumped the side div and calendar all the way to the bottom.
Any suggestions? Great site!
Probably should clarify that I am trying to use the non-PHP solution. No php on our server unfortunately.
Hmmm, perhaps you need to specify a width for your even and odd classes? Maybe it's too wide, forcing the sidebar content down as a result.
Do you have any floating div's? If so, that could be a definite problem.