Question

I am having difficulty setting up slidescroll- I’ve been working on this particular div for days and have revised my question several times. I believe I now have exactly what I need to scroll content vertically in a div using up and down images. But I cannot get this code working– though it seems to work fine at Scripterlative, where I found it.

I am trying to configure the slidescroll javascript to use with two up/down images placed at a fixed position; the directions in the js file are a bit ambiguous in places and I was hoping for a little help. Not sure what is causing the problem.

***UPDATE

I can now scroll down, but not up. And down scrolls at the speed of light, slowing abruptly when the mouse leaves the image. Any ideas?*

This is what I have:

 HTML/CSS

 <div id="repertoiredetails">
 <div id="repertoirescroll">

 <div class="arrows">
 <img id="upButton" src="images/arrowup.png" title="up" alt="up" width="15" height="28">
 <img id="downButton" src="images/arrowdown.png" title="down" alt="down" width="15" height="28">
 </div>

 <p>content</p>
 </div>
 </div>

 #repertoiredetails {
 background-color:#000;
 width:400px;
  margin-top:140px;
 height:1000px; 
  margin-left:-2px;
  padding-top:5px;
  overflow:hidden;
 }

  #repertoirescroll {
width:100%; 
 }

 #repertoirescroll p {
 text-align:justify;
 text-justify:inter-word; 
 color:#999; 
 font-family:'Arial Narrow', Arial,   sans-serif;
 font-size:13px;
 padding:20px;
}

.arrows {
height:50px;
left:350px;
z-index:999;
top:450px;
position:fixed;
}

UPDATED CODE
This is placed just beneath the closing div repertoiredetails as directed:

<script type='text/javascript' >

new SlideScroll( 'upButton', 'self', 'up');
new SlideScroll( 'downButton', 'self', 'down');

and slidescroll.js is in the head. For fixed image links, the js requires the ID of “self.”

Any help with this is appreciated!

Thank you

Answer 1

I investigate you code and found the problem in slidescroll.js. To fix this issue replace below

yStep =  -this.speedFactor * (((vBoth ? this.btnHeight / 2 : this.btnHeight) - my) / (vBoth ? this.btnHeight /2 : this.btnHeight));

with

yStep =  -this.speedFactor * ((my - (vBoth ? this.btnHeight / 2 : this.btnHeight)) / (vBoth ? this.btnHeight /2 : this.btnHeight));

This will fix your issue.