|
|
 next
|
  Subject: Calling javascript in xslt without user interaction
Author: Brad Cahillane
Date: 03 Nov 2006 11:09 AM
Originally Posted: 03 Nov 2006 11:07 AM
|
I'm a total xslt newbie looking for what, I'm sure, is not a difficult answer.
I am processing an rss feed and displaying it on a page. I am trying to massage an xslt file to have it display the way I need it. The way the code is currently written, the title of the rss feed is displayed on the page, and the user needs to click on a "+" next to the title of the feed to display its contents. I am trying to have it so that the contents are displayed automatically without the user having to hit the expand button to view the details.
So currently the page looks like this
Yahoo! Weather - Jacksonville, FL
+ Conditions for Jacksonville, FL at 9:53 am EST
When the user clicks on the +, the details of the feed are displayed below it (the topic is expanded).
I would like it to look like this without the user having to click the +:
Yahoo! Weather - Jacksonville, FL
- Conditions for Jacksonville, FL at 9:53 am EST
Current Conditions:
Mostly Cloudy/Windy, 65 F
Forecast:
Fri - Partly Cloudy/Wind. High: 65 Low: 43
Sat - Mostly Sunny. High: 67 Low: 48
Full Forecast at Yahoo! Weather
(provided by The Weather Channel)
Here is the code. I've omitted an irrelevant portion that diplays the various templates that are determined by the content of the feed:
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rss="http://purl.org/rss/1.0/" xmlns:rdf09="http://my.netscape.com/rdf/simple/0.9/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<xsl:output method="html" indent="yes" />
<xsl:template name="includeScript">
<style type="text/css">
<![CDATA[
.Header
{
background-color: #f1f1f1;
}
.Header a, .Header a:active, .Header a:visited, .Header a:hover
{
color: black;
text-decoration: none;
}
.HeaderCollapse
{
background-color: #f1f1f1;
font-weight: bold;
padding-left: 0.2em;
width: 17px;
}
.HeaderCollapse a, .HeaderCollapse a:visited, .HeaderCollapse a:active, .HeaderCollapse a:hover
{
background-color: white;
border: 1px #707070 solid;
color: black;
display: block;
font-family: Tahoma, Verdana, Sans-Serif;
font-size: 8px;
height: 10px;
text-decoration: none;
width: 10px;
}
.Content
{
margin-top: -16px;
}
]]>
</style>
<script language="JavaScript" type="text/javascript">
<![CDATA[
function ExpGroup(szID, oElement)
{
var oID = document.getElementById(szID);
if (oElement.innerHTML == "-")
{
oElement.innerHTML = "+";
oElement.title= "Expand";
oID.style.display = "none";
}
else
{
oElement.innerHTML = "-";
oElement.title= "Collapse";
oID.style.display = "block";
}
try
{
window.event.returnValue = false;
window.event.cancelBubble = true;
}
catch (e) { }
}
]]>
</script>
</xsl:template>
<xsl:template match="rdf:RDF">
<xsl:variable name="IsEmptyRSS" select="not (rss:channel/rss:title)" />
<xsl:variable name="IsEmptyRDF" select="not (rdf09:channel/rdf09:title)" />
<xsl:choose>
<xsl:when test="not ($IsEmptyRDF)">
<xsl:call-template name="rdf_09" />
</xsl:when>
<xsl:when test="not ($IsEmptyRSS)">
<xsl:call-template name="rss_1" />
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="rss_1" />
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template match="rss">
<xsl:choose>
<xsl:when test="@version = '2.0'">
<xsl:call-template name="rss_2" />
</xsl:when>
<xsl:when test="@version = '0.91'">
<xsl:call-template name="rss_091" />
</xsl:when>
<xsl:when test="@version = '0.92'">
<xsl:call-template name="rss_092" />
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="rss" />
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="rss_2">
<xsl:call-template name="includeScript" />
<div align="center">
<h3>
<a target="_blank">
<xsl:attribute name="title">
<xsl:value-of select="channel/description" />
</xsl:attribute>
<xsl:attribute name="href">
<xsl:value-of select="channel/link" />
</xsl:attribute>
<xsl:value-of select="channel/title" />
</a>
</h3>
</div>
<div style="padding-left: 5px; padding-right: 5px; padding-bottom: 5px;">
<table class="Content" cellspacing="0" cellpadding="1">
<xsl:for-each select="channel/item">
<xsl:variable name="TopicID" select="generate-id(link)" />
<tr>
<td class="HeaderCollapse" align="center">
<a style="cursor: pointer; cursor: hand;" title="Expand">
<xsl:attribute name="onclick__">
javascript:ExpGroup('<xsl:value-of select="$TopicID" />', this)
</xsl:attribute>
+
</a>
</td>
<td class="Header" style="width: 100%">
<a target="_blank">
<xsl:choose>
<xsl:when test="guid != ''">
<xsl:attribute name="href">
<xsl:value-of select="guid" />
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="href">
<xsl:value-of select="link" />
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="title != ''">
<xsl:value-of select="title" />
</xsl:when>
<xsl:when test="guid != ''">
<xsl:value-of select="guid" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="link" />
</xsl:otherwise>
</xsl:choose>
</a>
</td>
</tr>
<tr>
<td colspan="2">
<div style="display: none; padding-top: 0.25em; padding-bottom: 0.25em; padding-left: 10px; padding-right: 10px;">
<xsl:attribute name="id">
<xsl:value-of select="$TopicID" />
</xsl:attribute>
<xsl:variable name="IsEmpty" select="not (description)" />
<xsl:choose>
<xsl:when test="description = ''">
<xsl:text disable-output-escaping="yes">No description available</xsl:text>
</xsl:when>
<xsl:when test="not ($IsEmpty)">
<xsl:value-of disable-output-escaping="yes" select="description" />
</xsl:when>
<xsl:otherwise>
<xsl:text disable-output-escaping="yes">No description available</xsl:text>
</xsl:otherwise>
</xsl:choose>
</div>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</xsl:template>
</xsl:stylesheet>
 rss(2).xslt
Code with tabs
|
|
|
|
top