Solved

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

Posted on 2004-09-22
8
1,078 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

830 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