PDA

View Full Version : Question about horizontal scrolling

kippie
11-19-2004, 03:27 AM
In the HTML below I use a script for horizontal image scrolling. Everything works fine, but the only thing is that now it takes some time before the scrolling images appear on the screen. And I cannot find anyway to change that. I thougth that I could change the value of the left position of the layer container (now set to 0), but if I change that there seems to be no difference. Is there anyone who could help me with this timing?

This is the HTML I have so far:
<!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>Image Scroller</title>
<base href="http://www.inspiration-company.nl/" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

body {
background: #ffffff;
overflow: hidden;
}

#container {




width:3600px; /*total images width */
display: none;
position: absolute;
top: 120px;
left: 0px;
border: solid 0px #6699cc;
}

.images {
float:left;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var x = screen.width;
var w = 3550; /*total images width */
var i = 0;
var speed = 4;

function imageScroll() {
document.getElementById("container").style.display = "block";
document.getElementById("container").style.left = (x - i) + "px";
i++;
if(i >(x + w)) {
i = 0;
}
setTimeout("imageScroll()",speed);
}
onload = imageScroll;

//]]>
</script>

</head>
<body>

<div id = "container">
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
<img class = "images" src = "fredentedopt.jpg" alt = ""/>
<img class = "images" src = "koordanserkleinopt.jpg" alt = ""/>
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
</div>

</body>
</html>
coothead
11-19-2004, 08:45 AM
Hi there kippie,

this delay would be due to fact that the scroll function will not begin until the images are loaded.

3550px of jpg sounds like a long loading time :supereek:
kippie
11-19-2004, 06:36 PM
Hi Coothead,

Thanks for your reply. May be I was not clear with my question. As the code is now the images - when preloaded correctly - appear immediately on the utter right hand side of the screen if the screen is set at full size. But would it be possible to let it start a bit more to the left or for example halfway (horizontally) of the screen?

Kippie
coothead
11-19-2004, 07:27 PM
Hi there kippy,

you can play around with it like this...
<!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>Image Scroller</title>
<base href="http://www.inspiration-company.nl/" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

body {
background: #ffffff;

}
#middle {
position:absolute;
left:400px;
top:120px;
width:250px;
height:300px;
overflow: hidden;
}
#container {
width:788px; /*total images width */
display: none;
position: absolute;
top: 0px;
border: solid 0px #6699cc;
}

.images {
float:left;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var x = 250;
var w = 788; /*total images width */
var i = 0;
var speed = 4;

function imageScroll() {
document.getElementById("container").style.display = "block";
document.getElementById("container").style.left = (x - i) + "px";
i++;
if(i >(x + w)) {
i = 0;
}
setTimeout("imageScroll()",speed);
}
onload = imageScroll;

//]]>
</script>

</head>
<body>
<div id ="middle">
<div id = "container">
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
<img class = "images" src = "fredentedopt.jpg" alt = ""/>
<img class = "images" src = "koordanserkleinopt.jpg" alt = ""/>
<img class = "images" src = "blindpianoopt.jpg" alt = ""/>
</div>
</div>

</body>
</html>
...but you may find something like this a better option...
<!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>Image Scroller Two</title>
<base href="http://coothead.homestead.com/files/" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

body {
background: #336699;
}

#container {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
top: 50px;
margin-left: -150px;
overflow: hidden;
border: inset 6px #6699cc;
}

#container img {
position: absolute;
width: 100px;
border:0px;
}


/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var i = 0;
var j = 100;
var k = 200;
var l = 300;
var speed = 10;

function imgScroll() {
document.getElementById("image0").style.left = i + "px";
document.getElementById("image1").style.left = j + "px";
document.getElementById("image2").style.left = k + "px";
document.getElementById("image3").style.left = l + "px";
i--;
j--;
k--;
l--;
if( i< - 99) {
i = 300;
}
if(j < -99) {
j = 300;
}
if(k < -99) {
k = 300;
}
if(l < -99) {
l = 300;
}
scroller=setTimeout("imgScroll()",speed);
}

function stopScroll(el) {
clearTimeout(scroller);
el.onmouseout=function() {
imgScroll();
}
}

onload = imgScroll;

//]]>
</script>

</head>
<body>

<div id = "container">

<a href="http://google.com">
<img id="image0" src = "anim.gif" alt = ""title = "google.com"
onmouseover = "stopScroll(this);return false"/>
</a>

<a href="http://yahoo.com">
<img id="image1" src = "anim1.gif" alt = ""title = "yahoo.com"
onmouseover = "stopScroll(this);return false"/>
</a>

<a href="http://lycos.com">
<img id="image2" src = "anim2.gif" alt = "" title = "lycos.com"
onmouseover = "stopScroll(this);return false"/>
</a>

<a href="http://www.w3schools.com">
<img id="image3" src = "anim3.gif" alt = "" title = "w3schools.com"
onmouseover = "stopScroll(this);return false"/>
</a>

</div>

</body>
</html>
...which gives seamless continuous scrolling :cool:
senshi
11-19-2004, 09:27 PM
not really acceptable to hoz scroll a site, that is according to a set of basic guidelines on basic web design, so it is best avoided when ever possible, where you can size images to a small size that will expand to full screen if desired.
kippie
11-20-2004, 04:05 AM
Thanks Coothead!

Really great. Exactly what I need. I made some combination of your first and second code and it works fine!
Thanks again,

Kippie