How do I get buttons to control the scroll?

Hello,

I want the left button to move the pictures one to the left, and the right button to move the pictures one to the right.  How do I do that?  Below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function scrollImages() {
 var images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
  var  left = images[i].style.left.substr(0, images[i].style.left.length - 2);
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 8) + 'px';
  }
}
  setInterval("scrollImages()", 100);
</script>
<style type="text/css" rel="stylesheet">
#coverBar img {position:absolute; padding-left:260px;}
#move_right {float:right; padding-right:500px;}
#move_left {float:left; padding-left: 40px;}
</style>
</head>

<body>

 <a href="#" id="move_left"> < </a>
<div id="coverBar">
<img width="82" height="115" style="left: 0px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverMatrix.jpg">
<img width="82" height="115" style="left: 88px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverHolyGrail.jpg">
<img width="82" height="115" style="left: 176px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverFuturama.jpg">
<img width="82" height="115" style="left: 264px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDrStrangelove.jpg">
<img width="82" height="115" style="left: 356px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDeadRingers.jpg">
<img width="82" height="115" style="left: 444px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRobotChicken.jpg">
<img width="82" height="115" style="left: 532px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRaisingArizona.jpg"> 
</div>
<a href="#" id="move_right"> > </a>
</body>
</html>
                                  

Open in new window

NewWebDesignerAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
Please pass dir in
function scrollimages(dir)
0
 
Michel PlungjanIT ExpertCommented:
1) remove the setinterval and add
return false to the end of that function
2) add onclick="return scrollimages(-1)" to the left button and
onclick="return scrollimages(1)"
to the right

Then where it says -2 you change to
+(dir*imageWidth) where imageWidth is a var that holds the witdth of one Image assuming they all have same width

If you need animation we need more code and there likely need to be an additional if to handle when you are extreme right but I'm on my iPhone and cannot test easily
0
 
NewWebDesignerAuthor Commented:
Thanks for the response.  I added the code to where you suggested.  I see where you going with this, but it is still not working.  Am I adding the code in the wrong places?  Do you know why my left "<"  does not turn to a hand when you hover over it and the right ">" does?

Thanks,

Here is the updated code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function scrollImages() {
 var images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
  var  left = images[i].style.left.substr(0, images[i].style.left.length +(dir*imageWidth));
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 8) + 'px';
  }
  return false;
}
  
</script>
<style type="text/css" rel="stylesheet">
#coverBar img {position:absolute; padding-left:260px;}
#move_right {float:right; padding-right:500px;}
#move_left {float:left; padding-left: 40px;}
</style>
</head>

<body>

 <a href="#" id="move_left" onclick="return scrollimages(-1)" > < </a>
<div id="coverBar">
<img width="82" height="115" style="left: 0px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverMatrix.jpg">
<img width="82" height="115" style="left: 88px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverHolyGrail.jpg">
<img width="82" height="115" style="left: 176px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverFuturama.jpg">
<img width="82" height="115" style="left: 264px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDrStrangelove.jpg">
<img width="82" height="115" style="left: 356px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDeadRingers.jpg">
<img width="82" height="115" style="left: 444px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRobotChicken.jpg">
<img width="82" height="115" style="left: 532px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRaisingArizona.jpg"> 
</div>
<a href="#" id="move_right" "return scrollimages(1)"> > </a>
</body>
</html>
                                  

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
NewWebDesignerAuthor Commented:
thanks,


I added "dir" and it is still not moving.  anything else to try?

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function scrollImages(dir) {
 var images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
  var  left = images[i].style.left.substr(0, images[i].style.left.length +(dir*imageWidth));
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 8) + 'px';
  }
  return false;
}
  
</script>
<style type="text/css" rel="stylesheet">
#coverBar img {position:absolute; padding-left:260px;}
#move_right {float:right; padding-right:500px;}
#move_left {float:left; padding-left: 40px;}
</style>
</head>

<body>

 <a href="#" id="move_left" onclick="return scrollimages(-1)" > < </a>
<div id="coverBar">
<img width="82" height="115" style="left: 0px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverMatrix.jpg">
<img width="82" height="115" style="left: 88px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverHolyGrail.jpg">
<img width="82" height="115" style="left: 176px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverFuturama.jpg">
<img width="82" height="115" style="left: 264px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDrStrangelove.jpg">
<img width="82" height="115" style="left: 356px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverDeadRingers.jpg">
<img width="82" height="115" style="left: 444px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRobotChicken.jpg">
<img width="82" height="115" style="left: 532px;" src="http://i777.photobucket.com/albums/yy54/Simonha/coverRaisingArizona.jpg"> 
</div>
<a href="#" id="move_right" "return scrollimages(1)"> > </a>
</body>
</html>
                                  

Open in new window

0
 
NewWebDesignerAuthor Commented:
any other suggestions?
0
 
Michel PlungjanIT ExpertCommented:
A few issues from my side

Missed setting imageWidth and added the width in the wrong place

http://jsfiddle.net/mplungjan/td5Zk/

Is the fiddle I am working on, but I seriously cannot work from my vacation using only an iPad with rudimentary error handling and no console.

I'll get back in a few days, but let's see who else can help
0
 
Ray PaseurCommented:
Not sure if this is an academic project to learn JS or a "real" task, but if it is the latter, this might be interesting:
http://wowslider.com/index.html#overview
0
 
Michel PlungjanIT ExpertCommented:
This works better

http://jsfiddle.net/mplungjan/td5Zk/

1) changed scrollimages to scrollImages
2) moved the div which was covering the links so they now can be clicked
0
 
NewWebDesignerAuthor Commented:
mplungjan,

The right ">" link doesn't move the books, but otherwise it works.  Any idea why that is?
0
 
Michel PlungjanIT ExpertCommented:
No, not really.

I can look on Monday or later this weekend
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.