asked on

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

SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

NewWebDesigner

ASKER

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

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

NewWebDesigner

ASKER

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

NewWebDesigner

ASKER

any other suggestions?

Michel Plungjan

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

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

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

NewWebDesigner

ASKER

mplungjan,

The right ">" link doesn't move the books, but otherwise it works. Any idea why that is?

Michel Plungjan

No, not really.

I can look on Monday or later this weekend