Subject: Re: [xsl] Using Javascript in XSL From: Bruce Gagnon <bgagnon@xxxxxxxxxx> Date: Mon, 19 Aug 2002 08:27:09 -0400 |
<xsl:template match="scrnDfn"> <!-- get rules file --> <head> <script language="javascript" src="detect.js"> </script> <script language="javascript" src="error.js"> </script> </head>
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
Current Thread |
---|
|
<- Previous | Index | Next -> |
---|---|---|
[xsl] Using Javascript in XSL, Brian Hickey | Thread | [xsl] xsl help!!!, Srinivas Ch |
Re: [xsl] Can you send a parameter , "Braumüller, Hans" | Date | Re: [xsl] Can you send a parameter , Bruce Gagnon |
Month |