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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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

Michel PlungjanIT ExpertCommented:
Please pass dir in
function scrollimages(dir)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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

NewWebDesignerAuthor Commented:
any other suggestions?
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
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
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
NewWebDesignerAuthor Commented:
mplungjan,

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

I can look on Monday or later this weekend
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.