Code Snippets: Visual Effects: Posts

Ajaxian today posted about Greg Houston’s MooTools-based MochaUI class that draws draggable, resizable, rounded-corner and dropshadowed boxes without using images. It uses canvas tags and Google’s ExplorerCanvas. Looks like Greg didn’t take advantage yet of Olmo Maldonado’s MooCanvas, but maybe he’ll upgrade. His demo works well across browsers and platforms (with a small bug in FFox/Mac that custom scrollbars can fix).

It might be a while before you see these on CNET, but I’m starting to finally see a happy place between our design and production teams where design gets their rounded corners and dropshadows, and production doesn’t have to deal with the headaches that come with them. I also expect that we’ll see a bunch more development around ExplorerCanvas (and MooCanvas) in the near future.

Greg’s code seems to be pretty well-rounded, but he hopes to add some new features (including modal windows and the aforementioned custom scrollbars). He says this is “an on going [sic] exercise to help me become more familiar with both MooTools and the canvas tag.” Keep up the good work, Greg.

I might add that Aaron lamented via IM, “stickyWin’s days are numbered.” It’s been a good run, stickyWin, but I don’t think we’re done with you quite yet.

I got a little bored last night and banged this out. A little 2K effect for resorting elements with an effect. More info in the wiki, download in the svn. | Read the rest »

Here's a little Mootools extension that you might find useful. I'm using it my StickyWin classes to allow the user to "pin" it in place so it won't move if they scroll.

PLAIN TEXT

JavaScript:

$('fxTarget').pin()

$('fxTarget').pin()

Execute the example, then scroll. That's it. You can unpin it if you like:

PLAIN TEXT

JavaScript:

$('fxTarget').unpin()

$('fxTarget').unpin()

(note, in this example because of the way my little fxTarget helper works, unpin will break the drag behavior, but that won't happen in other instances).

I've added .pin and .unpin to StickyWin, too.

Over at Ajaxian today they have a post on miniajax.com which describes itself as "a showroom of nice looking simple downloadable DHTML and Ajax scripts".

I'm not sure if they authored these scripts or if they just collected them all into slick looking examples. Some of the items link to other sites, but some they seem to host.

Some of these things I think would do well to write as plugins for the Mootools library but if Valerio (the gatekeeper for Mootools) doesn't want it I think some of them would do well to be added to the CNET Library.

This goes hand-in-hand with the patterns project that we're trying to kick off here. I think this page could really help inform that work...

Over at Ajaxian today they have a short post on whatshouldisay.com and their crafty use of effects and whatnot. Check out the visual sorting on this page. I think this type of thing makes a page so much more fun to play with. They seem to be using the Y!UI for this.

Update: I went ahead and did my own version of this slick sorting: Fx.Sort.

Continuing in my current project of rewriting all the javascript on Download.com (pity me), I encountered the functions on the screenshots page. A quick rewrite and here's my SimpleGallery class. It's not super-duper fancy but it's not meant to be. | Read the rest »

Mootools 1.0 is out. Fancy new site design and docs.

We've already refactored all our code for 1.0, though it is not yet released to the CNET site. We're entering into QA now...

I've also released the second part of my wiki tutorial series, this time giving working examples of all the CNET common code. The CNET Libraries are comprised of common code (widgets, shortcuts, etc.) and implementation code - code that is specific to a given page or application. The implementation code is usually just implementing and executing functions and libraries in the common portion of the library. The wikitorial for the CNET common code focuses on this generic content. Form validation, date pickers, carousels, etc. Dig in! Oh, and if you have a chance, Digg the tutorials, too. You'll find shortcuts to do that in the right navigation column in the tutorials.

I thought about the form validator that I refactored and posted about the other day for a bit and decided I wasn't happy with all it did. Specifically, I wanted to be able to do more with the validation and more with the messaging. I also thought I could improve on the core functionality a little.

So I rewrote it entirely and borrowed heavily from it to come up with my own version. This version works almost the same way as the previous one with a few differences:

• the transition is smoother
• error messages have access to more information about the element they evaluate
• tests can have conditions specific to individual elements

It still uses css class names, now you can give each field some specific conditions.

You can now see this in action, download the script, and see the docs in our wikitorial.

Hi gang,

I've been at work on a mootools primer as a tutorial for those who want to use the library but don't know a lot about javascript. It's replete with working code examples that you can execute right in the browser and see the result. | Read the rest »