This is the mail archive of the xsl-list@mulberrytech.com mailing list .


Index Nav: [Date Index] [Subject Index] [Author Index] [Thread Index]
Message Nav: [Date Prev] [Date Next] [Thread Prev] [Thread Next]
Other format: [Raw text]

Re: Using Javascript in XSL


Brian,

Here is how I do it. hope this helps

<xsl:template match="scrnDfn">
   <!-- get rules file -->
   <head>
     <script language="javascript" src="detect.js">
     </script>
     <script language="javascript" src="error.js">
     </script>
   </head>


Brian Hickey wrote:

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



XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list


Index Nav: [Date Index] [Subject Index] [Author Index] [Thread Index]
Message Nav: [Date Prev] [Date Next] [Thread Prev] [Thread Next]