Yeah, basically I have this:
Effect.ScrollTo("bottom", { duration: 5.0 });
So what I want is to stop this effect while it's scrolling whenever I want to.
Any help?
views:
974answers:
2
+2
A:
var scrollEffect = Effect.ScrollTo("bottom", { duration: 5.0 });
...
scrollEffect.cancel();
This code below works perfectly for me:
<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body { font-size: 30px; }
#destination { margin-top: 1400px; }
#start { position: fixed; top: 10px; left: 20px;}
#stop { position: fixed; top: 50px; left: 20px;}
</style>
<script type="text/javascript" charset="utf-8">
function startEffect() {
scrollEffect = Effect.ScrollTo("destination", { duration: 8.0 }); return false;
}
function stopEffect() {
scrollEffect.cancel(); return false;
}
</script>
</head>
<body>
<a id="start" href="#" onclick="return startEffect();">Start Effect</a>
<a id="stop" href="#" onclick="return stopEffect();">Stop Effect</a>
<p id="destination">Scroll Destination</p>
</body>
</html>
Tyson
2009-03-13 22:24:23
@Tyson - Well, it seems to work, but not the way I wanted. Your solution makes me go back to where the scroll started, and what I want is to have the scroll stop where it is. Thanks anyways :)
a2h
2009-03-13 22:40:27
According to the docs, it should "stop the effect as is". http://wiki.github.com/madrobby/scriptaculous/core-effects
Tyson
2009-03-14 01:28:50
Hmm, strange. Are you using Firefox 3?
a2h
2009-03-14 03:52:21
It works in Safari 4 and Firefox 3 for me.
Tyson
2009-03-14 04:41:41
Well, it works by itself, but not when integrated into my JavaScript. I could swear it is almost the same as your script, except it doesn't have return false, and it also has other code.
a2h
2009-03-14 04:45:24
Ah! Well, you should post that other code. :)
Tyson
2009-03-14 05:30:55
Well, you can see the working code below... at least, an excerpt :P
a2h
2009-03-14 06:48:37
this is cool! really!
nes1983
2009-05-27 19:32:56
A:
What I currently have working currently is having a div as follows:
<div id="pausepos" style="position:absolute;"></div>
Then having the JavaScript cancel the scrolling and move it back to where the original position was:
fallingPosTempArr = $("thetop").viewportOffset();
fallingPosTemp = -1*fallingPosTempArr[1];
$("pausepos").setStyle({
"top" : fallingPosTemp + 'px'
});
scrollEffect.cancel();
setTimeout(function () { Effect.ScrollTo("pausepos", { duration: 0.0 }); }, 10);
It works, but on slower browsers you can see how the page jumps back to the top and then back again.
a2h
2009-03-14 04:47:45