« New Tutorial - Error Output with Scriptaculous
Using an Image as a Submit Button with CSS »

New Scriptaculous 1.7.0 Beta Unveils Morph Effect

With the release of the new Scriptaculous 1.7.0 Beta, Thomas Fuchs has introduced a new effect, morph.  The syntax for this new feature is quite easy to grasp.  Simply call the function on the element you wish to morph.

$('my_element').morph();

You can also pass this function arguments to define CSS properties on the fly.

$('my_element').morph({fontSize: '12px', color: '#7F1123'});

Here is an example of the Scriptaculous morph function and how it can be used.

The code I used in my example was quite simple.  I set some default values in CSS for the element I was going to morph.  Then I created some anchor text, in which I tacked on a onclick behavior that called the morph() function.  This is what my markup looks like:

<div id="change_me">Watch me morph!  Click Below!</div>
<a href="#" onclick="$('change_me').morph({fontSize:'36px',color:'#7F1123'}); return false;">Click Here</a>

The magic is primarily done in defining the initial CSS values and passing your new ones to the function.  Pretty handy!

Note– using this method requires the newest beta release of Scriptaculous.  The download is available toward the bottom of this page on mir.aculo.us.  Direct download link.

Related Posts

  • Tutorial Examples
  • New Tutorial - Error Output with Scriptaculous
  • DHTML Yellow Fade Technique
  • Error Output With Scriptaculous
  • New Tutorial - Getting Ready for Web 2.0 Effects with Scriptaculous

    • This entry was posted on Saturday, January 6th, 2007 at 8:39 pm and is filed under CSS, JavaScript, Prototype, Scriptaculous.

    2 Responses to “New Scriptaculous 1.7.0 Beta Unveils Morph Effect”

    1. Discussion: Scriptaculous 1-7 beta 2 and Prototype 1-5 rc2 Compressed Says:
      February 8th, 2007 at 2:26 am

      [...] Re: Discussion: Scriptaculous 1-7 beta 2 and Prototype 1-5 rc2 Compressed The new release rocks! Check out how I quickly got up and running an example of the new morph effect My URL: http://www.ryboe.com [...]

    2. Darren Says:
      July 2nd, 2008 at 7:32 pm

      Why not use unobtrusive javascript and do it like this:

      
function showEvent() {
  $('change_me').morph('fontSize: 36px, color: #7F1123');  
}
document.observe('dom:loaded', function() {
  $('change_me').observe('click', showEvent.bindAsEventListener());
});

    Leave a Reply