December 5th, 2008 by Aaron N.
David Walsh has a nice little effect featured in the footer of his blog. He writes of it:
Link nudging is the process of adjusting the padding on a link slightly to show a simple, tasteful “jump” when you place your mouse over a link. The effect is magnified when mousing on and off a link quickly.
Here’s the code:
$$('#footer-topics-1 a').each(function(el) {
var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });
el.addEvents({
'mouseenter': function() { fx.start({ 'padding-left': 20 }); },
'mouseleave': function() { fx.start({ 'padding-left': 0 }); }
});
});
Posted in MooTools, Visual Effects | 2 Comments »
November 20th, 2007 by Andy L.
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.
Posted in MooTools, Visual Effects | 1 Comment »
July 19th, 2007 by Aaron N.
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 of this entry »
Posted in Examples, Visual Effects | 3 Comments »
May 3rd, 2007 by Aaron N.
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.
$('fxTarget').pin()
Execute the example, then scroll. That’s it. You can unpin it if you like:
$('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.
Posted in Examples, MooTools, Visual Effects | 6 Comments »
March 1st, 2007 by Aaron N.
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…
Posted in 3rd Party Libraries, Examples, Visual Effects, Widgets | 2 Comments »
February 20th, 2007 by Aaron N.
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.
Posted in Visual Effects | Comments Off
February 9th, 2007 by Aaron N.
If you are new to javascript or Mootools, you should:
2) Read
the Mootools Tutorial
Now, the problem with the Tutorial is that it shows you snippets of how Mootools work, but doesn’t put them all together to show you how to actually do things on a page.
So in an effort to help people see the right way to write code (well, at least how I write code; “right” is definitely subjective with javascript), as well as how to use the accordion and things like Fx.Slide, I’ve authored a simple little page that demonstrates these things and comments them line by line.
So:
3) View the source of the Mootools Beginner’s Example
Posted in Best Practices, Event Scripting, Examples, Manipulating the Dom, MooTools, Reference, Visual Effects | Comments Off
February 1st, 2007 by Aaron N.
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 of this entry »
Posted in Examples, Visual Effects, Widgets | 2 Comments »
January 30th, 2007 by Aaron N.
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.
Posted in Ajax, CNET JS Standards, Event Scripting, Examples, Manipulating the Dom, MooTools, Reference, Visual Effects | Comments Off
January 4th, 2007 by Aaron N.
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.
Posted in Code Snippets, Examples, Visual Effects, Widgets | 1 Comment »
