Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DHTML Scrollbar failing in XSLT

Status
Not open for further replies.

Dozzer81

Technical User
Jun 29, 2007
14
GB
I'm trying to implement a DHTML Scrollbar, but it seems that it doesn't seem to function properly. I think this is to do with the javascript in my XSLT. I would appreciate any help with this as I have had no problem with other javascript coding which I used from dynamicdrive.com.

I wont add the code for the javascript as there are three seperate js files (each one is pretty long), but to view these js files just go to and see how his example works.

Here is my XSLT code, I have highlighted his code I used:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl=" version="1.0">
<xsl:template match="/">
<html>
<head>
<title>Solana Gallery - Contemporary russian art</title>
<link href="gallery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (* Visit for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />

<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->

<script type="text/javascript" src="motiongallery.js">

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (* Visit for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
</script>
[highlight]<link rel="stylesheet" type="text/css" href="scroller.css"/>
<script type="text/javascript" src="dom-drag.js"></script>
<script type="text/javascript" src="ypSimpleScrollC.js"></script>
<script type="text/javascript" src="scroller.js"></script>
<script type="text/javascript">
instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150);
</script>[/highlight]
</head>
<body>

<div class="logo"><a href="index.html"><img src="images/Small_Solana-Logo.png" alt="Solana Gallery Logo" /></a></div>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
<ul>
<li><a href="artistlist.html">Artists</a></li>
</ul>
<ul>
<li><a>Exhibitions</a>
<ul>
<li><a>Recent</a></li>
<li><a>Future</a></li>
<li><a href="past.html">Past</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
<ul>
<li><a>About Us</a>
<ul>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="artservices.html">Art Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="news.html">News</a></li>
</ul>
</li>
</ul>
</div>
<!-- end the menuh div -->
<div class="container">
<xsl:for-each select="artist">
<h2><xsl:value-of select="artistname"/></h2>
<div class="description">
[highlight]<div class="root" id="root0">
<div class="scrollContainer" id="scroll0Container">
<div class="scrollContent" id="scroll0Content">[/highlight]

<p><xsl:value-of select="artistcv"/></p>
[highlight]</div>
</div>
</div>[/highlight]
</div>
</xsl:for-each>
<div class="imgthumb">
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">
<xsl:for-each select="artist/art">
<a href="{img}" rel="enlargeimage::click" rev="bigimg" >
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="img" /> </xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="110" /> </xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="80" /> </xsl:attribute>
</xsl:element>
</a>
</xsl:for-each>
</nobr></div>
</div>
</div>


<div class="imgholder">
<div id="bigimg"></div>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
 
What is the problem you find? I don't think those highlighted cause problem? Instead I can see if your xml source has a root other than "artist", such as
[tt]
<artists>
<artist>
<!-- etc etc -->
</artist>
<artist>
<!-- etc etc -->
</artist>
<!-- etc etc -->
</artists>
[/tt]
Then you'll find you lost all the data in the process. You have then to do these.

[1]
><xsl:for-each select="artist">
Either this
[tt]<xsl:for-each select="[red]//[/red]artist">[/tt]
or
[tt]<xsl:for-each select="[red]artists/[/red]artist">[/tt]
[2]
><xsl:for-each select="artist/art">
Either this
[tt]<xsl:for-each select="[red]//[/red]artist/art">[/tt]
or
[tt]<xsl:for-each select="[red]artists/artist[/red]/art">[/tt]
 
Ok this is my XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<artist>
<artistname>Dorian Piaskowski</artistname>
<artistcv>This is Dorian's cv</artistcv>
<art>
<img>artistpics/piaskowski-d/cezanne___galleryplayer.jpg</img>
<title>Apples</title>
<description>Oil on Canvas 120 x 300</description>
</art>

<art>
<img>artistpics/piaskowski-d/church___galleryplayer.jpg</img>
<title>English Landscape</title>
<description>Oil on board 300 x 500</description>
</art>

<art>
<img>artistpics/piaskowski-d/degas___galleryplayer.jpg</img>
<title>Ballet Dancers</title>
<description>Watercolour on canvas 300 x 400</description>
</art>

<art>
<img>artistpics/piaskowski-d/sargent___galleryplayer.jpg</img>
<title>Venice Canal</title>
<description>Watercolour 400 x 500 (1876)</description>
</art>

<art>
<img>artistpics/piaskowski-d/shells___galleryplayer.jpg</img>
<title>Shells</title>
<description>Photograph 250 x 300</description>
</art>

<art>
<img>artistpics/piaskowski-d/sisley___galleryplayer.jpg</img>
<title>Nuts and Grapes</title>
<description>Oil on Canvas 300 x 370</description>
</art>

<art>
<img>artistpics/piaskowski-d/sydney___galleryplayer.jpg</img>
<title>Sydney Harbour Bridge</title>
<description>Photograph</description>
</art>

<art>
<img>artistpics/piaskowski-d/van_gogh_stairway___galleryplayer.jpg</img>
<title>Stairway</title>
<description>Oil on canvas 500 x 650 </description>
</art>

<art>
<img>artistpics/piaskowski-d/van_gogh___galleryplayer.jpg</img>
<title>The farmers</title>
<description>Oil on Canvas 400 x 500</description>
</art>
</artist>

and this is my html that uses javascript to load the xml and xslt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="

<head>
<title>Solana Gallery - Contemporary russian art</title>

<script type="text/javascript">
var xmlDoc;

{
// code for IE
if (window.ActiveXObject)
{
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async=false;
xml.load("piaskowski-d.xml");

// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("artist.xsl");

// Transform
document.write(xml.transformNode(xsl))
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load("piaskowski-d.xml");
var xsltProc = new XSLTProcessor();
var xsl=document.implementation.createDocument("","",null);
xsl.async=false;
xsl.load("artist.xsl");
xsltProc.importStylesheet(xsl);
xmlDoc=xsltProc.transformToDocument(xmlDoc);
var serializer=new XMLSerializer();
document.write(serializer.serializeToString(xmlDoc));
}
else
{
alert('Your browser cannot handle this script');
}
}

</script>
</head>

<body>
</body>
</html>

But I still think this is to do with the highlighted coding. P.s Thanks again for your help on the Firefox issue I posted before.
 
Without reading all the followup, if you have only artist as root, why is <xsl:for-each select="artist"> for?
 
Ok I have removed <xsl:for-each select="artist"> which was redundant and changed <xsl:value-of select="artistname"/> to <xsl:value-of select="artist/artistname"/>.
Thanks for spotting that one, but the issue I'm facing is that the dhtml scrollbar is not displaying at all and it shows just a standard browser scrollbar, is this an issue with the javascript in my xslt as using the dhtml scrollbar coding in a standard html work fine, So Im thinking this is a javascript/xslt issue?
 
Figured out the problem it was the javascript in the header, just moved it to an external javascript file and called it from the xslt header.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top