...
PDA

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

meganclash
07-09-2005, 03:47 AM
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>
vwphillips
07-09-2005, 06:57 AM
Welcome



<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>
coothead
07-09-2005, 10:02 AM
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.
<!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
vwphillips
07-10-2005, 11:44 AM
coothead

like your code

but 95%+ still use IE :(
coothead
07-10-2005, 11:55 AM
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
vwphillips
07-10-2005, 12:58 PM
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
coothead
07-10-2005, 01:34 PM
Hi there vwphillips,

well, that is a shame about ME. :(
No problems with XP though. :)
How does this simple script work in ME then?
<!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
vwphillips
07-10-2005, 02:36 PM
Works as well as the code modification I posted earlierthat as is not using backgroundposition

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum