SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image scroller issue

    will appreciate the help.

    I have this code that scrolls image from left to right.
    the problem is that it scrolls from the left most part of the page to the right most part

    i want to contain th image within a table preferably at the center, but i want to be able to control the placement of the table and the size of the table.

    Can you include comments to the changes that i will need to make

    THANK

    CODE<begins>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <title>Image Scroller</title>
    <script type="text/javascript">
    var imgURLs = new Array(); //array to store the image urls
    /* * PUT YOUR IMAGES HERE * */
    imgURLs[0]="1.jpg";
    imgURLs[1]="2.jpg";
    imgURLs[2]="3.jpg";
    imgURLs[3]="4.jpg";
    imgURLs[4]="5.jpg";

    var imgs = new Array();

    var delay = 50; //tume in ms between change of position
    var move = 5; //how far does it move at once
    var imheight=100;
    var i=0;
    var wTrack=0;

    var go=false;

    function init() {
    var xDIV=document.getElementById("idiv");
    var xTR = document.getElementById("itr");
    var xTD = document.createElement("TD");
    var xIMG = document.createElement("IMG");
    xTD.appendChild(xIMG);
    xTR.appendChild(xTD);
    xTD.id="xtd"+i;
    xTD.setAttribute("id", "xtd"+i);
    xIMG.src = imgURLs[i%imgURLs.length];
    xIMG.height = imheight;
    i++;
    wTrack+=xIMG.width;
    if(wTrack<2*screen.width || i%imgURLs.length>0) setTimeout("init()", 100);
    else go=true;
    }

    function scroll() {
    if(go) {
    var xDIV=document.getElementById("idiv");
    var xTR=document.getElementById("itr");
    if(xDIV.offsetLeft<-xTR.firstChild.offsetWidth) {
    xDIV.style.left=(xDIV.style.left.substring(0, xDIV.style.left.indexOf("p"))-0+xTR.firstChild.offsetWidth)+"px";
    var tmpChild = xTR.firstChild;
    xTR.removeChild(xTR.firstChild);
    xTR.appendChild(tmpChild);
    }
    xDIV.style.left=(xDIV.style.left.substring(0, xDIV.style.left.indexOf("p"))-move)+"px";
    }
    setTimeout("scroll()", delay);
    }

    function preloadImages() {
    for(var i=0; i<imgURLs.length; i++) {
    imgs[i]=new Image();
    imgs[i].src=imgURLs[i];
    }
    }
    preloadImages();
    </script>
    </head>
    <body onload="init();scroll()">
    <div>
    <div id='idiv' style='position:absolute;top:100px;left:100px;right:-100px'>
    <table id='itbl' cellspacing=0 cellpadding=0>
    <tr id='itr'></tr>
    </table>
    </div>
    </div>
    <div id='main' style='position:absolute;top:220px;left:10px'>
    <p>This is the div inside which the rest of your content can go</p>
    </div>
    </body>
    </html>
    CODE<ends>

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not have the table containing the images reside within a positioned div with a fixed with and overflow set to auto?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It really is an easy to use cross-browser and standards-based solution.

    It will be very easy to take my autoscroll navigation which uses the same technique, and use it as an image gallery instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •