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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies