By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,946 Members | 697 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,946 IT Pros & Developers. It's quick & easy.

Using javascript to capture the output of an anchor to alter a variable

P: n/a
I am programming an interactive CV using xml, xslt and java script. The

page consists of a header which contains links to various 'sections' on

the xml cv, a left and right menu, and a central panel. The central
panel is intended to display the main content of the cv: when an anchor

is selected from the header then the detail is supposed to appear. The
javascript is supposed to select the appropriate section 'onclick' and
output it. This is done in template 'teevee'. XSLT:

<?xml version="1.0" encoding="ISO8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes" />
<xsl:preserve-space elements="*" />
<xsl:template match="cv">
<html>
<head>
<title>
<xsl:text>CV: </xsl:text>
<xsl:value-of select="section[1]/personalName"/>
</title>
</head>
<body>
<table>
<tr>
<td width="100%" colspan="3">
<xsl:call-template name="top"/>
</td>
</tr>
<tr>
<td width="20%" class="borderbox" title="borderbox"
id="left">
<xsl:call-template name="address"/>
</td>
<td width="60%" class="main" title="main" id="centre">
<xsl:call-template name="teevee"/>
</td>
<td width="20%" class="borderbox" title="borderbox"
id="right">
<xsl:call-template name="portfolio"/>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template name="top">
<xsl:for-each select="section">
<span title="{name/@desc}" class="button">
<a name="controller" id="{@id}">
<xsl:value-of select="child::name"/>
</a>
</span>
<xsl:if test="not(position()=last())">
<xsl:text| </xsl:text>
</xsl:if>
</xsl:for-each>
<h1 title="{section[1]/personalName}"
class="{name(section[1]/personalName)}">
<xsl:value-of select="section[1]/personalName"/></h1>
<span title="{name(section[1]/objective)}"
class="{name(section[1]/objective)}"><xsl:value-of
select="section[1]/objective"/></span>
<hr/></xsl:template>
<xsl:template name="address">
<h2 title="{section[2]/name/@desc}"
class="{name(section[2]/name)}">
<xsl:value-of select="section[2]/name"/>
</h2>
<span title="{name(section[2]/name/@desc)}"
class="{name(section[2]/name)}">
<xsl:text>Address: </xsl:text>
<p title="{name(section[2]/address/houseName)}">
<xsl:value-of select="section[2]/address/houseName"/>
</p>
<p title="{name(section[2]/address/address)}">
<xsl:value-of select="section[2]/address/address"/>
</p>
<p title="{name(section[2]/address/town)}">
<xsl:value-of select="section[2]/address/town"/>
</p>
<p title="{name(section[2]/address/postcode)}">
<xsl:value-of select="section[2]/address/postcode"/>
</p>
</span>
<span title="{name(section/telephone)}"
class="{name(section/telephone)}">
<xsl:text>Telephone: </xsl:text>
<p title="{name(section[2]/telephone/land)}">
<xsl:value-of select="section[2]/telephone/land"/>
</p>
<p title="{name(section[2]/telephone/mobile)}">
<xsl:value-of select="section[2]/telephone/mobile"/>
</p>
<p title="{name(section[2]/telephone/work)}">
<xsl:value-of select="section[2]/telephone/work"/>
</p>
</span>
<span title="{name(section[2]/email)}"
class="{name(section[2]/email)}">
<xsl:text>Email: </xsl:text><p
title="{name(section[2]/email)}"
class="{name(section[2]/email)}"><xsl:value-of
select="section[2]/email"/></p>
</span>
</xsl:template>
<xsl:template name="portfolio"><h2
title="section[11]/name/@desc"
class="{name(section[11]/name)}">
<xsl:value-of select="section[11]/name"/>
</h2>
<xsl:for-each select="section[11]/period">
<span title="{name()}" class="{name()}">
<h3 title="{name(periodName)}">
<xsl:value-of select="periodName"/>
</h3>
<p title="{name(date)}" class="{name(date)}">
<xsl:value-of select="date/from"/- <xsl:value-of
select="date/to"/>
</p>
<p title="{name(groups)}" class="{name(groups)}">
<xsl:value-of select="groups"/>
</p>
<p title="{name(project)}" class="{name(project)}">
<xsl:value-of select="project"/>
</p>
</span>
</xsl:for-each>
</xsl:template>
<xsl:template name="teevee">
<xsl:param name="channel" select="3"/>
<xsl:value-of select="section[$channel]"/>
<script type="text/javascript">
document.getElementByName("controller").onClick=do cument.getElementByName("*channel").value=document .write("channel");

</script>
</xsl:template>
</xsl:stylesheet>
I am programming an interactive CV using xml, xslt and java script. The

page consists of a header which contains links to various 'sections' on

the xml cv, a left and right menu, and a central panel. The central
panel is intended to display the main content of the cv: when an anchor

is selected from the header then the detail is supposed to appear. The
javascript is supposed to select the appropriate section 'onclick' and
output it. This is done in template 'teevee'. XSLT:

<?xml version="1.0" encoding="ISO8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes" />
<xsl:preserve-space elements="*" />
<xsl:template match="cv">
<html>
<head>
<title>
<xsl:text>CV: </xsl:text>
<xsl:value-of select="section[1]/personalName"/>
</title>
</head>
<body>
<table>
<tr>
<td width="100%" colspan="3">
<xsl:call-template name="top"/>
</td>
</tr>
<tr>
<td width="20%" class="borderbox" title="borderbox"
id="left">
<xsl:call-template name="address"/>
</td>
<td width="60%" class="main" title="main" id="centre">
<xsl:call-template name="teevee"/>
</td>
<td width="20%" class="borderbox" title="borderbox"
id="right">
<xsl:call-template name="portfolio"/>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template name="top">
<xsl:for-each select="section">
<span title="{name/@desc}" class="button">
<a name="controller" id="{@id}">
<xsl:value-of select="child::name"/>
</a>
</span>
<xsl:if test="not(position()=last())">
<xsl:text| </xsl:text>
</xsl:if>
</xsl:for-each>
<h1 title="{section[1]/personalName}"
class="{name(section[1]/personalName)}">
<xsl:value-of select="section[1]/personalName"/></h1>
<span title="{name(section[1]/objective)}"
class="{name(section[1]/objective)}"><xsl:value-of
select="section[1]/objective"/></span>
<hr/></xsl:template>
<xsl:template name="address">
<h2 title="{section[2]/name/@desc}"
class="{name(section[2]/name)}">
<xsl:value-of select="section[2]/name"/>
</h2>
<span title="{name(section[2]/name/@desc)}"
class="{name(section[2]/name)}">
<xsl:text>Address: </xsl:text>
<p title="{name(section[2]/address/houseName)}">
<xsl:value-of select="section[2]/address/houseName"/>
</p>
<p title="{name(section[2]/address/address)}">
<xsl:value-of select="section[2]/address/address"/>
</p>
<p title="{name(section[2]/address/town)}">
<xsl:value-of select="section[2]/address/town"/>
</p>
<p title="{name(section[2]/address/postcode)}">
<xsl:value-of select="section[2]/address/postcode"/>
</p>
</span>
<span title="{name(section/telephone)}"
class="{name(section/telephone)}">
<xsl:text>Telephone: </xsl:text>
<p title="{name(section[2]/telephone/land)}">
<xsl:value-of select="section[2]/telephone/land"/>
</p>
<p title="{name(section[2]/telephone/mobile)}">
<xsl:value-of select="section[2]/telephone/mobile"/>
</p>
<p title="{name(section[2]/telephone/work)}">
<xsl:value-of select="section[2]/telephone/work"/>
</p>
</span>
<span title="{name(section[2]/email)}"
class="{name(section[2]/email)}">
<xsl:text>Email: </xsl:text><p
title="{name(section[2]/email)}"
class="{name(section[2]/email)}"><xsl:value-of
select="section[2]/email"/></p>
</span>
</xsl:template>
<xsl:template name="portfolio"><h2
title="section[11]/name/@desc"
class="{name(section[11]/name)}">
<xsl:value-of select="section[11]/name"/>
</h2>
<xsl:for-each select="section[11]/period">
<span title="{name()}" class="{name()}">
<h3 title="{name(periodName)}">
<xsl:value-of select="periodName"/>
</h3>
<p title="{name(date)}" class="{name(date)}">
<xsl:value-of select="date/from"/- <xsl:value-of
select="date/to"/>
</p>
<p title="{name(groups)}" class="{name(groups)}">
<xsl:value-of select="groups"/>
</p>
<p title="{name(project)}" class="{name(project)}">
<xsl:value-of select="project"/>
</p>
</span>
</xsl:for-each>
</xsl:template>
<xsl:template name="teevee">
<xsl:param name="channel" select="3"/>
<xsl:value-of select="section[$channel]"/>
<script type="text/javascript">
document.getElementByName("controller").onClick=do cument.getElementByName("*channel").value=document .write("channel");

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

Jul 6 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a

Use prototype.js to capture events...
More information here:
http://wiki.script.aculo.us/scriptac.../Event.observe

Jul 6 '06 #2

P: n/a
mertas said the following on 7/6/2006 3:28 PM:
Use prototype.js to capture events...
Don't. There are better, easier, more reliable ways to do it.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jul 6 '06 #3

P: n/a

Randy Webb wrote:
mertas said the following on 7/6/2006 3:28 PM:
Use prototype.js to capture events...

Don't. There are better, easier, more reliable ways to do it.
Ok... = )
Then try this one:
http://www.quirksmode.org/js/introevents.html

Jul 6 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.