Skip to main content

Alternative row colours in XSL

In the same project as before, my search results are being presented in a table.  The issue here, is that I want to have a different background colour for an alternate for the purpose of easy readability.

Luckily, XSL saves the day with the position() function.  This is really handy for obtaining your current index when in a loop.  Just as with using any other server side language you want to mod 2 the position to identify the alternate row:

<xsl:if test="position() mod 2 ='1'">
    <xsl:attribute name="class">rowA</xsl:attribute>
</xsl:if>


For a quick reminder of the modulus operation (mod): when applying the arithmetic on an even number it, correctly returns 0.  When applying to an uneven number, such as 5, it will return the value 1.  1 denotes that there is a remainder.

The purpose of xsl:attribute is to apply XML/XSL to an attribute of a HTML tag.  In this case I want to apply a CSS style to the table row (tr), to keep separation of design and content in the resulting HTML.





Blogged with Flock

Comments

Popular posts from this blog

Get the most out of your browser

A whole year without a blog post! Now that I've changed job, I'm hoping that I can settle down and push more useful tips on my blog. So, to get back to form I have one about web browser productivity. Web browsers have come a long way since it's inception in the early days of the World Wide Web. But if you've just been using it to browse the Web, you are really missing out on a ton of stuff. Productivity is just the start of it. Let's take a look at some of the hidden gems that a browser has to offer. I will mostly be focusing on Chrome and Firefox, but a lot (if not all) the tips may apply to your favourite browser. Pin Tabs First up is the ability to pin a tab. You do this by right-clicking on a tab and selecting Pin Tab . Did you just see how it react? It resize and just shows the icon. If you have a lot of tabs this is a real space saver. Using Keywords Firefox has keyword bookmarking, which is an absolute essential for many. This allows you to call a

Will we ever get Dreamweaver on Linux?

I have been a keen user of Ubuntu for some time now, and have to admit that this distribution has improved by leaps and bounds. However, what I do honestly miss on windows is... Dreamweaver. Some will swear by it, some will swear at the mention of its name. But for me, it is a very powerful tool when used correctly. Such a very popular and powerful web design and development tool is available on Windows and Mac OS, but not Linux. If you would just consider, Adobe has already supported the platform with their Adobe Reader and Adobe Air. Why is Dreamweaver not available? It just seems that there's not such a huge call for it so they just don't see the need to put in an effort for another platform. One chap at Adobe suggested to use Dreameaver under wine , but it doesn't work so great. There is an alternative to wine which, according to a user on the forums, works flawlessly - Crossover . However, the former option is not free, so some may be dissuaded where they woul

Image links in IE8

While mocking up a design page for a colleague's website I came across a new browser behaviour in IE8. This was the first time I used IE8 as my main development browser, due to the fact that the PC was re-installed and high-priority updates were applied. Surprisingly Microsoft branded IE8 as a priority update. Anyway, back to what I was talking about, here's a sample: <a href="index.htm"><img src="logo2.jpg" alt="Logo" title="Logo" /></a> As you can tell, this is using an image for a link, where it behaves well in Chrome, Firefox and in the previous versions of IE (7 and older). But in IE8, this is not the case as the DOM does not treat the image as innerText, only as a child node. As a result, everytime I hover the mouse over this image, an extra gap would come from nowhere shifting any relatively positioned elements. To fix this I explicitly added a space (&nbsp;), so the line would look like: <a href="inde