Copied to clipboard

Flag this post as spam?

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


  • Owen Hope 119 posts 140 karma points
    Oct 07, 2011 @ 22:32
    Owen Hope
    0

    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 "&#x00A0;"> ]>
    <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]) &gt; 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


  • Chriztian Steinmeier 2762 posts 8528 karma points MVP 6x admin c-trib
    Oct 07, 2011 @ 23:36
    Chriztian Steinmeier
    0

    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  

  • Owen Hope 119 posts 140 karma points
    Oct 07, 2011 @ 23:44
    Owen Hope
    0

    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

  • Rodion Novoselov 694 posts 859 karma points
    Oct 10, 2011 @ 02:19
    Rodion Novoselov
    0

    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>

     

  • Rodion Novoselov 694 posts 859 karma points
    Oct 10, 2011 @ 02:21
    Rodion Novoselov
    0

    You wiil just need a nested for-each inside each <li>, but it seems trivial to implement.

  • Chriztian Steinmeier 2762 posts 8528 karma points MVP 6x admin c-trib
    Oct 10, 2011 @ 08:52
    Chriztian Steinmeier
    0

    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

  • Owen Hope 119 posts 140 karma points
    Oct 15, 2011 @ 00:25
    Owen Hope
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft