[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 357
  • Last Modified:

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

0
NewWebDesigner
Asked:
NewWebDesigner
  • 2
1 Solution
 
Tom BeckCommented:
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.
0
 
NewWebDesignerAuthor Commented:
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

0
 
Tom BeckCommented:
Two things.
1.) Missing a closing brace } for the function on line 16.
2.) You need a selector for that css:

<style type="text/css" rel="stylesheet">
#coverBar img {position:absolute;}
</style>

Most browsers will ignore this minor problem, but variables should be declared with the "var" keyword in javascript:

function scrollImages() {
  var left;
  var images = document.getElementsByTagName('img');
  ....
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now