Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2004-09-22
8
Medium Priority
?
1,099 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 3

Accepted Solution

by:
hemebond earned 1000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

721 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