The xslt nippet that I’m about to show you, can be made in many ways, and I will just show you one of them, that I personally prefer. I like to make things as dynamic as possible and with few hard-coded-static options as possible, in case I wanna to use the same code somewhere else.

If you ask me then, the best way to show a random paragraph on a website is only to output that single paragraph. That way you won’t need to hide ekes. 100 paragraphs and then only show one of them, using some sort of JavaScripts or CSS3. So I’ll show you how you can display a random paragraph without outputting all your paragraphs to your page.

XML

Before we can start writing our XSLT snippet we’ll need to know how our XML output looks like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<Template>
<ParagraphHeader></ParagraphHeader>
<ParagraphText></ParagraphText>
<TemplateMedia1></TemplateMedia1>
<TemplateMedia1Clean></TemplateMedia1Clean>
<TemplateLink1></TemplateLink1>
<TemplateMedia2></TemplateMedia2>
<TemplateMedia2Clean></TemplateMedia2Clean>
<TemplateLink2></TemplateLink2>
<TemplateMedia3></TemplateMedia3>
<TemplateMedia3Clean></TemplateMedia3Clean>
<TemplateLink3></TemplateLink3>
<TemplateMedia4></TemplateMedia4>
<TemplateMedia4Clean></TemplateMedia4Clean>
<TemplateLink4></TemplateLink4>
<TemplateMedia5></TemplateMedia5>
<TemplateMedia5Clean></TemplateMedia5Clean>
<TemplateLink5></TemplateLink5>
<TemplateParagraphHeader1></TemplateParagraphHeader1>
<TemplateParagraph1></TemplateParagraphColumn1>
<TemplateParagraphHeader2></TemplateParagraphHeader2>
<TemplateParagraph2></TemplateParagraph2>
</Template>

As you can see it is one messy XML dump, and honestly I don’t understand why it is like that, but if you want, then you can read about my thought on this issue in another blog post that I wrote “Dynamicweb’s XML for ParagraphSetup and how I would change it”

So our paragraph templates are hidden in between all kind of ParagraphSetup nodes, and since they don’t have same node name we’ll have to make a dynamic selection that is only selecting nodes with a node name that contains word “TemplateParagraph”. But if we just do that, we’ll have a problem since it will also select following node: “TemplateParagraphHeader” meaning we’ll have to make a dynamic check for that as well.

XSLT template

The way I did this was to select all nodes that contains word “TemplateParagraph” and have a number right after “TemplateParagraph”, meaning everything that contains word “TemplateParagraph” but doesn’t follow up with a number won’t be selected. Now lets have a look at some XSLT.

1
2
3
4
5

<xsl:template match="*">
<xsl:apply-templates select="child::*">
<xsl:sort select="string(number(substring-after(name(),'TemplateParagraph'))) != 'NaN'" data-type="number" order="descending"/>
</xsl:apply-templates>
</xsl:template>

So we match all nodes and then apply a templates with all child nodes. As you can see I’m also sending a <xsl:sort> that will gives us the right positions of our nodes further down. If we don’t send the <xsl:sort> then our nodes won’t come in the right order and our position() call will have some gabs, showing node position like : 1,12,20,21,22,25… After applying a template call we’ll have to create a template that will filter our nodes.

1
2
3
4
5
6
7

<xsl:template match="*/*
[descendant-or-self::*
[contains(name(),'TemplateParagraph')]
[string(number(substring-after(name(),'TemplateParagraph'))) != 'NaN']
]">
<em> <!--  Layout  --></em>
</xsl:template>

Now lets have a look at this selection. We are selecting a descendant nodes that contains “TemplateParagraph”. Then we use substring-after to select all characters after “TemplateParagraph” and check if that is a number. If our node have a node name that contains “TemplateParagraph” and follows up with a number, then we will have a hit. So far our XSLT snippet is dynamic and it doesn’t matter how many paragraphs we have under our ParagraphSetup. What we now need is some kind of function that can provide us a random number, which we can use to select a node based on its position.

Random number

To create a random number, I will be using JavaScript namespace in our XSLT document. So we’ll first need to apply the namespace to our document by adding the call in to our XSLT <xsl:stylesheet> definition.

1
2
3
4

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:random="http://www.microsoft.com/msxsl"
exclude-result-prefixes="msxml random">

Now that we have access to our namespace we’ll be able to create our function.

1
2
3
4
5
6
7

<msxml:script implements-prefix="random">
function range(min, max)
{
var dist = max - min + 1;
return Math.floor(Math.random() * dist + min);
}
</msxml:script>

This function can now be used in our xslt templates,simply by calling it like this: select=”random:range(1, 10)”, and you will get a random number from 1 to 10.  But I want to make this call dynamic so that I don’t have to edit my XSLT snippet each and every time I add or delete a paragraph on my page. To make my total number of paragraphs dynamic I’ll simply count how many nodes I have in my XML by using count() in XSLT.

Counting all nodes

1
2
3
4
5

count(*/*
[descendant-or-self::*
[contains(name(),'TemplateParagraph')]
[string(number(substring-after(name(),'TemplateParagraph'))) != 'NaN']
])

As you can see my counter selection is the same one as I used for my template match. Now all I need is to save this counter as a variable and to create another variable that will provide med a random number based on my count().

1
2
3

<xsl:variable name="countParagraphs" select="count(*/*[descendant-or-self::*[contains(name(),'TemplateParagraph')][string(number(substring-after(name(),'TemplateParagraph'))) != 'NaN']])" />
 
<xsl:variable name="randomNumber" select="random:range(1, $countParagraphs - 1)" />

Final wrap

Now lets just wrap this up into a nice xslt snippet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:random="http://www.microsoft.com/msxsl"
exclude-result-prefixes="msxml random">
<xsl:output method="xml" omit-xml-declaration="yes" indent="yes"  encoding="utf-8" />
 
<msxml:script implements-prefix="random">
function range(min, max)
{
var dist = max - min + 1;
return Math.floor(Math.random() * dist + min);
}
</msxml:script>
 
<xsl:variable name="countParagraphs" select="count(*/*[descendant-or-self::*[contains(name(),'TemplateParagraph')][string(number(substring-after(name(),'TemplateParagraph'))) != 'NaN']])" />
<xsl:variable name="randomNumber" select="random:range(1, $countParagraphs - 1)" />
 
<xsl:template match="*">
<xsl:apply-templates select="child::*">
<xsl:sort select="string(number(substring-after(name(),'TemplateParagraph'))) != 'NaN'" data-type="number" order="descending"/>
</xsl:apply-templates>
</xsl:template>
 
<xsl:template match="*/*[descendant-or-self::*[contains(name(),'TemplateParagraph')][string(number(substring-after(name(),'TemplateParagraph'))) != 'NaN']]">
<xsl:if test="position() = $randomNumber">
<xsl:value-of select="." disable-output-escaping="yes" />
</xsl:if>
</xsl:template>
</xsl:stylesheet>

By doing it this way, you will be able to use this XSLT snippet for all your web-solutions without changing XSLT.

You can download this XSLT snippet here.

Now this was my way of doing this. If you have somme suggestions or improvements, then feel free to contact me through this comment form or find me on twitter :)

XML

Lets have a look at the XML dump, that Dynamicweb provides us for developing XSLT snippets.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<Template>
<ParagraphHeader></ParagraphHeader>
<ParagraphText></ParagraphText>
<TemplateMedia1></TemplateMedia1>
<TemplateMedia1Clean></TemplateMedia1Clean>
<TemplateLink1></TemplateLink1>
<TemplateMedia2></TemplateMedia2>
<TemplateMedia2Clean></TemplateMedia2Clean>
<TemplateLink2></TemplateLink2>
<TemplateMedia3></TemplateMedia3>
<TemplateMedia3Clean></TemplateMedia3Clean>
<TemplateLink3></TemplateLink3>
<TemplateMedia4></TemplateMedia4>
<TemplateMedia4Clean></TemplateMedia4Clean>
<TemplateLink4></TemplateLink4>
<TemplateMedia5></TemplateMedia5>
<TemplateMedia5Clean></TemplateMedia5Clean>
<TemplateLink5></TemplateLink5>
<TemplateParagraphHeader1></TemplateParagraphHeader1>
<TemplateParagraph1></TemplateParagraph1>
<TemplateParagraphColumn1></TemplateParagraphColumn1>
<TemplateParagraphHeader2></TemplateParagraphHeader2>
<TemplateParagraph2></TemplateParagraph2>
<TemplateParagraphHeader3></TemplateParagraphHeader3>
<TemplateParagraph3></TemplateParagraph3>
<TemplateParagraphHeader4></TemplateParagraphHeader4>
<TemplateParagraph4></TemplateParagraph4>
<Server.Request.id>540</Server.Request.id>
<Server.Request.purge>True</Server.Request.purge>
<GlobalTags></GlobalTags>
</Template>

The part that I’m going to focus on is the way Dynamicweb is looping paragraphs that are part of ParagraphSetup. I find it inappropriate to loop nodes with same type of content and give them unique name. That makes it harder for developers to make XPath selection that loops same type of nodes.  If you ask me how I’ll make this XML dump, my answer will be like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<Template>
<ParagraphHeader></ParagraphHeader>
<ParagraphText></ParagraphText>
 
<TemplateMedia name=”TemplateMedia1”>
<TemplateMediaHtml></TemplateMediaHtml>
<TemplateMediaClean></TemplateMediaClean>
<TemplateLink></TemplateLink>
</TemplateMedia>
<TemplateMedia name=”TemplateMedia2”>
<TemplateMediaHtml></TemplateMediaHtml>
<TemplateMediaClean></TemplateMediaClean>
<TemplateLink></TemplateLink>
</TemplateMedia>
 
<TemplateParagraph name=”TemplateParagraph1”>
<TemplateParagraphHeader></TemplateParagraphHeader>
<TemplateParagraphContent></TemplateParagraphContent>
</TemplateParagraph>
<TemplateParagraph name=”TemplateParagraph2”>
<TemplateParagraphHeader></TemplateParagraphHeader>
<TemplateParagraphContent></TemplateParagraphContent>
</TemplateParagraph>
 
</Template>

As you can see all I did was just to groupe my nodes and gave them names by attribute. This way we can easy make a XPath selections that loops all Paragraphs by simply making a template match=”TemplateParagraph” and then output our templates without the need to know how many we have or what number they are. And if we want to only select a specific TemplateParagrah node, well then we can just call our match like this: match=”TemplateParagraph[@name='TemplateParagraph1']” . The same goes for the media nodes.

Conclusion

By making the XML output the way as I suggested, I believe that it will give us developers more dynamic and flexibility to our XSLT snippet, and our XSLT snippes would be easy to rewrite and use for other solutions aswell, since we won’t need to know, how many paragraphs user have posted to be able to name our nodes correct and get access to our content.  I also believe that this is just one of many ways in how Dynamicweb could “optimize” there XML output, that will make Dynamicweb xslt snippets even more dynamic.

But all this will be a hard fix for Dynamicweb to make, since it will have major impact in all online Dynamicweb solutions that are using this XML output and XSLT snippets to create templates with. So if there should be another way in how to fix the current XML output then it might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<Template>
<ParagraphHeader></ParagraphHeader>
<ParagraphText></ParagraphText>
 
<TemplateMedia1 type=”MediaHtml”></TemplateMedia1>
<TemplateMedia1Clean type=”MediaClean”></TemplateMedia1Clean>
<TemplateLink1 type=”MediaLink”></TemplateLink1>
<TemplateMedia2 type=”MediaHtml”></TemplateMedia2>
<TemplateMedia2Clean type=”MediaClean”></TemplateMedia2Clean>
<TemplateLink2 type=”MediaLink”></TemplateLink2>
 
<TemplateParagraphHeader1 type=”TemplateParagraphHeader”></TemplateParagraphHeader1>
<TemplateParagraph1 type=”TemplateParagraphContent”></TemplateParagraph1>
<TemplateParagraphHeader2 type=”TemplateParagraphHeader”></TemplateParagraphHeader2>
<TemplateParagraph2 type=”TemplateParagraphContent”></TemplateParagraph2>
 
</Template>

Again it will be best if he had some kind of clean loop option. This example might be a good solution for Dynamicweb since it won’t change the XML structure but just add attributes to it, meaning websites that are online/live won’t fail because of the change in XML output. And developers will be able to make easy and dynamic loops, simply by using the attribute name to groupe nodes.

What do you think about all this? Do you have a better way or is the current Dynamicweb XML output perfect?

So here is the list of albums that I bought in January 2010

1. I Got You On Tape – I Got You On Tape
2. Spinning for the Cause – I Got You On Tape
3. 2 – I Got You On Tape
4. This Is for the White In Your Eyes – Choir of Young Believers
5. Trespassers – Kashmir ( Actualy I didn’t buy this one, but I got it from Kashmir with there signatures )
6. Ghost of a Chance – Turboweekend
7. Night Shift – Turnoweekend
8. The Life and Death of a Male Body – The Rumour Said Fire

Well that was all for this time. Let me know what you thing about all this great music by leaving a comment or a msg on Twitter ( @Saucerdk)

I did some minor bug fix here and there, so there is not much to say. I’m still looking for some feedback about this plugin so that I can try to make it better or even add some more functions.

Click here to get the latest version of Form Highlighter

If you want to be sure that you always get the latest updates about this plugin, then please follow me on twitter (@Saucerdk)

What is FormHighlighter ?
jQuery Plugin to attach focus,blur and keydown effect on your form fields.

Before I run away I’ll like to thank everyone for feedback and “@UsejQuery” from Twitter for spreading the word about this plugin.

If you want to be sure that you always get the latest updates about this plugin, then please follow me on twitter (@Saucerdk)

As you can se I’v also updated the design template since I was realy tired and bored with the last one I had, and thanks to WordPress it took me 23sec to make that change, nice!

Please let me know what you think about FormHeighlighter and what you think would make the plug-in even better. Thanks!

Enjoy making cool websites and let me know if I can improve my plug-in with your ideas.

I’v maid some small improvements + added a needed function that placed the “pointer” at the beginig of the field.

So much for this time. Take care and enjoy the show…

Layout

Lets say that you wanna make a simple website with 2 columns. One for yur navigation and the other for the content area.

1
2
3
4

<div id="master">
<div id="navigation"></div>
<div id="content"></div>
</div>

CSS

Lets just make up something quick, after all it is just a demo :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#master {
width:500px;
height:600px;
border:2px solid #000000;
}
#navigation {
float:left;
width:200px;
height:600px;
border-right:1px solid #000000;
background-color:#eeeeee;
}
#content{
float:left;
width:300px;
height:600px;
}

So, what we have here is basicly a very simple setup, where our columns have 600px heigh.
The height is static and if we make our #content heigher or lower then our #navigation then
our #navigation won’t be effected, since it’s height is not dynamic and our <div>’s arnt linked
together. Now this is the place where some webdevelopers start to use all kind of tricks with
JavaScripts, but there is a very simple and easy way of making this just by using CSS as we know it.

CSS step 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#master {
width:500px;
min-height:600px;
border:2px solid #000000;
overflow:hidden;
}
 
#navigation {
float:left;
width:200px;
min-height:600px;
border-right:1px solid #000000;
background-color:#eeeeee;
margin-botttom:-32000px;
padding-bottom:32000px;
}
 
#content{
float:left;
width:300px;
min-height:600px;
margin-botttom:-32000px;
padding-bottom:32000px;
}

Explanation

As you can see the code is very simple and what we basicly did was just to make the #master with overflow:hidden and maid our heights dynamic by using min-height + our two columns have a small trick with margin and padding, that makes a 32000px height “buffer” wich is hidden by the overflow:hidden on our #master. Now the reason why our #master now is dynamic is because we havent sat a static height on it. So eachtime our colums get longer the overflow will show more and more of our 32000px buffer.

At the end I wanna wish you all happy coding!