Hej,
Jeg har lidt problemer med at få min div til at scrolle op, den vil gerne scrolle ned.
Her er Jave scriptet:
// JavaScript Document
function scrollDown(){
topStr = $("#inner_div").css("top");
newTop = topStr.replace("px","")-2;
$("#inner_div").css({
"top": newTop,
});
}
function scrollUp(){
topStr = $("#inner_div").css("top");
newTop = topStr.replace("px","")+2;
$("#inner_div").css({
"top": newTop,
});
}
interval=0;
$(document).ready(function(){
$("#inner_div").css("top","1px");
$("#down").mousedown(function(){
interval = setInterval(scrollDown,9);
}).mouseup(function(){
clearInterval(interval);
});
$("#up").mousedown(function(){
interval = setInterval(scrollUp,9);
}).mouseup(function(){
clearInterval(interval);
});
});Her er html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scroll.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div id="outter_div" style="width:200px; height:200px; overflow:hidden;">
<div id="inner_div" style="width:inherit; position:relative;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a mattis felis. Ut molestie vehicula pretium. Vestibulum vel erat ac est dignissim imperdiet. Nulla non enim sit amet purus accumsan varius. Aenean blandit ullamcorper nibh, lacinia vehicula ipsum pretium et. Morbi nec odio ligula. Donec sit amet justo et urna porta mollis a vitae felis. Phasellus sed ante nibh, et vulputate dolor. In bibendum sapien eget quam interdum in tincidunt nulla pretium. Phasellus sit amet odio sapien. Nulla sapien justo, scelerisque a venenatis et, ultricies non dui. Pellentesque quis felis et sem volutpat egestas.
</p>
</div>
</div>
<div style="background-color:#006; width:50px; height:50px;" id="up"><p style="color:#FFF;">up</p></div>
<br>
<div style="background-color:#006; width:50px; height:50px;" id="down"><p style="color:#FFF">down</p></div>
</body>
</html>