Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Sam 184 posts 209 karma points
    Jan 29, 2011 @ 20:21
    Sam
    0

    Add a class to every third item on a list

    Hi everyone,

    I am working with the following xslt:

    <xsl:template match="/">
            <div id="portfolio-list-wrapper">
                    <ul id="portfolio-list">
                      <xsl:apply-templates select="$currentPage/descendant-or-self::* /PortfolioItem">
                                    <xsl:sort select="@createDate" data-type="text" order="descending" />
                            </xsl:apply-templates>
                    </ul>
            </div>
    </xsl:template>

    <xsl:template match="PortfolioItem">

                                  <li>
                                                               
                    <a href="{umbraco.library:NiceUrl(@id)}">
                      <xsl:apply-templates select="WebsitePreviewImage1" />
                    </a>            
        <p class="portfolioTextLink"><a href="{umbraco.library:NiceUrl(./@id)}"><xsl:value-of select="@nodeName"/></a></p>

    <div class="portfolio-box-shadow-sml"><xsl:comment>empty div holds shadow bg image</xsl:comment></div>
    </li>
    </xsl:template>

    <!-- Template for the WebsitePreviewImage1 property -->
    <xsl:template match="WebsitePreviewImage1">
            <xsl:variable name="media" select="umbraco.library:GetMedia(., false())" />
            <img alt="{$media/@nodeName}" src="{$media/umbracoFile}" width="250" />
    </xsl:template>

    <!-- Template for an empty WebsitePreviewImage1 property -->
    <xsl:template match="WebsitePreviewImage1[not(normalize-space())]">
            <img src="/images/rollback.png" alt="No preview available" width="250" />
    </xsl:template>

    I am trying to add a class="last" to every third item on the list. I have tried numerous combinations but none work to the desired effect. This is what I'm trying to incorporate but not sure how to do it:

    <xsl:if test="position() mod 3 = 0">
    <xsl:attribute name="class">last</xsl:attribute>
    </xsl:if>

    Thanks in advance if anyone can help :)

    Sam.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jan 29, 2011 @ 20:34
    Jan Skovgaard
    0

    Hi Sam

    Don't you just need to place the test right under your opening <li> element? That should work.

    /Jan

  • Sam 184 posts 209 karma points
    Jan 29, 2011 @ 20:46
    Sam
    0

    Hi Jan,

    I tried that just before AND just after the <li>. I either end up outputting ONLY the third element or 4 boxes (I have border 1px around the images), 1, 2 and 4 are empty and the THIRD one with full info (with class="last").

    I think I'm just putting it in the wrong place or maybe I have to specify more information ie another separate template for each third item?

    Thanks,

    Sam.

     

     

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jan 29, 2011 @ 20:48
    Jan Skovgaard
    0

    Hi Sam

    But isn't that exactly what you're intending? The class="last" i applied to every third element, right? Or am I misunderstanding your question totally? :-)

    /Jan

  • Sam 184 posts 209 karma points
    Jan 29, 2011 @ 20:54
    Sam
    0

    Hi Jan,

    Exactly right, but the list doesn't display properly after I add the test in. It's a horizontal menu, 3 items per row. Each item is an image with a border, every third item must have class="last". So, once I add the test I wrote above to my xslt, I get a list consisting of:

    empty box | empty box | box with image and class="last" | empty box

    instead of the desired:

    box with image | box with image | box with image class="last" | box with image

    If that makes sense. It seems the test is stopping the images from displaying for some reason.

    Sam.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jan 29, 2011 @ 20:59
    Jan Skovgaard
    1

    And without the test you're getting the desired result on 1,2 and 4?

    do you place the test like this:

    <li>

    <xsl:if test="position() mod 3 = 0"> <xsl:attribute name="class">last</xsl:attribute> </xsl:if>

    <!-- Code goes here-->

    </li>

    /Jan

  • Sam 184 posts 209 karma points
    Jan 29, 2011 @ 21:03
    Sam
    0

    Hi Jan,

    The example you show above is exactly what I just tried before you posted :)

    I was placing the end </xsl:if> before the </li> rather than grouping all the code together as you have above. Doh!

    Thanks,

    Sam.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jan 29, 2011 @ 21:15
    Jan Skovgaard
    0

    Hi Sam

    I guess I should have been much more clear on exactly where to place the snippet. But finally we got it sorted out :-)

    Cheers

    /Jan

Please Sign in or register to post replies

Write your reply to:

Draft