Our Forum has Moved

This site is our old forum and is only here for achive until we get proper 301 redirects setup to make Google happy.

Please use our new community site - Our Umbraco - which contains an improved forum, documentation wiki, package repository and a member locator.

Go to Our Umbraco now

Learn everything about Umbraco
How to write javascript functions in xslt file Options
rajeshgut
Posted: Wednesday, May 06, 2009 12:07:43 PM
Rank: Enthusiast

Joined: 5/4/2009
Posts: 29

Hi all,

Iam developing a site in umbraco which has some javascript functions like
mouseup() and mousedown() in my master template. how can i use these functions
for mouse actions in my site. iam osting my master template.pls tel me what i have to do with that.

Master template:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Welcome To Vizag Zoo
</title>

<link href="Style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

</head>
<body>
<form name="aspnetForm" method="post" action="index.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkx3pPGh+pOl+Rb8volSi4WWbNFA4=" />
</div>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%" align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="left"
style="height: 166px" frame="box">
<tr>
<td align="left" valign="top" colspan="0" rowspan="0">
<a href="AboutUs.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/But_roll_04.png',1)"><img src="images/Buttons_04.png" name="Image17" width="180" height="27" border="0" id="Image17" /></a></td>
</tr>
<tr>
<td align="left" valign="top" colspan="0" rowspan="0">
</a><a href="Gallery.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','images/But_roll_08.png',1)"><img src="images/Buttons_08.png" name="Image18" width="180" height="28" border="0" id="Image18" /></a></td>
</tr>

...................
...................
</table>
</td>
<td width="29%" align="left" valign="top">

...................
................
....................
</form>
</body>
</html>


In above template the function MM_swapImgRestore() is used in 'onmouseout' and
MM_swapImage('Image18','','images/But_roll_08.png',1) is used in 'onmouseover' . How can i use
these functions for my site i.e., shall i create any xslt file if so how can i write code for creating above functions and use them. plsease explain me the procedure.



vissu
Posted: Wednesday, May 06, 2009 12:35:44 PM
Rank: Enthusiast

Joined: 4/25/2009
Posts: 30
Location: Bangalore
Hi Rajesh,


This nagendra form AP(vizag).

i have problem with Multilanguage implementation In My site(Umbraco).

can please help regarding above issue?

This is My mail id vissu.net@gmail.com


cheers ,

nagendra.

Dirk
Posted: Wednesday, May 06, 2009 12:38:21 PM

Rank: Umbracoholic

Joined: 9/27/2007
Posts: 1,874
Location: Belgium
Hi,

Don't make it too complex mate..
Just add those js functions to the master template, so it'll be available from any page.

If the menu (with all the a tags) is to created dynamically, use some xslt to build that and include the js functions as you're using it now.

Xslt snippet:

Code:
<xsl:for-each select="umbraco.library:GetXmlNodeById($topNode)/node">
  <a href="{umbraco.library:NiceUrl(@id)} onmouseout="MM_swapImgRestore()" ...>
    <img...>
  </a>
</xsl:for-each>


(It's quite simplified and assumes $topNode is id of top level node in the content tree structure)

Does that help?

Cheers,
/Dirk




level 1 & 2 certified - umbraco MVP 2008/2009 - umbraco blog at netaddicts.be - working on an integrated forum4umbraco
rajeshgut
Posted: Wednesday, May 06, 2009 2:03:11 PM
Rank: Enthusiast

Joined: 5/4/2009
Posts: 29
Hi,

Thanks for reply, please tel me how to include js functions (syntax to include)into the xslt file and how to write code to use those js functions in xslt. pls don't mind, iwrite the xslt file like the following but it shows errors, pls check my code & tel me wats wrong & i hav to do next:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<script language="JavaScript" implements-prefix="math">
<![CDATA[
function MM_swapImgRestore()
{
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages()
{
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d)
{
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage()
{
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}]]>

</script>

<xsl:template match="/">

<xsl:variable name="topNode" select="$currentPage/node"/>

<xsl:for-each select="umbraco.library:GetXmlNodeById($topNode)/node">
<a href="{umbraco.library:NiceUrl(@id)} onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/But_roll_04.png',1)"">
</a>
</xsl:for-each>

</xsl:template>
</xsl:stylesheet>

i need those functions should run on all the images in my site, i.e., i have to give images dynamically with out
hard code the image name in xslt file how to do that. please tel me iam newbie to umbraco..

ddrayne
Posted: Wednesday, May 06, 2009 3:07:50 PM

Rank: Aficionado

Joined: 7/28/2008
Posts: 159
Location: Edinburgh
Hi Rajeshgut.

If you look at the xslt I posted in your thread at http://forum.umbraco.org/yaf_postst9532_How-to-display-flash-in-the-site-through-umbraco.aspx, you'll see how to include JS in your xslt (basically a healthy dose of CDATA).

Snippet
Code:

<script type="text/javascript">
<![CDATA[
var path = "]]><xsl:value-of select="$videopath" /><![CDATA[";
var videowidth = "]]><xsl:value-of select="$videowidth" /><![CDATA[";
var videoheight = "]]><xsl:value-of select="$videoheight" /><![CDATA[";
var s1 = new SWFObject(path,"Pindar SWF",videowidth,videoheight,"9","#FFFFFF");
s1.addParam("allowfullscreen","true");
s1.addParam("allowscriptaccess","always");
s1.addParam("wmode","transparent");
s1.write("container");
]]>
</script>


Gecko New Media - twitter.com/allbutlost
rajeshgut
Posted: Thursday, May 07, 2009 6:43:19 AM
Rank: Enthusiast

Joined: 5/4/2009
Posts: 29
Hi,

I tried it like this it shows errors what was the problem, Did <![CDATA should used for every function?
i used it as follows, is it right?

It shows error on this line :

<a href="{umbraco.library:NiceUrl(@id)} onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage
('Image17','','images/But_roll_04.png',1)"">


where is the problem? the error it shows is

[ System.Xml.XmlException: 'MM_swapImgRestore' is an unexpected token. Expecting white space. Line 51, position 53
............
............. ]


XSLT code:
=============

..........
............
<xsl:param name="currentPage"/>

<script type="text/javascript">
<![CDATA[
function MM_swapImgRestore()
{
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d)
{
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage()
{
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}]]>

</script>

<xsl:template match="/">

<xsl:variable name="topNode" select="$currentPage/node"/>

<xsl:for-each select="umbraco.library:GetXmlNodeById($topNode)/node">
<a href="{umbraco.library:NiceUrl(@id)} onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/But_roll_04.png',1)"">
</a>
</xsl:for-each>

</xsl:template>
</xsl:stylesheet>


Dirk
Posted: Thursday, May 07, 2009 8:45:45 AM

Rank: Umbracoholic

Joined: 9/27/2007
Posts: 1,874
Location: Belgium
Hi,

<a href="{umbraco.library:NiceUrl(@id)} onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage
('Image17','','images/But_roll_04.png',1)"">

is missing a " char to close the href attribute. Could that be your problem?

Cheers,
/Dirk

level 1 & 2 certified - umbraco MVP 2008/2009 - umbraco blog at netaddicts.be - working on an integrated forum4umbraco
sjorsp
Posted: Thursday, May 07, 2009 8:57:26 AM

Rank: Newbie

Joined: 12/12/2007
Posts: 4
Location: Amsterdam
I would also advise you to use a good XSLT editor with validation, it makes life much easier since it directly gives you advice about errors in your code, i normally use Visual Studio, which works nice.
rajeshgut
Posted: Thursday, May 07, 2009 9:11:29 AM
Rank: Enthusiast

Joined: 5/4/2009
Posts: 29
Hi Dirk,

Ya ur solution solves my problem.Thanks, whether i have to include any attribute in <script> tag? because it

shows error like this :

System.Xml.Xsl.XslLoadException: Top-level element 'script' may not have a null namespace URI. An error occurred at D:\umbracoSource\umbraco\presentation\xslt\633772966144062500_temp.xslt(15,1).
.........
..........

what i have to do to resolve it. i just write the script as follows

<script type="text/javascript">
<![CDATA[
function MM_swapImgRestore()
{
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage()
{
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}]]>

</script>




ddrayne
Posted: Thursday, May 07, 2009 10:17:31 AM

Rank: Aficionado

Joined: 7/28/2008
Posts: 159
Location: Edinburgh
Dont put the script at the top level of the xslt file and you should be ok, but hows about just using css instead of js rollovers?

Code:

<a href="{umbraco.library:NiceUrl(@id)}" class="swapimage" />

a.swapimage {
background: url(yourimage.jpg) left top no-repeat;
}

a:hover.swapimage {
background: url(yourimage_over.jpg) left top no-repeat;
}



Etc.

Gecko New Media - twitter.com/allbutlost
rajeshgut
Posted: Thursday, May 07, 2009 11:14:01 AM
Rank: Enthusiast

Joined: 5/4/2009
Posts: 29
Hi,

sorry i can't understand your words "Dont put the script at the top level of the xslt file "
where i hav to cal this <script> tag ? shall i write that script tag in between <xsl:template> & </xsl:tamplate> ?



ddrayne
Posted: Thursday, May 07, 2009 12:29:15 PM

Rank: Aficionado

Joined: 7/28/2008
Posts: 159
Location: Edinburgh
That should do it, yeh. Good luck!

Gecko New Media - twitter.com/allbutlost
prec_tommy
Posted: Thursday, May 07, 2009 9:50:30 PM
Rank: Enthusiast

Joined: 2/11/2009
Posts: 41
Location: Upminster, Essex
why not do what ddrayne said and just use CSS - far better and more accessible

The forum has moved

This forum is no longer in use, so you can't reply to this message - please go to Our Umbraco

Users browsing this topic
Guest


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.