Selected link in a infinite scrolling
This is an open discussion with 6 replies, filed under Troubleshooting.
Search
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?
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>
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!
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!!
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.
Thank you! I would now say SOLVED! Thanks again!
Create an account or sign in to comment.
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!