Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    autoscroll image(s) from right to left edge of browser screen? (works in IE not FF?)

    hi everyone

    i wanted to make a simple splashpage with a rather wide image (its just one big image slapped together from smaller ones. i am lazy!) scrolling from right to left and taking up the entire width of the browser.

    here is what i have so far that works in IE but i dont really understand how to have it function in firefox as well??

    http://iblastoff.net/scroll

    in firefox, the image shows up but does not scroll. if you look at it in IE you'll see what i mean and want. i have to admit this script was a sample from the net a few YEARS ago so i guess it might be outdated. i've looked for other seemingly simple scripts but none of them seem to allow me to scroll the whole width of the screen? (they all ask me to input an actual width in pixels and that just messes it up for everyone not running the same resolution as i am) and i also want the image to ALREADY be on the screen and moving, whereas a lot of other scripts seem to make it slowly appear.

    i know im not supposed to post the entire script but i really dont know where to start looking? i just want some of my photo work to be online and don't have the time to learn a whole language. i am completely fine with some basic and intermediate html but javascript is beyond my skills at the moment. anyways thanks for looking!

    ps if you look at my page, there are actually three frames there. i dont think anyone uses frames anymore. but its what i know and if it works then meh!

    -meg

    script below
    -----
    <html>
    <head>
    <title>Megan Hostel</title>

    <script language="JavaScript">
    <!--
    window.onerror=null

    var TimerID = null;
    var timer = 0;
    var z = 2;
    var v = 3;

    var ver = 3
    bVer = parseInt(navigator.appVersion);
    if(bVer >= 4) ver = 4
    var ns = navigator.appName == "Netscape";
    var ie = navigator.appName == "MSIE";
    var pix = 4; // number of pixels to move per frame
    var rate = 30; // fps
    var ImgWidth = 1528; // width of whatever
    var time = 1528/rate;
    var again = - ImgWidth

    function tick() {
    if (ver ==3) return
    if (ns){

    document.Layer1.offset(-pix,0);
    document.Layer2.offset(-pix,0);

    if (document.Layer1.left <= again) document.Layer1.left = ImgWidth;
    if (document.Layer2.left <= again) document.Layer2.left = ImgWidth;
    }
    else {

    newpix = document.all["Layer1"].style.pixelLeft - pix;
    newpix2 = document.all["Layer2"].style.pixelLeft - pix;
    document.all["Layer1"].style.pixelLeft = newpix;
    document.all["Layer2"].style.pixelLeft = newpix2;

    if (document.all["Layer1"].style.pixelLeft <= again) document.all["Layer1"].style.pixelLeft = ImgWidth;
    if (document.all["Layer2"].style.pixelLeft <= again) document.all["Layer2"].style.pixelLeft = ImgWidth;

    }

    setTimeout('tick()', time);
    }

    //-->
    </script>
    </head>

    <body background="" bgcolor="#FFFFFF" marginheight="0" marginwidth="0" marginright="0"
    marginleft="0" topmargin="0" bottommargin="0" onLoad="tick()">

    <div align="left">

    <table border="0" cellpadding="0" cellspacing="0" columns="0">

    <tr>
    <td>
    <span id="Layer1" style="position:absolute; width:1528; height:125; z-index:2; left: 0px; top: 0px">
    <img src="splash2.gif" width="1528" height="125" border="0">
    </span>
    <span id="Layer2" style="position:absolute; width:1528; height:125; z-index:1; left: 1528; top: 0px">
    <img src="splash2.gif" width="1528" height="125" border="0">
    </span>
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    Last edited by meganclash; 07-09-2005 at 04:50 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Welcome

    Code:
    <html>
    <head>
    <title>Megan Hostel</title>
    
    <script language="JavaScript">
    <!--
    window.onerror=null
    
            var TimerID = null;
            var timer = 0;
            var z = 2;
            var v = 3;
    
    var pix = 4;           // number of pixels to move per frame
    var rate = 30;         // fps
    var ImgWidth = 1528;   // width of whatever
    var time = 1528/rate;
    var again = - ImgWidth
    
    function tick() {
    if (!document.getElementById) return
            newpix = parseInt(document.getElementById('Layer1').style.left) - pix+'px';
            newpix2 = parseInt(document.getElementById('Layer2').style.left) - pix+'px';
            document.getElementById('Layer1').style.left = newpix;
            document.getElementById('Layer2').style.left = newpix2;
    
            if (parseInt(document.getElementById('Layer1').style.left) <= again) document.getElementById('Layer1').style.left = ImgWidth+'px';
            if (parseInt(document.getElementById('Layer2').style.left) <= again) document.getElementById('Layer2').style.left = ImgWidth+'px';
    
    
            setTimeout('tick()', time);
    }
    
    //-->
    </script>
    </head>
    
    <body background="" bgcolor="#FFFFFF" marginheight="0" marginwidth="0" marginright="0"
     marginleft="0" topmargin="0" bottommargin="0" onLoad="tick()">
    
    <div align="left">
    
    <table border="0" cellpadding="0" cellspacing="0" columns="0">
    
       <tr>
    
       <td>
        <span id="Layer1" style="position:absolute; width:1528; height:125; z-index:2; left: 0px; top: 0px">
       <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="1528" height="125" border="0">
        </span>
        <span id="Layer2" style="position:absolute; width:1528; height:125; z-index:1; left: 1528; top: 0px">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="1528" height="125" border="0">
        </span>
       </td>
       </tr>
    </table>
    </div>
    
    </body>
    </html>

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there meganclash,

    and a warm welcome to these forums.

    you can achieve the effect with just four lines of script and a modicum of CSS.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>floating clouds</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         margin: 0px;
         padding:0px;
         background-color:#fff;
    }
    #scroller {
         width:100%;
         height:125px; 
         background:url(splash2.gif) repeat-x; 
    }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
      var speed=10;
    function scroller(num) {
    
         document.getElementById("scroller").style.backgroundPosition=num+"px 0px";
     
    setTimeout("scroller("+(num-1)+")",speed);     //use (num+1) to change direction.
    }
    
    //]]>
    </script>
    
    </head>
    <body onload="scroller(0)">
    
    <div id="scroller"></div> 
    
    </body>
    </html>
    coothead

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    coothead

    like your code

    but 95%+ still use IE

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there vwphillips,

    It works OK for me.
    I tested it in these browsers...
    • IE 6.02
    • Firefox 1.0.4
    • Mozilla 1.7
    • Netscape 8.0
    • Opera 8.01


    coothead

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    using IE6 ME 1.2gig the rendering cant cope, flickers like mad.

    the problem with IE changing background position has been reported on number of posts

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there vwphillips,

    well, that is a shame about ME.
    No problems with XP though.
    How does this simple script work in ME then?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>javascript marquee</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <base href="http://www.iblastoff.net/scroll/"/>
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background: #444;
         margin:0px;
         padding:0px;
     }
    #container {
         width: 100%;
         height: 125px;
         position: absolute;
         left: 0%;
         top: 100px;
         overflow: hidden;
         border-top: solid 1px #004;
         border-bottom: solid 1px #004;
     }
    #container img {
         position: absolute;
         width: 1528px;height:125px;
         border:0px;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
      var i = 0;
      var j=1528
      var speed = 25;
     
    function imgScroll() {
         document.getElementById("image0").style.left = i + "px";
         document.getElementById("image1").style.left = j + "px";     
      i--;
      j--;
    if( i< -1527) {
      i = 1528;
     }
    if( j< -1527) {
      j = 1528;
     }
      scroller=setTimeout("imgScroll()",speed);
    }
      onload = imgScroll;
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id = "container">
    
    <img  id="image0" src = "splash2.gif" alt = ""/>
    <img  id="image1" src = "splash2.gif" alt = ""/>
    
    </div>
    
    </body>
    </html>
    coothead

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Works as well as the code modification I posted earlierthat as is not using backgroundposition


  •  

    Posting Permissions

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