Slide effect - change dinamically from to

Question

Hi,
i try to build a slide effect (v1.5) for change dinamically
the options 'from' and 'to', the scope is obtain a graphic
interface for domotics application (eg. open sliding-windows to
25%)
i used this sample code, but the value in the effect not
change:
<input type="button" onclick="slide.options.to='25%';"
value="Set To 25%">
<input type="button" onclick="slide.options.to='50%';"
value="Set To 50%">
<input type="button" onclick="slide.options.to='75%';"
value="Set To 75%">
<input type="button" onclick="slide.options.to='100%';"
value="Set To 100%">
<input type="button" onclick="alert(slide.options.to);"
value="CHECK">
<input type="button" onclick="slide.start();"
value="START">
<div id="slidingWindows">
<div>
<div>img src="images/window.jpg" alt="" border="0"
/></div>
</div>
</div>
<script type="text/javascript">
var slide = new Spry.Effect.Slide('slidingWindows',
{duration: 2000, from: '0%', to: '25%', toggle: false,
scaleContent:true});
</script>
Thanks!

Answer 1

Hello,
The percent values are translated in pixel values when the
effect is instantiated. The result is cached and later used in each
of the animators. If you manually set a new value the effect will
ignore those values.
Your problem is a little bit more complicated. You'll have to
create a more complex script that will instantiate on the fly a new
effect for each button when that button is clicked. Because when
you instantiate an effect another effect it is possible to have run
the percent value will be considered from the current size and not
from the old original size. In this situation we'll have to also
compute manually before effect instantiation the pixel value
against the maximum one:
<input type="button" onclick="slideIt('25%');" value="Set
To 25%">
<input type="button" onclick="slideIt('50%');" value="Set
To 50%">
<input type="button" onclick="slideIt('75%');" value="Set
To 75%">
<input type="button" onclick="slideIt('100%');" value="Set
To 100%">
<input type="button" onclick="alert(slide.options.to);"
value="CHECK">
<input type="button" onclick="slide.start();"
value="START">
<div id="slidingWindows">
<div>
<div><img src="images/window.jpg" alt="" border="0"
/></div>
</div>
</div>
<script type="text/javascript">
function slideIt(to){
var percent = parseInt(to, 10);
// 300 is a random chose value.
var pixels = to * 300 / 100;
slide = new Spry.Effect.Slide('slidingWindows', {duration:
2000, from: '0px', to: pixels + 'px', toggle: false, scaleContent:
true});
// the default value is 25%
slideIt('25%');
</script>
Regards,
Cristian