script.aculo.us 1.7.0 beta 2

This new beta of the upcoming script.aculo.us 1.7 release adds support for using the morph effects with style definitions in CSS classes:

So, first define a CSS class:

.warning {
  font-size: 15px;
  color: #f00;
  border: 4px soild #f00;
}

Then use it with .morph():

$('mydiv').morph('warning');

Thanks to Tobie Langel for this niceness. Additionally, next to the string based style strings, you can also use the style definitions you know from .setStyle() in Prototype:

$('mydiv').morph({fontSize:'20px',color:'#abcdef'});

Effects should now also play faster, provided your browser and computer is fast enough, as the maximum frames per second setting is now at 60fps vs. 25fps in earlier releases.

Also, some issues are addressed in the included new beta of Prototype, mainly Opera 9 issues and a using Safari with HTTP authorization; plus of course lots of other fixes and new cool stuff.

Download script.aculo.us 1.7.0 beta 2 here or grab it from SVN.

Oh yes, and happy holidays to you—have fun (maybe with playing around with this?) and be sure to report issues. Oh yes, and more stuff is coming… 🙂

(3).times(function(){ alert(‘Ho!’) });

Ruby on Rails 1.2 release candidate

The Ruby on Rails 1.2 Release Candidate 1 is out now!

Next to all sorts of cool new stuff within the framework, It also includes all the latest Prototype and script.aculo.us features (both Prototype 1.5.0_rc2 and script.aculo.us 1.7.0 beta 1 is part of it). So be sure to get a glimpse of the future right now… 🙂

script.aculo.us morph effects

script.aculo.us 1.7 beta 1 is out now (see below!)—and the big new thing is Effect.Morph which allows for CSS style-based effects, and its companion, the Effect.Transform shortcut to set up complex animations in a snap (while I’ve been thinking of adding this for some time now, there’s some inspiration coming from Bernie’s Better Animation Class).

Let’s look at how Effect.Morph is used:

1
2
3

new Effect.Morph('error_message',{
  style:'border-width:3px; font-size:15pt; color:#f00'
});

This will start an effect to morph the div element with id error_message smoothly from whatever border-width currently is set, whatever font-size is set (note the currently set font-size must have the same unit, in this case pt), and whatever color is set to the given new values. Because Effect.Morph queries the original values with Prototype’s Element.getStyle API, it doesn’t matter whether these styles are set inline or in an external stylesheet definition. Of course the effect supports all usual options, like duration or transition.

It internally uses a new addition to the String API in script.aculo.us 1.7, that is String.prototype.parseStyle. This method is smart about how to parse CSS style properties correctly. For example, it will automatically parse a ‘border-width’ property to be split up in ‘border-left-width’, ‘border-top-width’ and so on. This allows you to use styles freely as you do in everyday CSS files.

But! Prototype and script.aculo.us are about making development easier, having less stuff to type and think about, and handle common cases with the utmost niceness:

$('error_message').morph('font-size:15pt; color:#f00');

.morph() ia automatically available for all elements. It takes an optional second argument, an object that’s given to the generated Effect.Morph. You can use this to chain morph effects, like this:

$('blah').morph('background:#800').morph('background:#fff',{delay:3});

Effect.Transform is a helper that doesn’t generate a normal effect, but stores a more complex set of Effect.Morph effects to be generated when called upon.

Let’s see an example of how this works:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// define the Effect.Transform and store for later
var transformation = new Effect.Transform([
  { 'div.morphing': // divs with CSS class 'morphing'
      'font-size:20px;padding-left:40em;opacity:0.5' },
  { 'error_message': // or '#error_message'
      'width:480px;border-width:10px;' + 
      'border-right-width:20px;' +
      'margin:20px;margin-bottom:-20px;' +
      'font-size:30px;' +
      'background:#954' }
],{ duration: 1.3 });

// sometime later
transformation.play();

Effect.Transform takes an array of tracks, which are defined in a ‘identifier or CSS selector’: ‘style’ syntax, and generates Effect.Morph effects when you call the play() method. You can also add additional tracks later on, which the addTracks() method.

Notably, you can use DOM object ids or CSS selectors to choose which elements should be acted upon—which means that at any given time you call play(), Effect.Transform will automatically choose the correct elements for the effects, given on these rules. Also, you can an Effect.Transform when none of the referenced elements are already rendered—as long as they are there when you actually call play().

If you need a complex one-shot effect, you can also do this:

1
2
3
4
5
6
7
8
9

// one-shot transformation
// shrink and fade info messages, 
// highlight error messages
new Effect.Transform([
  { '#messages li.info':
      'font-size:1px;height:0px;opacity:0' },
  { '#messages li.error':
      'font-size:12px;background:#fee;color:#f00' }
],{ duration: 1.3 }).play();

The 1.7 beta version also contains the newest Prototype 1.5.0_rc2 library, fresh from SVN, which fixes lots of things here and there.

With your help (beta testing gives good karma!) we can hopefully sort any bugs out and have this released soon (maybe as an Xmas present?)!

So, get started by downloading from SVN, or use this link to get 1.7.0 beta 1. If you use Ruby on Rails, be sure to grab edge Rails, or the 1-2-prerelease branch, which both include the beta.

script.aculo.us 1.7 beta demos

Go to the main blog entry on the script.aculo.us 1.7 beta.

Element.morph

How easy is that?

$('morph_example').morph('background:#080;color:#fff');

Element.morph demo

Effect.Morph

Effect.Morph

1
2
3
4
5
6
7
8
9

new Effect.Morph('error_message',{
  style:'background:#f00; color:#fff;'+
    'border: 20px solid #f88; font-size:2em',
  duration:0.8
});

// same thing with Element morph is
$('error_message').morph('background:#f00; color:#fff;'+
  'border: 20px solid #f88; font-size:2em',{duration:0.8});

Effect.Morph demo
Reset

Effect.Transform

• First info message
• Second info message
• First error message
• Third info message
• Second error message

1
2
3
4
5
6

new Effect.Transform([
  { "#messages li.info":
      "font-size:1px;line-height:0px;height:0px;opacity:0;padding:0px" },
  { "#messages li.error":
      "font-size:15px;background:#f00;color:#fff" }
],{ duration: 0.6 }).play();

Run Effect.Transform one-shot demo

Parlez-vous Web 2.0?

For all you french-speaking developers out there, there’s a great new book available from Christophe Porteneuve, which basically walks you through all things Web 2.0, including huge chapters on Prototype and script.aculo.us.

The book, Bien développer pour le Web 2.0 is available right now, and really holds tons of stuff on the libraries we love, including not only describing the raw functionality, but also how to understand Prototypish code and write it yourself.

It doesn’t stop there however—you’ll also find info on RSS, REST, XHTML, CSS and other nice abbreviations.

Over the last months, Christophe has been very active in the Prototype/script.aculo.us community with tirelessly helping out on the Rails-Spinoffs Google Group, and submitting patches for Prototype.

Firebug reloaded

Firebug, the DOM messin’ around and JavaScript debugging tool everyone loves, is nearing it’s 1.0 release.

New and improved features include:

• Live HTML and CSS editing
• CSS metrics
• Network activity monitor
• JavaScript profiling
• Pimped error messages
• Flexible layout (can run in its own window!)

It’s currently in closed beta, but will hopefully arrive soon.

Check out the all-new firebug site, www.getfirebug.com.

Two thumbs up for Mr. Hewitt and easing the pain the web development can be. Maybe it can be fun after all…? 🙂

JavaScript particle engine

Jason Harwig provides for some fun for the weekend. Cheers!

script.aculo.us 1.6.5

I’ve just pushed script.aculo.us 1.6.5 for your download pleasure. It’s a maintenance release that adds a few tweaks here and there—read on!

• Update to Prototype 1.5.0_rc1 revision [5462]

• Support the HTML ‘for’ attribute in Builder by using ‘htmlFor’, fixes #6472 [gjones, tdd]

var node = Builder.node('label', { htmlFor: 'myinput' });

• Add support to run a specific failing unit test by clicking on the corresponding test result, fixes #6290 [leeo]

• Add modifier key support to Event.simulateMouse, fixes #6391 [savetheclocktower]

• Add new ‘with-last’ queue position option to queue effects to occur in parallel with the last effect to start in the queue

• Add new special core effect Effect.Event for one-shot events that follow timelines defined by effect queues

1
2
3

new Effect.Event({ afterFinish:function(){
  // do some code here
}, position: 'end' });

• Fix an possible crash of IE on Effect.SlideUp, fixes #3192 [thx nel]

• Add Builder.build() to create nodes from strings containing HTML, [DHH]

var node = Builder.build("<p>this is <b>neat!</b></p>");

• Add a pulses parameter to Effect.Pulsate to control the amount of pulses, fixes #6245 [leeo]

  For example, this will pulsate twice (if the option is not given, it defaults to five pulses):

Effect.Pulsate('d8', {pulses: 2});

• Fix an issue with clicking on a slider span resulting in an exception, fixes #4707 [thx sergeykojin]

• Fix an issue with Draggables when no options are supplied, fixes #6045 [thx tdd]

This should be the last release before Ruby on Rails 1.2 comes out—the next thing will be script.aculo.us 1.7! Lots of good and cool patches are waiting for their addition, and should make it into the 1.7 release.

As always, kudos to the community for supplying patches, bug reports and tests—keep it coming!

Marvelous Mephisto Move

mir.aculo.us now runs on the coolest blogging software ever. Expect a few rough edges here and there, but basically mir.aculo.us continues business as usual.

Kudos to technoweenie for the hard work on this beautiful piece of railsy goodness.

P.S. I didn’t migrate the comments as they where totally spam-ridden. Mephisto has spam protection built-in, so (hopefully) spam will be less of a problem.

P.P.S. The offical Mephisto 0.7 release was announced just moments ago, rock on!

Prototype documentation call

Prototype needs your documentation skills—a new super-cool documentation site is in the making, and it needs your help.

Get on board already!