Solved

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

Posted on 2004-09-22
8
1,071 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

861 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

23 Experts available now in Live!

Get 1:1 Help Now