471,616 Members | 1,422 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,616 software developers and data experts.

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

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
3 2214

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

Jul 6 '06 #2
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

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.

Similar topics

13 posts views Thread by Stumped and Confused | last post: by
17 posts views Thread by compassSoftware | last post: by
5 posts views Thread by elsenraat_76 | last post: by
8 posts views Thread by Jeff Higgins | last post: by
13 posts views Thread by Jim Langston | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.