Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Richard Inman 9 posts 29 karma points
    Sep 26, 2012 @ 13:13
    Richard Inman
    0

    Applying a class to the first <a> element in a list only

    Hi folks

    I've created a macro to generate a list for an image carousel. Its working fine, but I need to apply the class "selected" to the first <a> element, so we end up with the following mark up:

    <ul>
    <li><a href="images/making/content/image-01.jpg" title="Yummy cakes" class="selected">1</a></li>
    <li><a href="images/making/content/image-02.jpg" title="Jammy Rings">2</a></li>
    <li><a href="images/making/content/image-03.jpg" title="Macaroons">3</a></li>
    </ul>

    I also need to insert the uploadPhoto alias of the first child node into the img src attribute, within the photo div. This is what I've got so far:

    <xsl:template match="/">
                <div class="photos">
                
                  <div class="photo"><img src="" alt="Sorbet" /></div>
                 
                  <p class="caption"><strong><xsl:number/>.&nbsp;</strong>Sorbet</p>
                 
                  <div class="photos-nav clear">
                   
                    <div class="clear">
                      <a href="#" class="back">Back</a>
                        <!-- The fun starts here -->
                        <ul>
                        <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
                          <li>
                            <a href="{uploadPhoto}" title="{@nodeName}"><xsl:number/></a>
                          </li>
                        </xsl:for-each>
                        </ul>
                      <a href="#" class="next">Next</a>
                     
                    </div>
                   
                  </div>
                 
                </div>
    </xsl:template>

    I appreciate this is probably quite basic, but I'm very, very new to this. Any help would be greatly appreciated!

    Copy Link
  • Fuji Kusaka 2203 posts 4220 karma points
    Sep 26, 2012 @ 13:25
    Fuji Kusaka
    1

    Hi Richard,

    Try this 

    <choose>
    <when test="position() = 1">
    <a href="{uploadPhoto}" title="{@nodeName}" class="selected"><xsl:number/></a>
    </when>
    <otherwise> 
    <a href="{uploadPhoto}" title="{@nodeName}"><xsl:number/></a>
    </otherwise>
    </choose>
    Copy Link
  • Richard Inman 9 posts 29 karma points
    Sep 26, 2012 @ 13:39
    Richard Inman
    0

    Fuji, you're a star! That's done the trick! Thank you!  :-D

    Copy Link
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Sep 26, 2012 @ 21:24
    Chriztian Steinmeier
    1

    Hi Richard,

    You can use a little shortcut for that, so you don't have to duplicate any code - it all adds up, you know :-)

    This also shows you how to grab the first childnode's uploadPhoto:

    <xsl:template match="/">
    <!-- Grab the documents -->
    <xsl:variable name="photoDocuments" select="$currentPage/*[@isDoc][not(umbracoNaviHide = 1)]" />

    <div class="photos">
        <div class="photo">
            <img src="{$photoDocuments[1]/uploadPhoto}" alt="Sorbet" />
        </div>

        <p class="caption"><strong><xsl:number/>.&nbsp;</strong>Sorbet</p>

        <div class="photos-nav clear">
            <div class="clear">
                <a href="#" class="back">Back</a>

                <ul>
                    <xsl:for-each select="$photoDocuments">
                        <li>
                            <a href="{uploadPhoto}" title="{@nodeName}">
                                <xsl:if test="position() = 1"> <xsl:attribute name="class">selected</xsl:attribute> </xsl:if>
                                <xsl:number/>
                            </a>
                        </li>
                    </xsl:for-each>
                </ul>

                <a href="#" class="next">Next</a>
            </div>
        </div>
    </div>
</xsl:template>

    /Chriztian

    Copy Link

  • 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