?
Solved

javascript scrolling list of images, more than 7 images overlap needs to be able to scroll unlimited images

Posted on 2009-02-21
4
Medium Priority
?
1,168 Views
Last Modified: 2012-08-13
Hi,

I have javascript, html and css code that makes an unordered list of images (ul) scroll horizontally however when more than 7 images are specified they overlap.

I want to be able to put an unlimited # of images in the list and have them all scroll 1 after the other just like the order they are in in the ul

the full web page is below
i attached a zip with some images you can use to test

also, if you test in internet explorer I think it has a cache issue with images which I would LOVE the solution too but you can clear the cache for that browser and get better results

i would suggest to use firefox for testing, although I AM trying to get it to work with both of those 2 browsers

i put 8 list items, with some duplicate images,

you can cut out some li tags to make it less than 7 images and you will see that it looks good

however with 7 or more images they overlap and this is the problem

500 points A grade for this solution
<!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>
<style type="text/css">
 
 * {margin:0px; padding:0; }
ul {
  width:100%;
  height:360px;
  bottom:10%;
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  overflow:hidden;
  list-style-type:none; 
  border:dotted 1px #B7B7B7; 
  zoom:1; 
}
ul li {
 position:absolute;
 
 display:block; 
 float:left; 
/*background:url(http://us.i1.yimg.com/us.yimg.com/i/us/fd/gr/ui/dtyl.gif) 0 0 repeat-y; 
 background:url(images/vertical_separator300px.jpg) 0 0 repeat-y; */
 margin:0 4px 0 -4px; /*use negative margin-left to hide the background image*/ 
 padding:6px 12px 6px 12px; 
 zoom:1; 
 
 
 
 
   /* opacity:0.5;background: url(images/vertical_separator300px.jpg) no-repeat left bottom;*/
   
}
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 = 10;
 
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);
}
</script>
</head>
 
<body>
 
 
<title>DEXTEL.NET Excercise</title>
 
 
            
</head>
<body>
 
<table width="100%" border="0" style="position:absolute;top:20%;">
  <tr>
  	<td width="33%">
  
  	</td>
    <td width="33%">
    	<form method="post" name="form" action="">
        <table width="100%" border="0" >
 			<tr>
    			<td colspan="2" align="left"><strong>Enter new product:</strong></td>
  			</tr>
  			<tr>
    			<td>Name:</td>
    			<td><input name="txtName" type="text" /></td>
  			</tr>
 			<tr>
    			<td>Price:</td>
    			<td><input name="txtPrice" type="text" /></td>
  			</tr>
  			<tr>
    			<td>Image URL:</td>
    			<td><input name="txtImageURL" type="text" /></td>
 			</tr>
  			<tr>
    			<td></td>
    			<td><input type="button" value="Submit" onclick="showProducts(this.value)"/></td>
  			</tr>
            </table>
		</form>
    </td>
    <td width="33%">
    
    </td>
  </tr>
</table>
 
<ul id="slideshow"> 
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/water_bottle_sm.jpg" /></li>
<li><img src="images/handheld_game_sm.jpg" /></li>
<li><img src="images/sucanon_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
</ul>
 
<script type="text/javascript">
init();
</script>
</body>
</html>

Open in new window

images.zip
0
Comment
Question by:jumprooster
  • 2
  • 2
4 Comments
 
LVL 15

Expert Comment

by:fsze88
ID: 23703080
try this, tested on ie6, ff3
<!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>
<style type="text/css">
 
 * {margin:0px; padding:0; }
ul {
  width:100%;
  height:360px;
  bottom:10%;
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  overflow:hidden;
  list-style-type:none; 
  border:dotted 1px #B7B7B7; 
  zoom:1; 
}
ul li {
 position:absolute;
 
 display:block; 
 float:left; 
/*background:url(http://us.i1.yimg.com/us.yimg.com/i/us/fd/gr/ui/dtyl.gif) 0 0 repeat-y; 
 background:url(images/vertical_separator300px.jpg) 0 0 repeat-y; */
 margin:0 4px 0 -4px; /*use negative margin-left to hide the background image*/ 
 padding:6px 12px 6px 12px; 
 zoom:1; 
 
 
 
 
   /* opacity:0.5;background: url(images/vertical_separator300px.jpg) no-repeat left bottom;*/
   
}
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 = 10;
 
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;
//        alert(offset);
        list[i].style.left = offset + "px";
        width += img[i].width;
  }
  width2=screen.width;
//  alert('width : ' + width);
//  alert('width2 : ' + width2 );
  width2=width;
 
//  alert(list.length);
  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);
}
</script>
</head>
 
<body>
 
 
<title>DEXTEL.NET Excercise</title>
 
 
            
</head>
<body>
 
<table width="100%" border="0" style="position:absolute;top:20%;">
  <tr>
        <td width="33%">
  
        </td>
    <td width="33%">
        <form method="post" name="form" action="">
        <table width="100%" border="0" >
                        <tr>
                        <td colspan="2" align="left"><strong>Enter new product:</strong></td>
                        </tr>
                        <tr>
                        <td>Name:</td>
                        <td><input name="txtName" type="text" /></td>
                        </tr>
                        <tr>
                        <td>Price:</td>
                        <td><input name="txtPrice" type="text" /></td>
                        </tr>
                        <tr>
                        <td>Image URL:</td>
                        <td><input name="txtImageURL" type="text" /></td>
                        </tr>
                        <tr>
                        <td></td>
                        <td><input type="button" value="Submit" onclick="showProducts(this.value)"/></td>
                        </tr>
            </table>
                </form>
    </td>
    <td width="33%">
    
    </td>
  </tr>
</table>
 
<ul id="slideshow"> 
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/water_bottle_sm.jpg" /></li>
<li><img src="images/handheld_game_sm.jpg" /></li>
<li><img src="images/sucanon_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
</ul>
 
<script type="text/javascript">
init();
</script>
</body>
</html>

Open in new window

0
 

Author Comment

by:jumprooster
ID: 23706714
i tested the code in firefox and internet explorer.. it works fine with 8 images

good news, i added more images 15 now, and it works perfect in fireforx

bad news, internet explorer doesn't like it, i think internet explorer has a caching issue with images and dhtml

im using version 7 internet explorer on windows to test this code
im using firefox - mozilla 5.0 on windows

so knowing that it's fine in firefox the problem seems to obviously point to internet explorer for me at this point

with 15 images, even when i clear the cache it doesn't help

i was reading that it has some to do with a header called If-Modified since

so well, all the images are 300pxx300px, they all have to be the same size to work on firefox
and the all now have different file names

could anyone find a workaround for the internet explorer caching issue to fit into this code

(css, javascript, html)
 
here's the code(same as above just added more images to the list)

<!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>
<style type="text/css">
 
 * {margin:0px; padding:0; }
ul {
  width:100%;
  height:400px;
  bottom:10%;
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  overflow:hidden;
  list-style-type:none;
  border:dotted 1px #B7B7B7;
  zoom:1;
}
ul li {
 position:absolute;
 
 display:block;
 float:left;
/*background:url(http://us.i1.yimg.com/us.yimg.com/i/us/fd/gr/ui/dtyl.gif) 0 0 repeat-y;
 background:url(images/vertical_separator300px.jpg) 0 0 repeat-y; */
 margin:0 4px 0 -4px; /*use negative margin-left to hide the background image*/
 padding:6px 12px 6px 12px;
 zoom:1;
 
 
 
 
   /* opacity:0.5;background: url(images/vertical_separator300px.jpg) no-repeat left bottom;*/
   
}
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 = 10;
 
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;
//        alert(offset);
        list[i].style.left = offset + "px";
        width += img[i].width;
  }
  width2=screen.width;
//  alert('width : ' + width);
//  alert('width2 : ' + width2 );
  width2=width;
 
//  alert(list.length);
  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);
}
</script>
</head>
 
<body>
 
 
<title>DEXTEL.NET Excercise</title>
 
 
           
</head>
<body>
 
<table width="100%" border="0" style="position:absolute;top:20%;">
  <tr>
        <td width="33%">
 
        </td>
    <td width="33%">
        <form method="post" name="form" action="">
        <table width="100%" border="0" >
                        <tr>
                        <td colspan="2" align="left"><strong>Enter new product:</strong></td>
                        </tr>
                        <tr>
                        <td>Name:</td>
                        <td><input name="txtName" type="text" /></td>
                        </tr>
                        <tr>
                        <td>Price:</td>
                        <td><input name="txtPrice" type="text" /></td>
                        </tr>
                        <tr>
                        <td>Image URL:</td>
                        <td><input name="txtImageURL" type="text" /></td>
                        </tr>
                        <tr>
                        <td></td>
                        <td><input type="button" value="Submit" onclick="showProducts(this.value)"/></td>
                        </tr>
            </table>
                </form>
    </td>
    <td width="33%">
   
    </td>
  </tr>
</table>
 
<ul id="slideshow">
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/water_bottle_sm.jpg" /></li>
<li><img src="images/handheld_game_sm.jpg" /></li>
<li><img src="images/product_shot1.jpg" /></li>
<li><img src="images/product_home-stiletto2.png" /></li>
<li><img src="images/Product_line_2_007.jpg" /></li>
<li><img src="images/product.jpg" /></li>
<li><img src="images/product.gif" /></li>
<li><img src="images/Plastic_Product.jpg" /></li>
<li><img src="images/Health_and_Body_Care_Product.jpg" /></li>
<li><img src="images/dell_sm.jpg" /></li>
<li><img src="images/107.jpg" /></li>
</ul>
 
<script type="text/javascript">
init();
</script>
</body>
</html>


images.zip
0
 

Author Comment

by:jumprooster
ID: 23707812
i was furthur testing your code and it works well for 4 or more images (300px by 300px) however with 3 images or less the images disappear early

so this script is good but when there are only 3 images or less (2 images, 1 image) they don't travel the full length of the screen
0
 
LVL 15

Accepted Solution

by:
fsze88 earned 2000 total points
ID: 23708542
because of the sum of image width is shorter than screen.width in cause of 3 or less images there..
you could check the width by if statement
  if (width > screen.width){
    width2=width;
  }else{
    width2=screen.width;
  }

<!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>
<style type="text/css">
 
 * {margin:0px; padding:0; }
ul {
  width:100%;
  height:360px;
  bottom:10%;
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  overflow:hidden;
  list-style-type:none; 
  border:dotted 1px #B7B7B7; 
  zoom:1; 
}
ul li {
 position:absolute;
 
 display:block; 
 float:left; 
/*background:url(http://us.i1.yimg.com/us.yimg.com/i/us/fd/gr/ui/dtyl.gif) 0 0 repeat-y; 
 background:url(images/vertical_separator300px.jpg) 0 0 repeat-y; */
 margin:0 4px 0 -4px; /*use negative margin-left to hide the background image*/ 
 padding:6px 12px 6px 12px; 
 zoom:1; 
 
 
 
 
   /* opacity:0.5;background: url(images/vertical_separator300px.jpg) no-repeat left bottom;*/
   
}
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 = 10;
 
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;
//        alert(offset);
        list[i].style.left = offset + "px";
        width += img[i].width;
  }
//  width2=screen.width;
//  alert('width : ' + width);
//  alert('width2 : ' + width2 );
//  width2=width;
  
  
  if (width > screen.width){
    width2=width;
  }else{
    width2=screen.width;
  }
 
//  alert(list.length);
  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);
}
</script>
</head>
 
<body>
 
 
<title>DEXTEL.NET Excercise</title>
 
 
            
</head>
<body>
 
<table width="100%" border="0" style="position:absolute;top:20%;">
  <tr>
        <td width="33%">
  
        </td>
    <td width="33%">
        <form method="post" name="form" action="">
        <table width="100%" border="0" >
                        <tr>
                        <td colspan="2" align="left"><strong>Enter new product:</strong></td>
                        </tr>
                        <tr>
                        <td>Name:</td>
                        <td><input name="txtName" type="text" /></td>
                        </tr>
                        <tr>
                        <td>Price:</td>
                        <td><input name="txtPrice" type="text" /></td>
                        </tr>
                        <tr>
                        <td>Image URL:</td>
                        <td><input name="txtImageURL" type="text" /></td>
                        </tr>
                        <tr>
                        <td></td>
                        <td><input type="button" value="Submit" onclick="showProducts(this.value)"/></td>
                        </tr>
            </table>
                </form>
    </td>
    <td width="33%">
    
    </td>
  </tr>
</table>
 
<ul id="slideshow"> 
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/water_bottle_sm.jpg" /></li>
<li><img src="images/handheld_game_sm.jpg" /></li>
<li><img src="images/sucanon_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
<li><img src="images/sauces_sm.jpg" /></li>
</ul>
 
<script type="text/javascript">
init();
</script>
</body>
</html>

Open in new window

0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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

621 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