I'm trying to use the Morph effect to resize a richPanel. Currently I'm using a javascript function to keep track of the width of the panel, then resizing accordingly by saying:
document.getElementById('panelId').style.width = newSize;
This works fine, but I'd like to get the smooth resize using morph. I know you can morph using a javascript like this:
<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
<ul>
<li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
<li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
</ul>
I can't figure out a way to make a similar call from within a javascript function. The user will be able to click something several times to keep making it smaller, so I need to be able to track the current width.
Any ideas?
Here's all the documentation I can find on the morph effect:
http://wiki.github.com/madrobby/scriptaculous/effect-morph
