“Selected link in a infinite scrolling” – Forum Thread – Discuss

- noidsign
- 17 Jan 12, 9:28 am
- Comment #1

Hello everyone, I am a total newbie to Symphony. With the help of a friend a few time ago I was able to build up my website. I have a main page with all my content displayed in an infinite scroll and anchors that mark it.

Now I would like to have the possibility to create a specific class for the anchor I am currently watching, so that I can create a CSS for that.

Basically like the navigation on the left side of this website: http://www.sightseeing-tirol.com/

Unfortunately I really don't have a clue of where to start the process, so any help with this would be mostly appreciated.

Thank you all!

- moonoo2
- 17 Jan 12, 9:56 am
- Comment #2

If you have an '<a>' tag you can append attributes to the tag by using <xsl:attribute name="class"><xsl:value-of select="entry title or id or whatever you can grab from your datasource"/></xsl:attribute>

Do you have an example of your .xsl page we can see?

- noidsign
- 17 Jan 12, 5:40 pm
- Comment #3

Sounds supercool!

Here it is the xsl page:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:include href="../utilities/master.xsl"/>

<xsl:template match="data">
    <!-- project -->
    <h2>
        <xsl:choose>
            <xsl:when test="/data/events/login-info/@logged-in = 'true'">
                <a target="_blank" href="{$root}/symphony/publish/projects/edit/{project/entry/@id}"><xsl:value-of select="project/entry/title"/></a>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="project/entry/title"/>
            </xsl:otherwise>
        </xsl:choose>
    </h2>
    <!-- secondary navigation -->
    <nav id="secondNav">
        <h2>Secondary Navigation</h2>
        <ul>
            <xsl:call-template name="secondary-navigation"/>
        </ul>
    </nav>
    <!-- contents-->
    <div id="project">
        <xsl:apply-templates select="project/entry/blocks"/>
    </div>
</xsl:template>

<xsl:template name="secondary-navigation">
    <xsl:for-each select="project/entry/blocks/item">
        <li>
            <a href="#{subtitle/@handle}"><xsl:value-of select="subtitle"/></a>
        </li>
    </xsl:for-each>
</xsl:template>

<xsl:template match="blocks/item">
    <div class="block" id="{subtitle/@handle}">
        <h3><xsl:value-of select="subtitle"/></h3>
        <xsl:apply-templates select="text"/>
    </div>
</xsl:template>
<!-- text -->
<xsl:template match="text//*">
    <xsl:element name="{name()}">
        <xsl:apply-templates select="@*"/>
        <xsl:apply-templates/>
    </xsl:element>
</xsl:template>

<xsl:template match="text//@*">
    <xsl:attribute name="{name(.)}">
        <xsl:value-of select="."/>
    </xsl:attribute>
</xsl:template>
<!-- changing heading h1 and h2 to h3 -->
<xsl:template match="h1 | h2 | h3" priority="1">
    <xsl:element name="h4">
        <xsl:apply-templates select="* | @* | text()" />
    </xsl:element>
</xsl:template>
<!-- changing external link/s -->
<xsl:template match="a" priority="1">
    <xsl:choose>
        <xsl:when test="substring(@href, 8, 14) != substring($root, 8, 14)">
            <a>
                <xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute>
                <xsl:attribute name="target"><xsl:text>_blank</xsl:text></xsl:attribute>
                <xsl:attribute name="title"><xsl:value-of select="@title"/></xsl:attribute>
                <xsl:value-of select="."/>
            </a>
        </xsl:when>
        <xsl:otherwise>
            <xsl:element name="{name()}">
                <xsl:apply-templates select="@*"/>
                <xsl:apply-templates/>
            </xsl:element>
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>
<!-- changing img -->
<xsl:template match="p[img]" priority="1">
    <xsl:for-each select="img">
        <xsl:choose>
            <xsl:when test="substring(@src,1,7) != 'http://'">
                <img src="{$workspace}/images/projects/{@src}" alt="{@alt}" title="{@title}" />
            </xsl:when>
            <xsl:otherwise>
                <img src="{@src}" alt="{@alt}" title="{@alt}" />
            </xsl:otherwise>
        </xsl:choose>
    </xsl:for-each>
</xsl:template>
<!-- meta description -->
<xsl:template name="description">
    <xsl:value-of select="data/project/entry/description"/>
</xsl:template>
<!-- meta keywords -->
<xsl:template name="keywords">
    <xsl:value-of select="data/project/entry/keywords"/>
</xsl:template>
</xsl:stylesheet>

And if I am not wrong it should be somewhere in here where I have to put the attribute class

<xsl:template name="secondary-navigation">
        <xsl:for-each select="project/entry/blocks/item">
            <li>
                <a href="#{subtitle/@handle}"><xsl:value-of select="subtitle"/></a>
            </li>
        </xsl:for-each>
    </xsl:template>

    <xsl:template match="blocks/item">
        <div class="block" id="{subtitle/@handle}">
            <h3><xsl:value-of select="subtitle"/></h3>
            <xsl:apply-templates select="text"/>
        </div>
    </xsl:template>

- noidsign
- 18 Jan 12, 7:07 am
- Comment #4

I tried to change this piece of code

<xsl:template name="secondary-navigation">
    <xsl:for-each select="project/entry/blocks/item">
        <li>
            <a href="#{subtitle/@handle}"><xsl:value-of select="subtitle"/></a>
        </li>
    </xsl:for-each>
</xsl:template>

for this

<xsl:template name="secondary-navigation">
    <xsl:for-each select="project/entry/blocks/item">
        <li>
            <a href="#{subtitle/@handle}"><xsl:attribute name="class"><xsl:value-of select="subtitle"/></a></xsl:attribute>
        </li>
    </xsl:for-each>
</xsl:template>

But it seems a mistake... Any suggestion on how I could fix it? Thank you so much!

- noidsign
- 18 Jan 12, 7:59 am
- Comment #5

OK, so far I got to this

<xsl:template name="secondary-navigation">
    <xsl:for-each select="project/entry/blocks/item">
        <li>
            <a href="#{subtitle/@handle}">  
                <xsl:attribute name="class">current</xsl:attribute>
                <xsl:value-of select="subtitle"/>
            </a>
        </li>
    </xsl:for-each>
</xsl:template>

Problem is that it provides the class "current" to all the links, while I wanted to have just the current block that I am watching to have the class "current". I guess that has something to do with the xls if and when, but I really don't know how that works. :( Can you please help me with that?

Thank you!!

- Allen
- 18 Jan 12, 9:22 am
- Comment #6

A couple of things:

Firstly, the navigation on www.sightseeing-tirol.com/ uses some javascript to dynamically switch the selected class attribute around. So it's important to note the distinction between the two set-ups.

Secondly, regarding your XSLT template, try something like:

<xsl:template name="secondary-navigation">
    <xsl:for-each select="project/entry/blocks/item">
        <li>
            <a href="#{subtitle/@handle}">
                <xsl:if test="your-test-condition">
                    <xsl:attribute name="class">current</xsl:attribute>
                </xsl:if>
                <xsl:value-of select="subtitle"/>
            </a>
        </li>
    </xsl:for-each>
</xsl:template>

The important line of code is the xsl:if instruction. The your-test-condition is where you would put some conditional logic to decide when the current class should be applied.

- noidsign
- 18 Jan 12, 11:39 am
- Comment #7

Thank you! I would now say SOLVED! Thanks again!

Symphony.

Selected link in a infinite scrolling

Search

Server Requirements

Symphony.

Selected link in a infinite scrolling

Search

You are looking at page 1 of 1

Server Requirements

Sign in