Solved

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

Posted on 2004-09-22
8
1,068 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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now