Subject: [xsl] Using Javascript in XSL From: Brian Hickey <brian_hickey1@xxxxxxxxx> Date: Mon, 19 Aug 2002 01:48:35 -0700 (PDT) |
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 -> |
---|---|---|
RE: [xsl] Running msxml (newbie), James Fuller | Thread | Re: [xsl] Using Javascript in XSL, Bruce Gagnon |
RE: [xsl] Running msxml (newbie), James Fuller | Date | RE: [xsl] xsl/xslt coding standard, DPawson |
Month |