Helping out our CMS group today I hacked out a new little widget class called “Confirmer” that handles notifying the user when something they’ve done on the page requires some sort of notice. An auto-save, or the failure to auto-save, or any other sort of message.

It’s designed to be unobtrusive so it doesn’t annoy the user too much if it happens a lot. You can have the prompt inline in the page or floating over it. The message just fades in and then back out. It comes with default styles that can easily be overridden, the message displayed can be changed every time you call it, and its easy to position it relative to an element or at the edge of the screen.

Quick example:

new Confirmer().prompt(); //watch the upper right of your screen

More examples and details in the wikitorial.

Via Ajaxian is this post revising the age-old window.onload problem. I tried to write a dom polling method that would re-evaluate the dom every few milliseconds maybe 3 or 4 months ago but got distracted. Here’s the work of smarter and less easily distracted people than I, and it’s worth reading (even if you skip to the end). Maybe we’ll work this into Mootools.

Peter Michaux has written a detailed post on the window.onload problem:

The goal of unobtrusive JavaScript programming it to separate the JavaScript behavior from from the HTML content and is analogous to the goal of unobtrusive CSS design to separate the CSS presentation from the HTML content. Separation of presentation and content has been possible for years but there is one wrinkle standing in the way of completely separating the behavior. This article is about previously suggested techniques to enable this separation, their problems and a new option that combines the strengths of the current techniques with an extra bonus into a new robust solution.

Read the rest of this entry »

Here’s a nice little extension I found on the mootools forums. It let’s you assign an action to any element when the element has focused and the user clicks a key. I haven’t played around with it yet, but it’s super small and looks useful for form inputs and whatnot. Credit goes to BlackMac. Read the rest of this entry »

I have several classes that I’ve written for use with Mootools that I’ll be posting about soon. I thought I’d go ahead and point to this great little slider widget over at lenhatanh.pebox:

I know that Valerio over at mootools is planning a plugin repository for things like this, which I think will really help move that framework forward. In the mean time, I’ll probably take things like this and move them into our own global framework after testing them out so that developers here can make use of them.

I just happened upon event:Selectors. It’s very similar to Behaviour.js (the author’s spelling, not mine) in most respects, though its much smaller (72 lines / ~2k) and has some nice added functionality using Prototype shortcuts (Behaviour is stand-alone and duplicates a lot of Prototype stuff and is, therefore, larger).

Basic usage:

var Rules = {
   '#icons a:mouseover': function(element) {
     var app = element.id;
     new Effect.BlindDown(app + '-content', {queue: 'end', duration: 0.2});
   },
 
   '#icons a:mouseout': function(element) {
     var app = element.id;
     new Effect.BlindUp(app + '-content', {queue: 'end', duration: 0.2});
   }
 }

Now, this alone is nice, but nothing exceptional. You could do the same thing with prototype thusly:

Event.observe(window,"load",function() {
  $$('#icons a').each(function(tag) {
    Event.observe(tag,'mouseover', function() {
      var app = tag.id;
      new Effect....
    });
  });
});

Ok, so it’s definitely longer to do without it, but not terribly so. But what really gets me excited is this:

 '#footer:loaded': function(element) {
    element.setStyle({backgroundColor: '#ccc'});
  }

This will apply the code to the element once it’s loaded. That’s just awesome. That’s just awesome times five. Wait, it gets better: it will also apply all your rules to your Ajax responses, too (if you want it to). This means when you bring in a chunk of html into the DOM you don’t have to set up all your events on it again.

It has a few other nice touches (you can, for instance, apply these events to more than one selector, for instance). Check it out.