Solved

seamless scrolling of images using javascript - cyclic scrolling from right to left

Posted on 2004-09-22
8
1,073 Views
Last Modified: 2012-08-13
http://www.cat45.com/jserror/top3.html

Please click on view source to view the javascript

You will see 3 images img1 img2 and img3 scrolling from right to left

what I want to achieve is immediately after img3...img1 should appear

and this should scroll in a cyclic fashion

i.e img1 img2 img3 img1 img2 img3 img1 img2 img3 img1 etc

Please ask me if you need more explanation of the problem

Also the number of images are not fixed it maybe 3 sometimes 5 sometimes or even 10 sometimes..the whole javascript will be output from a php script dynamically

Thanks
0
Comment
Question by:christopher sagayam
8 Comments
 
LVL 8

Expert Comment

by:a_twixt_in_the_tale
ID: 12134632
sort like... this

<html>
<body>
<MARQUEE>
<img height=100 width=100 src=img1.jpg>
<img height=100 width=100 src=img2.jpg>
<img height=100 width=100 src=img3.jpg>
<img height=100 width=100 src=img1.jpg>
<img height=100 width=100 src=img2.jpg>
<img height=100 width=100 src=img3.jpg>
<img height=100 width=100 src=img1.jpg>
<img height=100 width=100 src=img2.jpg>
<img height=100 width=100 src=img3.jpg>
</MARQUEE>
</body>
</html>

i know it looks silly but the logic is this b/w the marquee write out ur html for img showing (how many u want :)) and just ensure that u do it say 5 times (just to ensure that 2048 - max screen width by (width of ur pic * num of pics) should be < 1)

:)
Don
0
 
LVL 6

Expert Comment

by:viola123
ID: 12139020
a_twixt_in_the_tale's solution certainly works, however, it works only in IE.

MARQUEE is quite annoying in netscape, just like iframe.

could we try to find a pure javascript solution for chris18?that could be more robust

i will be working on a walk-around

cheers
viola
0
 
LVL 6

Author Comment

by:christopher sagayam
ID: 12139833
yes I would really appreciate a pure javascript solution indeed..Thanks
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 3

Accepted Solution

by:
hemebond earned 250 total points
ID: 12149050
What a coincidence, I just wrote this today:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
          <title>Image Scrolling</title>
            <style type="text/css">
                  ul      {
                        width:480px;
                        height:80px;
                        padding:0;
                        list-style:none;
                        position:relative;
                        overflow:hidden;
                  }
                  ul li      {
                        position:absolute;
                        -moz-opacity:0.5;
                  }
                  ul li:hover      {
                        -moz-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");
                        list = slideshow.getElementsByTagName("li");
                        img = slideshow.getElementsByTagName("img");

                        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/1.jpg"></li>
                  <li><img src="/images/2.jpg"></li>
                  <li><img src="/images/3.jpg"></li>
                  <li><img src="/images/4.jpg"></li>
                  <li><img src="/images/5.jpg"></li>
            </ul>
      </body>
</html>
0
 
LVL 6

Author Comment

by:christopher sagayam
ID: 12149457
Thanks for the code

can you please show me how to make it scroll smoothly like

http://www.cat45.com/jserror/example1.html

I have uploaded your code to

http://www.cat45.com/jserror/notworking.html

what changes to your code will make it display like a scrolling effect ?
0
 
LVL 3

Expert Comment

by:hemebond
ID: 12157051
Well, that first example doesn't work at all for me. If by "smoothly" you mean without the images popping up at the end, you need enough images to fill the whole space. The images I tested, when lined up side-by-side, spanned 600px. Each was 120px. So the largest area it could fill was 480px (600px - 120px). You need to do this. Also, there is some CSS in there that makes images become opaque when you mouse-over them. You should remove that.
0
 
LVL 6

Author Comment

by:christopher sagayam
ID: 12157387
So there is no way to have a smooth scrolling effect without the images popping up one by one if the number of images are less than 5 ?
0
 
LVL 3

Expert Comment

by:hemebond
ID: 12165320
Yes, you either make the area smaller, or you repeat the images as much as necessary to fill the area.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

773 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