[XSL-LIST Mailing List Archive Home] [By Thread] [By Date] [Recent Entries] [Reply To This Message]

RE: Container HTML around recursive collection

Subject: RE: Container HTML around recursive collection
From: "Chris Bayes" <Chris@xxxxxxxxxxx>
Date: Wed, 20 Jun 2001 09:22:36 +0100
xslt recursive html tables
David,
Have a look on my site in the Tutorials/How To Do This section it does
something similar to what you want. Make sure you check the XSLT stylesheet
and not the XSL one.

Ciao Chris

XML/XSL Portal
http://www.bayes.co.uk/xml


>-----Original Message-----
>From: owner-xsl-list@xxxxxxxxxxxxxxxxxxxxxx
>[mailto:owner-xsl-list@xxxxxxxxxxxxxxxxxxxxxx]On Behalf Of
>divaqs@xxxxxxxxx
>Sent: 20 June 2001 08:24
>To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
>Subject:  Container HTML around recursive collection
>
>
>Hi XSL-List,
>
>I am afraid that I am a newbie to the list. After browsing your
>archives and FAQ it appears you are the people to come to with my
>question. Please include my email address in your responses
>(divaqs@xxxxxxxxx).
>
>I am attempting to write some recursive XSL to iterate through XML
>containing site navigation data. The reason it is recursive is to
>allow for unlimited levels of sub-menus.
>
>The issue I am struggling with is how to enclose my collections of
>items within their own DIV HTML. For such knowledgeable people as
>yourselves this may seem like a simple problem that is easily
>solved, but this is something I have been struggling with for most
>of today. I really would appreciate any direction you might have.
>
>An outline of the intended XSL functionality is:
>  A) Build first level of items
>  B) If first level item has child items then call DIV template
>  C) DIV template creates submenu DIV and lists child items by
>calling Item template for childnode
>  D) Child items are created in item template
>  E) If Child item has its own child items then recursively call
>DIV template again
>
>Resulting HTML is hoped to look something like this:
><Master Table>
>  <Level 1 Table>
>    Item
>  </Level 1 Table>
>  <Level 1 Table>
>    Item with childnodes
>  </Level 1 Table>
>    <DIV>
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>    </DIV>
></Master Table>
>
>Actual Resulting HTML looks something like this:
><Master Table>
>  <Level 1 Table>
>    Item
>  </Level 1 Table>
>  <Level 1 Table>
>    Item with childnodes
>  </Level 1 Table>
>    <DIV>
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>    </DIV> <---------------------This should not be here
>    <DIV> <---------------------This should not be here
>      <Level 2 Table>
>        Item
>      </Level 2 Table>
>    </DIV>
></Master Table>
>
>HELP!!!! I am desperate and extremely frustrated.
>
>Here is a copy of the XSL:
>
><?xml version="1.0" encoding="iso-8859-1"?>
><xsl:stylesheet version="1.0"
>xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
>
>  <!-- Begin Parent Table and TableRow -->
>  <xsl:template match="/">
>  <TABLE class="menu" id="leftnav" border="0" cellpadding="0"
>cellspacing="0" style="background-color:#deefff;" width="146px">
>    <xsl:attribute name="onmouseout">if
>(document.readyState=='complete') if
>(!leftnav.contains(window.event.toElement))
>{removePopup(this);}</xsl:attribute>
>    <TR valign="top">
>      <TD width="5"><IMG src="/images/Trans.gif" height="7"
>width="5" /></TD>
>      <TD class="menuTD" valign="top">
>        <!-- Begin Call Tier1 Template -->
>          <xsl:call-template name="Tier1">
>            <xsl:with-param name="item" select="globalmenu/menu/item" />
>          </xsl:call-template>
>        <!-- End Call Tier1 Template -->
>      </TD>
>    </TR>
>  </TABLE>
>  </xsl:template>
>  <!-- End Parent Table and TableRow -->
>
>  <!-- Begin the Tier1 Template -->
>  <xsl:template name="Tier1">
>    <xsl:param name="item" />
>    <xsl:for-each select="$item">
>      <TABLE>
>      <!-- Set Table Attributes -->
>      <xsl:attribute name="ID">ID_<xsl:value-of select="@id"
>/></xsl:attribute>
>      <!-- Children Conditionals -->
>      <xsl:attribute name="class"><xsl:choose>
>        <xsl:when test="./item">menuBar</xsl:when>
>        <xsl:otherwise>InactiveMenuBar</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseover"><xsl:choose>
>        <xsl:when test="./item">rollon(this);
>popup(ID_<xsl:value-of select="@id" />);</xsl:when>
>        <xsl:otherwise>rollon(this);</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseout"><xsl:choose>
>        <xsl:when test="./item">if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) &amp;&amp; !DIV<xsl:value-of
>select="./item/@id" />.contains(window.event.toElement))
>{rolloff(this);cancelPopup();</xsl:when>
>        <xsl:otherwise>rolloff(this); cancelPopup();</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <!-- URL Conditional -->
>      <xsl:attribute name="onclick"><xsl:if test="@url !=
>''">javascript:location.href='<xsl:value-of select="@url"
>/>'</xsl:if></xsl:attribute>
>      <!-- Begin Test for Name -->
>      <xsl:choose>
>        <xsl:when test="@name != ''">
>          <TR>
>            <TD width="5"><img src="/images/Trans.gif" height="1"
>width="5" border="0" /></TD>
>            <TD align="left" width="100%"
>class="menuBarFont"><xsl:value-of select="@name" /></TD>
>            <xsl:if test="./item">
>              <TD width="20" align="RIGHT"><img id="arrow"
>src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
>            </xsl:if>
>          </TR>
>        </xsl:when>
>        <xsl:otherwise>
>          <TR><TD><BR /></TD></TR>
>        </xsl:otherwise>
>      </xsl:choose>
>      <!-- End Test for Name -->
>    </TABLE>
>    <!-- Call SubTemplate 'DIV' (If children exist) -->
>      <xsl:if test="./item">
>        <xsl:for-each select="./item">
>        <xsl:call-template name="DIV">
>          <xsl:with-param name="item" select="." />
>        </xsl:call-template>
>        </xsl:for-each>
>      </xsl:if>
>    <!-- End Call SubTemplate 'DIV' -->
>    </xsl:for-each>
>  </xsl:template>
>  <!-- End Tier1 Template -->
>
>  <!-- Begin Item Template -->
>  <xsl:template name="Item">
>    <xsl:param name="item" />
>    <xsl:for-each select="$item">
>      <TABLE>
>      <!-- Set Table Attributes -->
>      <xsl:attribute name="ID">ID_<xsl:value-of select="@id"
>/></xsl:attribute>
>      <!-- Children Conditionals -->
>      <xsl:attribute name="class"><xsl:choose>
>        <xsl:when test="./item">SubMenu</xsl:when>
>        <xsl:otherwise>Inactive</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseover"><xsl:choose>
>        <xsl:when test="./item">rollon(this);
>popup(ID_<xsl:value-of select="@id" />);</xsl:when>
>        <xsl:otherwise>rollon(this);</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <xsl:attribute name="onmouseout"><xsl:choose>
>        <xsl:when test="./item">if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) &amp;&amp; !DIV<xsl:value-of
>select="./item/@id" />.contains(window.event.toElement))
>{rolloff(this);cancelPopup();</xsl:when>
>        <xsl:otherwise>if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) )
>{rolloff(this);cancelDelay()</xsl:otherwise>
>      </xsl:choose></xsl:attribute>
>      <!-- URL Conditional -->
>      <xsl:attribute name="onclick"><xsl:if test="@url !=
>''">javascript:location.href='<xsl:value-of select="@url"
>/>'</xsl:if></xsl:attribute>
>      <!-- Begin Test for Name -->
>      <xsl:choose>
>        <xsl:when test="@name != ''">
>          <TR>
>            <TD width="5"><img src="/images/Trans.gif" height="1"
>width="5" border="0" /></TD>
>            <TD align="left" width="100%"
>class="menuBarFont"><xsl:value-of select="@name" /></TD>
>            <xsl:if test="./item">
>              <TD width="20" align="RIGHT"><img id="arrow"
>src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
>            </xsl:if>
>          </TR>
>        </xsl:when>
>        <xsl:otherwise>
>          <TR><TD><BR /></TD></TR>
>        </xsl:otherwise>
>      </xsl:choose>
>      <!-- End Test for Name -->
>    </TABLE>
>    <!-- Call SubTemplate 'DIV' (If children exist) -->
>      <xsl:if test="./item">
>        <xsl:for-each select="./item">
>        <xsl:call-template name="DIV">
>              <xsl:with-param name="item" select="." />
>        </xsl:call-template>
>        </xsl:for-each>
>      </xsl:if>
>    <!-- End Call SubTemplate 'DIV' -->
>    </xsl:for-each>
>  </xsl:template>
>  <!-- End Item Template -->
>
>  <!-- Begin DIV Template  -->
>  <xsl:template name="DIV">
>    <xsl:param name="item" />
>    <DIV width="90" class="floatingMenu" name="floatingMenu"
>style="POSITION:absolute;Z-INDEX:15;LEFT:30px;TOP:100px;DISPLAY:none;">
>      <xsl:attribute name="ID">DIV<xsl:value-of
>select="./item/@id" /></xsl:attribute>
>      <xsl:attribute
>name="onmouseout">if(document.readyState=='complete'){if(!leftnav.c
>ontains(window.event.toElement)&amp;&amp;!DIV<xsl:value-of
>select="./item/@id"
>/>.contains(window.event.toElement)){removePopup(this);}if(!DIV<xsl
>:value-of select="./item/@id"
>/>.contains(window.event.toElement)){rolloff(DIV<xsl:value-of
>select="@id" />);}}</xsl:attribute>
>        <!-- Call SubTemplate 'Item' (If children exist) -->
>          <xsl:for-each select=".">
>          <xsl:call-template name="Item">
>                <xsl:with-param name="item" select="." />
>          </xsl:call-template>
>          </xsl:for-each>
>        <!-- End Call SubTemplate 'Item' -->
>    </DIV>
>  </xsl:template>
>  <!-- End DIV Template -->
>
></xsl:stylesheet>
>
>What is happening is that rather then the collection of menu items
>(each in their own table) being all enclosed within the DIV, the
>items instead have a DIV around each of them.
>
>Here is some example XML:
><globalmenu>
>   <menu name="Foo Menu" url="">
>      <item id="1" url="" name="Foo Information">
>        <item id="1_1" url="10025overview.asp" name="Overview" />
>        <item id="1_2" url="10025req.asp" name="Foo Requirements" />
>        <item id="1_3" url="10025faq.asp" name="Downloadable FAQs" />
>        <item id="1_4" url="10025info.asp" name="Foo Information" />
>        <item id="1_5" url="10025related.asp" name="Related Foo" />
>        <item id="1_7" url="10025features.asp" name="Foo Features" />
>      </item>
>      <item id="2" url="" name="Foo Tools">
>        <item id="2_1" url="/tools.asp?dirID=Pleasure" name="Pleasure" />
>        <item id="2_2" url="/tools.asp?dirID=Anti-Foo" name="Anti Foo" />
>     </item>
>   </menu>
></globalmenu>
>
>Please, please, I really could use some insight on how to get this to work.
>
>Thanks
>David S.
>
>
> XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
>
>


 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


Current Thread

PURCHASE STYLUS STUDIO ONLINE TODAY!

Purchasing Stylus Studio from our online shop is Easy, Secure and Value Priced!

Buy Stylus Studio Now

Download The World's Best XML IDE!

Accelerate XML development with our award-winning XML IDE - Download a free trial today!

Don't miss another message! Subscribe to this list today.
Email
First Name
Last Name
Company
Subscribe in XML format
RSS 2.0
Atom 0.3
Site Map | Privacy Policy | Terms of Use | Trademarks
Free Stylus Studio XML Training:
W3C Member
Stylus Studio® and DataDirect XQuery ™are products from DataDirect Technologies, is a registered trademark of Progress Software Corporation, in the U.S. and other countries. © 2004-2013 All Rights Reserved.