Position af div
HejsaJeg skal kunne scrolle tekst op og ned ved at klikke på to knapper.
Jeg vil ikke have at teksten forsvinder op og ud / ned og ud af den div den vises i. Jeg har en ide om at jeg skal sammenligne div'ens position og derved regne ud om man kan scrolle videre.
Jeg kan sgu ikke få den drejet...
Har nogen en ide?
Se live version af koden her:
http://elsker-med-kokken.dk/animate/
<style>
div {
position:absolute;
background-color:#abc;
left: 10px;
right: 10 px;
width: 150px;
float: left;
height: 300px;
}
span.block {
position:absolute;
background-color:#abc;
left: 10px;
right: 10 px;
width: 150px;
float: left;
}
.container{
position:absolute;
background-color:#abc;
top: 0px;
width: 200px;
float: left;
height:300px;
overflow:hidden;
}
#knapper{
position:absolute;
top:310px;
}
p{
margin-left:10px;
}
#result{
position:absolute;
top:340px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span id="result"></span>
<span id="knapper"> <button id="right">«</button> <button id="left">»</button></span>
<div class=container>
<span class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.
Proin scelerisque. Nulla in mi. Integer ac leo. Nunc urna ligula, gravida a, pretium vitae, bibendum nec, ante. Aliquam ullamcorper iaculis lectus. Sed vel dui. Etiam lacinia risus vitae lacus. Aliquam elementum imperdiet turpis. In id metus. Mauris eu nisl. Nam pharetra nisi nec enim. Nulla aliquam, tellus sed laoreet blandit, eros urna vehicula lectus, et vulputate mauris arcu ut arcu. Praesent eros metus, accumsan a, malesuada et, commodo vel, nulla. Aliquam sagittis auctor sapien. Morbi a nibh. Nullam non metus. Quisque tellus lorem, pellentesque sit amet, blandit ac, nonummy eget, augue.</span>
</div>
<span class="vaerdi"></span>
<script>
$("#right").click(function(){
$(".block").animate({"top": "+=140px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"top": "-=140px"}, "slow");
});
$("button").click(function (e) {
var offset = $("span.block").position();
e.stopPropagation();
$("#result").text(" coords ( " + offset.left + ", " +
offset.top + " )");
});
</script>
