Hello
I am having some difficulty using javascript in xsl.
I want to add javascript to the xsl code below that
will add a navigation menu. I downloaded some fairly
simple js code from a site recommended by Jeni,
(thanks Jeni)that does this in a normal html page, but
I need to be able to implement this within my xsl code
as my final output is through a portal channel which
takes xsl.
The js code, also shown below was downloaded from:
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
I have an xsl file as follows:
<?xml version="1.0"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="manifest">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="heading1">
<h3><xsl:value-of select="."/></h3>
</xsl:template>
<xsl:template match="heading2">
<xsl:choose>
<xsl:when test = "title/@resource">
<a href="{title/@resource}">
<xsl:attribute name="target">blank</xsl:attribute>
<xsl:attribute
name="style">text-decoration:none</xsl:attribute>
<font size="3.0" color="#228800">
<xsl:value-of select="title"/><br/></font>
</a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="title"/><br/>
</xsl:otherwise>
</xsl:choose>
<xsl:apply-templates select="heading3"/>
<xsl:apply-templates select="sub"/>
</xsl:template>
<xsl:template match="heading3">
<xsl:choose>
<xsl:when test = "title/@resource">
<a href="{title/@resource}">
<xsl:attribute name="target">blank</xsl:attribute>
<xsl:attribute
name="style">text-decoration:none</xsl:attribute>
<font size="3.0" color="#228800">
<xsl:value-of select="title"/></font>
</a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="title"/><br/>
</xsl:otherwise>
</xsl:choose>
<xsl:apply-templates select="heading4"/>
<xsl:apply-templates select="sub"/>
</xsl:template>
<xsl:template match="heading4">
<xsl:value-of select="."/>
<xsl:apply-templates select="sub"/>
</xsl:template>
<xsl:template match="sub">
<ul><li><a href="{@resource}">
<xsl:attribute name="target">blank</xsl:attribute>
<xsl:attribute
name="style">text-decoration:none</xsl:attribute>
<font size="2.3" color="#228800">
<xsl:value-of select="."/></font>
</a></li></ul>
</xsl:template>
</xsl:stylesheet>
JS code to include in <head> section:
<style>
<!--
#foldheader{cursor:pointer;cursor:hand ;
font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
var ns6=document.getElementById&&!document.all
var
ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>
JS code to include in <body> section showing sample
links:
<font face="Verdana">
<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none"
style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC
News</a></li>
<li><a href="http://www.news.bbc.co.uk">BBC
News</a></li>
</ul>
<li id="foldheader">Webmaster</li>
<ul id="foldinglist" style="display:none"
style=&{head};>
<li><a
href="http://www.dynamicdrive.com">Dynamic
Drive</a></li>
<li><a
href="http://www.javascriptkit.com">JavaScript
Kit</a></li>
<li><a
href="http://www.freewarejava.com">Freewarejava.com</a></li>
</ul>
<li id="foldheader">Nested Example</li>
<ul id="foldinglist" style="display:none"
style=&{head};>
<li><a href="http://www.dynamicdrive.com">outer
1</a></li>
<li><a href="http://www.dynamicdrive.com">outer
2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none"
style=&{head};>
<li><a
href="http://www.dynamicdrive.com">nested 1</a></li>
<li><a
href="http://www.dynamicdrive.com">nested 2</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com">outer
3</a></li>
<li><a href="http://www.dynamicdrive.com">outer
4</a></li>
</ul>
</ul>
</font>
<p align="center"><font face="Arial" size="-2">Free
DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic
Drive</a></font></p>
I've tried inserting the head section within the
<xsl:template match ="/"> element, and it runs ok
without any errors (even though I thought I would have
to include it in a CDATA section). However, I am
having trouble with integrating the remainding code
which assigns the various resources to the menu
navigation links.
If there is somebody who has experience with this I
would appreciate some help or advice.
Brian
__________________________________________________
Do You Yahoo!?
HotJobs - Search Thousands of New Jobs
http://www.hotjobs.com
XSL-List info and archive: http://www.mulberrytech.com/xsl/xsl-list
Cart
