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 2800 posts 8791 karma points MVP 8x 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 2800 posts 8791 karma points MVP 8x 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

  • 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