asked on

trouble getting pictures to scroll

Hello.

I am trying to create a scrolling picture gallery but the scrolling isn't working? Is it the javascript or the CSS?

Thank you.

<!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() {
  images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
    left = images[i].style.left.substr(0, images[i].style.left.length - 2);
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 1) + 'px';
  }
  
  setInterval("scrollImages()", 50);
</script>
<style type="text/css" rel="stylesheet">
</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>
</body>
</html>

Open in new window

Tom Beck

It's the css. The left positions are changing as expected, but the values are being ignored because the images position is not defined. Add "position:absolute;" to the css.

NewWebDesigner

ASKER

I added "position absolute" to the css. My pictures still do not scroll. I am confused. 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() {
  images = document.getElementsByTagName('img');
  for (i = 0; i < images.length; i++) {
    left = images[i].style.left.substr(0, images[i].style.left.length - 2);
    if (left <=  -86) {
      left = 532;
    }
    images[i].style.left = (left - 1) + 'px';
  }
  
  setInterval("scrollImages()", 50);
</script>
<style type="text/css" rel="stylesheet">
{position:absolute;}
</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>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

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

Start Free Trial