Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Hello,
Currently I have a function that will list out nodes in alphabetical order from A-Z in one column.
I now want to make it into a 3 column layout like so:
a e h
b f i
c g j
Note there are sub nodes under each of these headings.
Here is my current XSLT.
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxml="urn:schemas-microsoft-com:xslt" xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:umbraco.contour="urn:umbraco.contour" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch" exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour PS.XSLTsearch "><xsl:output method="xml" omit-xml-declaration="yes"/><xsl:param name="currentPage"/><xsl:variable name="col" select="3" /><xsl:template match="/"><!-- The fun starts here --><ul class="alphabet"><xsl:for-each select="$currentPage/* [@isDoc]" > <xsl:sort select="@nodeName" /> <li> <h3><xsl:value-of select="@nodeName"/></h3> <xsl:if test="count(./* [@isDoc]) > 0"> <ul class="t2n"> <xsl:for-each select="./* [@isDoc]"> <li> <a href="{umbraco.library:NiceUrl(@id)}"> <xsl:value-of select="@nodeName"/> </a> </li> </xsl:for-each> </ul> </xsl:if> </li></xsl:for-each> </ul></xsl:template>
Any help would be great.
Owen
Hi Owen,
Have you solved the HTML/CSS part of the problem? How would the HTML for your 3x3 example look? And as important, how are the nodes structured in Umbraco?
/Chriztian
Hi Chriztian
My Nodes are structure like thisRecipe Landing Page (where the columns are displayed) ARecipe Item 1-A Recipe Item 2-A B Recipe Item 1-B
C
and it keeps going like that til z
HTML/CSS is still kind of undecided. I have looked at examples of people using div's to achieve this as well as people using mulitple <ul>'s
Proabably along the lines of<ul style='float:left;padding-right:100px;'>
<li>A>
<ul><li>Recipe Item 1-A</li> </ul>
</li>
...... for like 8 more nodes (I want them fairly even so maybe dividing by the total node count found)
</ul><ul>
<li>H
</ul>
.... for some more than one final <ul> for the third column.
Thanks for you help,
Probably this snippet will help:
<xsl:for-each select="*"> <xsl:if test="(position() - 1) mod 3 = 0"> <xsl:text disable-output-excaping="yes"> <![CDATA[<ul>]]> </xsl:text> </xsl:if> <li> <xsl:value-of select="@nodeName"/> </li> <xsl:if test="position() mod 3 = 0"> <xsl:text disable-output-excaping="yes"> <![CDATA[</ul>]]> </xsl:text> </xsl:if></xsl:for-each>
You wiil just need a nested for-each inside each <li>, but it seems trivial to implement.
You might want to have a look at the answer I posted to a similar request over here: Simple table row example with templates
Hi,
The problem with using position() that I have a nested foreach loop that adds to the positon which then screws up my logic.
I want to use 3 <ul>'s with classes <ul class="col-1"> <ul class="col-3"> <ul class="col-3">
Thanks
is working on a reply...
Write your reply to:
Upload image
Image will be uploaded when post is submitted
Create 3 Column Layout XSLT.
Hello,
Currently I have a function that will list out nodes in alphabetical order from A-Z in one column.
I now want to make it into a 3 column layout like so:
a e h
b f i
c g j
Note there are sub nodes under each of these headings.
Here is my current XSLT.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:umbraco.contour="urn:umbraco.contour" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour PS.XSLTsearch ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="col" select="3" />
<xsl:template match="/">
<!-- The fun starts here -->
<ul class="alphabet">
<xsl:for-each select="$currentPage/* [@isDoc]" >
<xsl:sort select="@nodeName" />
<li>
<h3><xsl:value-of select="@nodeName"/></h3>
<xsl:if test="count(./* [@isDoc]) > 0">
<ul class="t2n">
<xsl:for-each select="./* [@isDoc]">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:if>
</li>
</xsl:for-each>
</ul>
</xsl:template>
Any help would be great.
Owen
Hi Owen,
Have you solved the HTML/CSS part of the problem? How would the HTML for your 3x3 example look? And as important, how are the nodes structured in Umbraco?
/Chriztian
Hi Chriztian
My Nodes are structure like this
Recipe Landing Page (where the columns are displayed)
A
Recipe Item 1-A
Recipe Item 2-A
B
Recipe Item 1-B
C
and it keeps going like that til z
HTML/CSS is still kind of undecided. I have looked at examples of people using div's to achieve this as well as people using mulitple <ul>'s
Proabably along the lines of
<ul style='float:left;padding-right:100px;'>
<li>A>
<ul>
<li>Recipe Item 1-A</li>
</ul>
</li>
...... for like 8 more nodes (I want them fairly even so maybe dividing by the total node count found)
</ul>
<ul>
<li>H
<ul>
<li>Recipe Item 1-A</li>
</ul>
</li>
</ul>
.... for some more than one final <ul> for the third column.
Thanks for you help,
Owen
Probably this snippet will help:
You wiil just need a nested for-each inside each <li>, but it seems trivial to implement.
Hi Owen,
You might want to have a look at the answer I posted to a similar request over here: Simple table row example with templates
/Chriztian
Hi,
The problem with using position() that I have a nested foreach loop that adds to the positon which then screws up my logic.
I want to use 3 <ul>'s with classes <ul class="col-1"> <ul class="col-3"> <ul class="col-3">
Thanks
Owen
is working on a reply...