I want to create a list of 'cases' on a website. The cases are subpages for the page that is planned to view list. They are build from the document type "Case". The special about this document type is that it contains an uploaded thumbnail for the specific case. I have created this list, but I would like to have it like the jQuery Tools Scrollable minimal setup (see it here).
So the trick is that for every five cases (subpages) they should be wrapped in a div, but also if there are e.g. 7 cases (5+2) the last 2 should also be wrapped in a div.
I'm sure some of the more Xslt-skilled Umbracians can answer your question - and I'd like to see the answer too. But I'd suggest you to ask it at Stackoverflow aswell for a quick answer if you dont get it here soon enough (bigger forum - quick responses, and your question is applicable outside of Umbraco). If you do and get the answer there - please post it back here aswell :-)
Should be possible, I think you need to do a little juggling of what you have though but you are not far off. Try something like this instead:
<xsl:if test="$currentPage/@id = '1063' or $currentPage/@parentID = '1063'">
<a class="prev browse left"></a>
<div class="scrollable">
<div class="items">
<xsl:for-each select="umbraco.library:GetXmlNodeById('1063')//Case [@isDoc]">
<xsl:variable name="thisId" select="./@id"/>
<!-- open your first div, we will only do it this once -->
<xsl:if test="position() = first()">
<!-- bit dirty this bit but it will work -->
<xsl:text><div></xsl:text>
</xsl:if>
<!--Up to 5 links and images here-->
<xsl:choose>
<xsl:when test="position() = last()">
<!-- just close your last div, as this is top of the choose statement none of the others will run so it should be safe to assume we are at the end -->
<xsl:text></div></xsl:text>
</xsl:when>
<xsl:when test="position() mod 5 = 0">
<!-- close our open div -->
<xsl:text></div></xsl:text>
<!-- open a new one -->
<xsl:text><div></xsl:text>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</div>
</div>
<a class="next browse right"></a>
</xsl:if>
Not checked it though so might need a little bit of work ;)
Let me know if you have any problems or if it works
Here's the unified and very XSLT way of doing stuff like this - which is also pretty much exactly how you'd do the much-coveted "group-to-table" problem, without resorting to PHP/ASP-like "cheating" (I'm kidding, of course :-)
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:make="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="umbraco.library make"
>
<xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />
<xsl:param name="currentPage" />
<xsl:variable name="root" select="$currentPage/ancestor-or-self::root" />
<!-- Size of group -->
<xsl:variable name="groupsize" select="5" />
<!-- Grab the data to output -->
<xsl:variable name="nodes">
<xsl:copy-of select="$root//*[@id = 1063]//Case" />
<!-- You can do more complex stuff - e.g., pre-sorting the lot, if necessary -->
</xsl:variable>
<!-- Enable XPath selection in nodes -->
<xsl:variable name="data" select="make:node-set($nodes)" />
<xsl:template match="/">
<a class="prev browse left"></a>
<div class="scrollable">
<div class="items">
<!-- Apply templates to every Nth document, starting with the first -->
<xsl:apply-templates select="$data/*[position() mod $groupsize = 1]" mode="group" />
</div>
</div>
<a class="next browse right"></a>
</xsl:template>
<!-- Template to start a group -->
<xsl:template match="Case" mode="group">
<div>
<!-- Now render this document and the following to a total of N -->
<xsl:apply-templates select=". | following-sibling::Case[position() < $groupsize]" mode="item" />
</div>
</xsl:template>
<!-- Template for a Case -->
<xsl:template match="Case" mode="item">
<div>
<!-- Get creative... -->
<xsl:value-of select="@nodeName" />
</div>
</xsl:template>
</xsl:stylesheet>
When debugging XSLT output you have to look at the actual output (view-source) and not the DOM generated by the browser (you're seeing this in Firebug/Web Inspector).
I was assuming you were filling the prev/next links with some text too - if you don't, the processor will output self-closing anchors (<a />) - a topic for another day :-)
Try putting some text in the anchors and see what happens (alternately, you can put an epty comment in there - <xsl:comment /> to fix it)
jQuery tools scrollable - can it be done?
Here is one I can't figure out my self...
I want to create a list of 'cases' on a website. The cases are subpages for the page that is planned to view list. They are build from the document type "Case". The special about this document type is that it contains an uploaded thumbnail for the specific case. I have created this list, but I would like to have it like the jQuery Tools Scrollable minimal setup (see it here).
My current xslt code is:
But when it gets to making the scrollable list I guess (made from the example in the link above) that it should look more like this:
So the trick is that for every five cases (subpages) they should be wrapped in a div, but also if there are e.g. 7 cases (5+2) the last 2 should also be wrapped in a div.
Can someone help with that?
I would still like some help with this...
Hi!
I'm sure some of the more Xslt-skilled Umbracians can answer your question - and I'd like to see the answer too. But I'd suggest you to ask it at Stackoverflow aswell for a quick answer if you dont get it here soon enough (bigger forum - quick responses, and your question is applicable outside of Umbraco). If you do and get the answer there - please post it back here aswell :-)
Regards
Jonas
Should be possible, I think you need to do a little juggling of what you have though but you are not far off. Try something like this instead:
<xsl:if test="$currentPage/@id = '1063' or $currentPage/@parentID = '1063'"> <a class="prev browse left"></a> <div class="scrollable"> <div class="items"> <xsl:for-each select="umbraco.library:GetXmlNodeById('1063')//Case [@isDoc]"> <xsl:variable name="thisId" select="./@id"/> <!-- open your first div, we will only do it this once --> <xsl:if test="position() = first()"> <!-- bit dirty this bit but it will work --> <xsl:text><div></xsl:text> </xsl:if> <!--Up to 5 links and images here--> <xsl:choose> <xsl:when test="position() = last()"> <!-- just close your last div, as this is top of the choose statement none of the others will run so it should be safe to assume we are at the end --> <xsl:text></div></xsl:text> </xsl:when> <xsl:when test="position() mod 5 = 0"> <!-- close our open div --> <xsl:text></div></xsl:text> <!-- open a new one --> <xsl:text><div></xsl:text> </xsl:when> </xsl:choose> </xsl:for-each> </div> </div> <a class="next browse right"></a> </xsl:if>Not checked it though so might need a little bit of work ;)
Let me know if you have any problems or if it works
Hi Webspas (+ Pete & Jonas),
Here's the unified and very XSLT way of doing stuff like this - which is also pretty much exactly how you'd do the much-coveted "group-to-table" problem, without resorting to PHP/ASP-like "cheating" (I'm kidding, of course :-)
<?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:make="urn:schemas-microsoft-com:xslt" xmlns:umbraco.library="urn:umbraco.library" exclude-result-prefixes="umbraco.library make" > <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" /> <xsl:param name="currentPage" /> <xsl:variable name="root" select="$currentPage/ancestor-or-self::root" /> <!-- Size of group --> <xsl:variable name="groupsize" select="5" /> <!-- Grab the data to output --> <xsl:variable name="nodes"> <xsl:copy-of select="$root//*[@id = 1063]//Case" /> <!-- You can do more complex stuff - e.g., pre-sorting the lot, if necessary --> </xsl:variable> <!-- Enable XPath selection in nodes --> <xsl:variable name="data" select="make:node-set($nodes)" /> <xsl:template match="/"> <a class="prev browse left"></a> <div class="scrollable"> <div class="items"> <!-- Apply templates to every Nth document, starting with the first --> <xsl:apply-templates select="$data/*[position() mod $groupsize = 1]" mode="group" /> </div> </div> <a class="next browse right"></a> </xsl:template> <!-- Template to start a group --> <xsl:template match="Case" mode="group"> <div> <!-- Now render this document and the following to a total of N --> <xsl:apply-templates select=". | following-sibling::Case[position() < $groupsize]" mode="item" /> </div> </xsl:template> <!-- Template for a Case --> <xsl:template match="Case" mode="item"> <div> <!-- Get creative... --> <xsl:value-of select="@nodeName" /> </div> </xsl:template> </xsl:stylesheet>/Chriztian
Thank you all for your replies!
Chriztian - you rock with xslt! There is one bug... The output is:
As you can see the link with class "prev browse left" is represented a little too much...
Hi Webspas,
When debugging XSLT output you have to look at the actual output (view-source) and not the DOM generated by the browser (you're seeing this in Firebug/Web Inspector).
I was assuming you were filling the prev/next links with some text too - if you don't, the processor will output self-closing anchors (<a />) - a topic for another day :-)
Try putting some text in the anchors and see what happens (alternately, you can put an epty comment in there - <xsl:comment /> to fix it)
/Chriztian
Of cause... doh!
Well, thank you very much! I don't have the time to test is right now, but I'll let you know how it turns out.
Yeay! It works!
is working on a reply...