Javascript scrolling div
2 naročnika
2 naročnika
Potrebujem pomoč pri Javascriptu za "skrolanje" div-a.
Koda je:
<h2>Blagovne znamke</h2>
<div class="brands_outer">
<a id="up" class="arrow" href="#up" title="pojdi višje"></a>
<div class="brands_holder">
<img src="bla1.jpg">
<img src="bla1.jpg">
<img src="bla1.jpg">
<img src="bla1.jpg">
</div>
<a id="down" class="arrow" href="#down" title="pojdi nižje"></a>
</div>
Želim, da bi z gumboma <a id="up/down" ... </a> scrollal po divu.
CSS pa je takšen:
...
.brandsouter {
height: 410px;
width:350px;
position:relative;
margin: 5px 0px 5px 0px;
overflow:hidden;
}
.brandsholder {
padding: 36px 5px 36px 5px;
position:relative;
overflow:hidden;
}
...
Sem bolj na suhem na tem področju, tako da bi se prilegla velika pomoč :)
2 odgovora
Hvala, sem že našel en lep primer, ga prilagam tukaj
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcTO;
function Scroll(id,dis,pos){
var obj=document.getElementById(id)
obj.scrollTop=obj.scrollTop+dis;
if (pos){obj.scrollTop=pos; }
else {zxcTO=setTimeout( function(){ Scroll(id,dis); },10); }
}
//-->
</script>
</head>
<body>
<input type="button" name="" value="Sroll Up" onmouseover="Scroll('Tst1',-1);" onmouseout="clearTimeout(zxcTO);" >
<input type="button" name="" value="Sroll Down" onmouseover="Scroll('Tst1',1);" onmouseout="clearTimeout(zxcTO);" >
<input type="button" name="" value="Sroll to 50" onmouseover="Scroll('Tst1',0,50);" onmouseout="clearTimeout(zxcTO);" >
<input type="button" name="" value="Sroll to 75" onmouseover="Scroll('Tst1',0,75);" onmouseout="clearTimeout(zxcTO);" >
<div id="Tst1" style="position:relative;overflow:auto;width:200px;height:100px;border:solid black 1px;" >
0 Line<br>
1 Line<br>
2 Line<br>
3 Line<br>
4 Line<br>
5 Line<br>
6 Line<br>
7 Line<br>
8 Line<br>
9 Line<br>
</div>
</body>
</html>