?
Solved

need to change code so images scroll from left to right

Posted on 2009-02-19
8
Medium Priority
?
404 Views
Last Modified: 2013-11-19
Hello,

I have included the complete .html page and a .zip containing the images for this problem.
You can just copy the code into a text editor and save it as a .html file.
Then just extract the images folder from the .zip and place the folder in the same directory as the .html file. You can call the .html file whatever you want.

In the .html file is the code that I want to modify. It horizontally scrolls a list of images from right to left.

I want to change this so the images scroll from left to right.

As an additional fix, you'll notice that it does loop the images  without moving the scrollbar however it leaves the space of 1 image before it loops around again.
I'd like to make it so that it doesn't leave that space, instead wraps around seamlessly.

A grade and 500 points for the solution :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
          <title>Image Scroller with Hover</title>
            <style type="text/css">
                  ul      {
                        width:100%;
                        height:300px;
						bottom:0%;
                        padding:0;
                        list-style:none;
                        position:absolute;
                        overflow:hidden;
						
                  }
                  ul li      {
                        position:absolute;
						
                        /* opacity:0.5;*/
                  }
                  ul li:hover      {
                        /* opacity:0.99;*/
                  }
            </style>
            <script type="text/javascript">
                  var width = 0;
                  var slideshow;
                  var list;
                  var img;
 
                  var DELAY = 100;
                  var STEP = 4;
 
                  function init()
                  {
                        slideshow = document.getElementById("slideshow"); //the unordered list element
                        list = slideshow.getElementsByTagName("li"); //an array of the li tags
                        img = slideshow.getElementsByTagName("img");  // an array of the image tags
						//alert(list.length); starts at 1
                        var offset = 0;
                        for(var i = 0; i < list.length; i++)
                        {
                              offset += (i > 0) ? img[i - 1].width : 0;
                              list[i].style.left = offset + "px";
                              width += img[i].width;
                        }
                        move();
                  }
                  function move()
                  {
                        for(var i = 0; i < list.length; i++)
                        {
                              var left = list[i].style.left.slice(0,-2) - STEP;
                              list[i].style.left = left + "px";
 
                              if(left <= -(img[i].width))
                              {
                                    list[i].style.left = width - img[i].width + "px";
                              }
                        }
                        setTimeout("move()",DELAY);
                  }
                  window.onload = init;
            </script>
      </head>
      <body>
            <ul id="slideshow">
                  <li><img src="images/dell_sm.jpg"></li>
                  <li><img src="images/handheld_game_sm.jpg"></li>
                  <li><img src="images/sauces_sm.jpg"></li>
                  <li><img src="images/sea_buggy_sm.jpg"></li>
                  <li><img src="images/sucanon_sm.jpg"></li>
            </ul>
      </body>
</html>

Open in new window

images.zip
0
Comment
Question by:jumprooster
  • 4
  • 4
8 Comments
 
LVL 16

Expert Comment

by:Robin
ID: 23684862
Change the move() function to the following:

This doesn't wrap around yet. That will probably a little harder. I'll see if I manage.
function move()
{
  for(var i = 0; i < list.length; i++)
  {
        var left = parseInt(list[i].style.left.slice(0,-2)) + STEP;
        list[i].style.left = left + "px";
        if(left >= width)
        {
              list[i].style.left = 0 + "px";
        }
  }
  setTimeout("move()",DELAY);
}

Open in new window

0
 

Author Comment

by:jumprooster
ID: 23684966
hey robinu, you truly are a master :) yep it's going from the left to the right now

just that alone looks much more pleasing the way it moves

well for the wrap around, .. if you could make a single image travel the whole length of the screen and THEN wrap around

right now it travels (moves) to a certain point based on the it's own width

...
0
 
LVL 16

Expert Comment

by:Robin
ID: 23685285
Is this what you mean:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Image Scroller with Hover</title>
<style type="text/css">
ul {
  width:950px;
  overflow:hidden;
  
  height:300px;
  bottom:0%;
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  overflow:hidden;
}
ul li {
  position:absolute;
  /* opacity:0.5;*/
}
ul li:hover {
  /* opacity:0.99;*/
}
</style>
<script type="text/javascript">
var width = 0;
var width2 = 0;
var slideshow;
var list;
var img;
 
var DELAY = 1000;
var STEP = 25;
 
function init()
{
  slideshow = document.getElementById("slideshow"); //the unordered list element
  list = slideshow.getElementsByTagName("li"); //an array of the li tags
  img = slideshow.getElementsByTagName("img");  // an array of the image tags
  var offset = 0;
  for(var i = 0; i < list.length; i++)
  {
        offset += (i > 0) ? img[i - 1].width : -img[0].width;
        list[i].style.left = offset + "px";
        width += img[i].width;
  }
  width2=width-img[list.length-1].width;
  slideshow.style.width=width2 + "px";
  move();
}
function move()
{
  for(var i = 0; i < list.length; i++)
  {
        var left = parseInt(list[i].style.left.slice(0,-2)) + STEP;
        list[i].style.left = left + "px";
        if(left >= width2)
        {
              list[i].style.left = -img[i].width + "px";
        }
  }
 setTimeout("move()",DELAY);
}
window.onload = init;
</script>
</head>
<body>
<ul id="slideshow">
  <li><img src="dell_sm.jpg"></li>
  <li><img src="handheld_game_sm.jpg"></li>
  <li><img src="sauces_sm.jpg"></li>
  <li><img src="sea_buggy_sm.jpg"></li>
</ul>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jumprooster
ID: 23685296
it works ok in firefox but the images get jumbled up in internet explorer.. what can i do?
0
 
LVL 16

Expert Comment

by:Robin
ID: 23685320
This one is probably better (smaller step and delay):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Image Scroller with Hover</title>
<style type="text/css">
ul {
  width:900px;
  overflow:hidden;
  
  height:300px;
  bottom:0%;
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  overflow:hidden;
}
ul li {
  position:absolute;
  /* opacity:0.5;*/
}
ul li:hover {
  /* opacity:0.99;*/
}
</style>
<script type="text/javascript">
var width = 0;
var width2 = 0;
var slideshow;
var list;
var img;
 
var DELAY = 100;
var STEP = 4;
 
function init()
{
  slideshow = document.getElementById("slideshow"); //the unordered list element
  list = slideshow.getElementsByTagName("li"); //an array of the li tags
  img = slideshow.getElementsByTagName("img");  // an array of the image tags
  var offset = 0;
  for(var i = 0; i < list.length; i++)
  {
        offset += (i > 0) ? img[i - 1].width : -img[0].width;
        list[i].style.left = offset + "px";
        width += img[i].width;
  }
  width2=width-img[list.length-1].width;
  slideshow.style.width=width2 + "px";
  move();
}
function move()
{
  for(var i = 0; i < list.length; i++)
  {
        var left = parseInt(list[i].style.left.slice(0,-2)) + STEP;
        list[i].style.left = left + "px";
        if(left >= width2)
        {
              list[i].style.left = -img[i].width + "px";
        }
  }
 setTimeout("move()",DELAY);
}
window.onload = init;
</script>
</head>
<body>
<ul id="slideshow">
  <li><img src="dell_sm.jpg"></li>
  <li><img src="handheld_game_sm.jpg"></li>
  <li><img src="sauces_sm.jpg"></li>
  <li><img src="sea_buggy_sm.jpg"></li>
</ul>
</body>
</html>

Open in new window

0
 

Author Comment

by:jumprooster
ID: 23685358
yeap that's the wrap around I'm talking about, well almost

my idea is that it wraps like that but the images travel 100% of the screen like that

i tested your latest code and it works in both firefox and internet explorer

you already have the points, if you could make a little tweak to stretch it the whole length of the screen
that would be amazing..
0
 
LVL 16

Accepted Solution

by:
Robin earned 2000 total points
ID: 23686547
Ok, try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Image Scroller with Hover</title>
<style type="text/css">
* {margin:0; padding:0; }
ul {
  width:100%;
  overflow:hidden;
  
  height:300px;
  bottom:0%;
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  overflow:hidden;
}
ul li {
  position:absolute;
  /* opacity:0.5;*/
}
ul li:hover {
  /* opacity:0.99;*/
}
</style>
<script type="text/javascript">
var width = 0;
var width2 = 0;
var slideshow;
var list;
var img;
 
var DELAY = 100;
var STEP = 4;
 
function init()
{
  slideshow = document.getElementById("slideshow"); //the unordered list element
  list = slideshow.getElementsByTagName("li"); //an array of the li tags
  img = slideshow.getElementsByTagName("img");  // an array of the image tags
  var offset = 0;
  for(var i = 0; i < list.length; i++)
  {
        offset += (i > 0) ? img[i - 1].width : -img[0].width;
        list[i].style.left = offset + "px";
        width += img[i].width;
  }
  width2=screen.width;
  move();
}
function move()
{
  for(var i = 0; i < list.length; i++)
  {
        var left = parseInt(list[i].style.left.slice(0,-2)) + STEP;
        list[i].style.left = left + "px";
        if(left >= width2)
        {
              list[i].style.left = -img[i].width + "px";
        }
  }
 setTimeout("move()",DELAY);
}
window.onload = init;
</script>
</head>
<body>
<ul id="slideshow">
  <li><img src="dell_sm.jpg"></li>
  <li><img src="handheld_game_sm.jpg"></li>
  <li><img src="sauces_sm.jpg"></li>
  <li><img src="sea_buggy_sm.jpg"></li>
  <li><img src="sucanon_sm.jpg"></li>
  <li><img src="water_bottle_sm.jpg"></li>
</ul>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:jumprooster
ID: 31549422
you're truly a master,

i tried this code in firefox and internet explorer and it works..

i has glitches in internet explorer only when i dynamically create the list items of images with javascript pure dom from the ajax xmlhttprequest object.. i think it's an internet explorer caching issue

so now i'm gerating this same code by gerating this page with active server pages script, creating an xml file with xslt transformation to then respond with the same code as abouve (html) back to the xmlhttprequest object then i will try to replace the entire document with it

i originally have the code you did in an asp page

but all that's another question

thanks a million, check u soon :)!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question