Super.. det var lige det jeg søgte.
Men jeg har et problem. Jeg fandt ud af at 20 af gangen er lige i overkanten så har jeg sat den ned til 3. Problemet er bare at den så scroller for meget.
Jeg har prøvet at ændre det, men kan ikke få det til at passe.
Derudover vil jeg gerne have at der ikke er mellemrum "kasserne".
koden ser nu sådan ud:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Text scroll med JavaScript</title>
<style>
#encFilmMain
{
width:200px; /* Max widht of the container */
background-color:#98c23c;
}
#encFilm
{
height:180px; /* Max height of the container */
overflow:hidden;
text-align: center;
}
#encScrollBarTop a, #encScrollBarBottom a
{
line-height:20px;
padding:2px;
color:#fff;
display:block;
text-decoration:none;
}
#encNav
{
position:relative;
color:#FFF;
top:0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
p {
padding-top: 5px;
padding-bottom: 5px;
background-color:#98c23c;
}
</style>
<script type="text/javascript">
var gTop=0;
var gIncVal=0;
var timeOutValue=80;
function scrollMe(arg)
{
var objEncNav=document.getElementById('encNav');
var scrollAmount=390;
var objEncNavHeight=parseInt(objEncNav.offsetHeight);
var objEncNavTop=objEncNav.style.top;
var barHeight=390;
if(!objEncNavTop)
objEncNavTop=0;
else
objEncNavTop=objEncNavTop.substring(0,objEncNavTop.length-2);
if(arg>0)
{
if(objEncNavTop>=0 || objEncNavTop>(-(objEncNavHeight-(barHeight+scrollAmount))))
{
incrementValue=scrollAmount;
}
else if(objEncNavTop<(-(objEncNavHeight-(barHeight+scrollAmount))))
{
incrementValue=(objEncNavHeight-barHeight)+parseInt(objEncNavTop);
}
else
{
incrementValue=0;
}
encSmoothScroll("minus", parseInt(objEncNavTop), parseInt(incrementValue));
}
else
{
if(objEncNavTop<0 && ((parseInt(objEncNavTop)+scrollAmount) < 0))
{
incrementValue=scrollAmount;
}
else
{
incrementValue=-objEncNavTop-0;
}
encSmoothScroll("plus", parseInt(objEncNavTop), parseInt(incrementValue));
}
}
function encSmoothScroll(dir, currentVal, incValue)
{
gTop=currentVal;
gIncVal=incValue;
encScrollBy(dir, 0)
}
function encScrollBy(dir, val)
{
if(val<gIncVal)
{
var tmpInc;
if((gIncVal-val)>1)
{
tmpInc=Math.ceil((gIncVal-val)/10);
if(tmpInc <1)
tmpInc=1;
}
else
{
tmpInc=gIncVal-val;
}
val+=tmpInc;
var objEncNav=document.getElementById('encNav');
if(dir=="plus")
{
objEncNav.style.top=gTop+val+"px";
}
else if(dir=="minus")
{
objEncNav.style.top=gTop-val+"px";
}
var t=setTimeout("encScrollBy('"+dir+"', "+val+");", timeOutValue);
}
else
{
clearTimeout(t);
}
}
</script>
</head>
<body>
<div id="encFilmMain">
<a href="#" onClick="scrollMe(-1); return false;">Vis de 5 forrige</a>
<div id="encFilm">
<div id="encNav">
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Jyllinge</strong><br>
22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Hundested</strong><br>
22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
<p onmouseover="this.style.backgroundColor='#9C3';" onmouseout="this.style.backgroundColor='#98c23c';">
<strong>Ryvangen</strong><br>22 juni - 1 juli 2010<br></p>
</div>
</div>
<a href="#" onClick="scrollMe(1); return false;">Vis de 5 næste</a>
</div>
</body>
</html>
