[xsl] Combining XSLT and CSS

I've learned so many useful things from other contributors to this list 
- that I thought it useful to share something I discovered.
Maybe it is covered in one of the excellent books available or somewhere 
in an FAQ - but I haven't see it, so here goes:
If I want to implement the usual "Previous Page" and "Next Page" 
buttons, then my XSLT might look something like this:
       <td>
           <input name="rowNo" type="hidden" value="{$rowNo}" 
readonly="true" />
           <xsl:choose>
               <xsl:when test="($rowNo &gt; 1)"><input type="image" 
src="{$gifPrev}" name="prev" /></xsl:when>
               <xsl:otherwise><img src="{$gifSpace}" width="20" 
border="1" /></xsl:otherwise>
           </xsl:choose>
           <xsl:choose>
               <xsl:when test="($rowNo = $pageSize)"><input 
type="image" src="{$gifNext}" name="next" /></xsl:when>
               <xsl:otherwise><img src="{$gifSpace}" width="20" 
border="1" /></xsl:otherwise>
           </xsl:choose>
      </td>
this replaces the "prevPage" button with an invisible "space" GIF when 
on page #1
The following solution combines CSS and XSLT for maximum readability and 
clarity:
1. In the CSS file, define the following:
   input.showtrue {visibility: visible}
   input.showfalse {visibility: hidden}

2. In the XSLT file, the above code simplifies to the following:
       <td>
           <input name="rowNo" type="hidden" value="{$rowNo}" 
readonly="true" />
           <input type="image" class="show{boolean($rowNo &gt; 1)}" 
src="{$gifPrev}" name="prev" />
           <input type="image" class="show{boolean($rowNo = 
$pageSize)}" src="{$gifNext}" name="next" />
      </td>

The AVTs in the above evaluate to 'true' or 'false' and consequently are 
rendered as 'visible' or 'hidden' respectively.
CSS 'visibility' is used instead of 'display' because the browser will 
render the image inline - negating the need for a "Space" gif.
It also eliminates the "jitter" when the "Space" and "prevPage" images 
are not exactly the same size.

--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--