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 the specific code for the scrollbar 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">
<h2><xsl:value-of select="artist/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="artist/artistcv"/></p>
[highlight]</div>
</div>
</div>[/highlight]
</div>
<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>
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 the specific code for the scrollbar 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">
<h2><xsl:value-of select="artist/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="artist/artistcv"/></p>
[highlight]</div>
</div>
</div>[/highlight]
</div>
<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>
