Monday, April 28th, 2008
Category: JavaScript
, Component, Flash, MooTools
Harald Kirschner has created a new version of FancyUpload "a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar."
A good example is the Queued Photo Uploader which is coded by:
JAVASCRIPT:
-
-
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
-
'url': $('form-demo').action,
-
'fieldName': 'photoupload',
-
'path': '../../source/Swiff.Uploader.swf',
-
'onLoad': function() {
-
$('demo-status').removeClass('hide');
-
$('demo-fallback').destroy();
-
}
-
});
-
-
/**
-
* Various interactions
-
*/
-
$('demo-browse-all').addEvent('click', function() {
-
swiffy.browse();
-
return false;
-
});
-
-
$('demo-browse-images').addEvent('click', function() {
-
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
-
return false;
-
});
-
-
$('demo-clear').addEvent('click', function() {
-
swiffy.removeFile();
-
return false;
-
});
-
-
$('demo-upload').addEvent('click', function() {
-
swiffy.upload();
-
return false;
-
});
-
Thursday, April 17th, 2008
Category: MooTools
I like reading David Walsh's blog. Not only does he write good technical articles but he always injects some humor into it to liven up the topic. This time around is no different as David's guilty pleasure of scoping out the latest celebrity gossip led him to an idea which would make it easier for these sites to post NSFW pictures without their readers having to end up in HR.
Since most of the time it’s just a portion of a given picture that could be considered in appropriate, I asked myself if there was a way to get the gist of an article’s graphic without having to hide the entire image. For that reason, I’ve created a NSFW blocker using CSS and MooTools.
The premise of the extension is to give the reader an idea of what is going on without actually landing him/her in trouble due to inappropriate content. The script is very easy to implement as it loops through all divs that have a class of "nsfw-wrapper" and adjusts the mouseenter & mouseleave events to fade in or out using MooTools fade() method.
It's a very simple extension but definitely useful. You can see the demo here.
Tuesday, April 8th, 2008
Category: MooTools
Josh Gross, the creator of the Ajax-powered AjaxIM instant messenger, has come up with a unique way to visualize data:
The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the canvas object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise.
By using MooTools, CanvasText (for text support with canvas elements) and ExCanvas (for IE canvas support), he was able to produce an interesting UI for showing off data.
It's a very cool effect and I'm sure has applicability within applications. I'd like to hear from the Ajaxian community how this might be used. Thoughts?
-38457.5 rating from 26 votes
Monday, March 17th, 2008
Category: Ajax, Adobe, MooTools
We all have bits of reusable code that we store in some fashion. These snippets prove to be invaluable at helping to not "reinvent the wheel" so storing them in a safe and convenient place is important.
The MooTools team wants to make it easy for you to store your snippets easily through the use of their new Adobe AIR application, Snippely. Using the MooTools JavaScript library and the AIR SDK, Valerio Proietti and Tom Occhino created a desktop application that allows easy storage of both code snippets and notes about the code.
When we were thinking about what type of application to make our AIR playground, we tried to think of something that we'd want to use ourselves. Valerio and I are notorious for storing countless bits of code in all sorts of different languages all over our hard drives, and thought it would be nice if we had a central place to store and organize those bits of code. We came up with the idea of 'snippets', and an application called Snippely.
The nice thing about this is that they've designed Snippely so that you can organize snippets by groups and that a snippet entry can consist of multiple snips or notes.
Finally, those looking to get into AIR development will certainly benefit from the fact that the Moo team has released the app as an open source project under an MIT license. The code for Snippely is hosted on Google Code and is available for you to review.
Wednesday, March 12th, 2008
Category: JavaScript, Library, MooTools
Aaron Newton of CNet has posted an update for his Clientside Mootools library:
We’ve refactored nearly the entire library and in most cases the changes don’t affect the actual interface to the classes and methods, but not always. Like Mootools, you can download a compatibility layer which will preserve the old syntax if you have code that you haven’t updated yet.
The most interesting changes are as follows:
- Fx.SmoothShow/SmoothHide is now Fx.Reveal, Element.reveal(), and Element.dissolve()
- Fx.SmoothMove is now just Fx.Move and Element.move()
- stickyWinHtml() is now StickyWin.ui()
There are other changes, but these 3 are the big name changes. You can browse the Compatibility files and see the actual changes if you want to compare, but other than that all the new details are in the docs. Speaking of which…
You can check out the new documentation and fancy new download page.
Tuesday, March 4th, 2008
Category: Tutorial, MooTools
It's been awhile since we've put up an Ajaxian Featured Tutorial and so we're going to get back into the swing of things with a nice, simple tutorial using MooTools.
Giving users feedback during a "save" process is a very good idea. It allows the user to feel a sense of confidence that the site is responding and their data is being processed. While we're at it, why not make it look good as well? Antonio Lupetti has written a short tutorial which does just that.
My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.
In the image below, Antonio has described the sequence of effects:
To break it down, when the user submits the form, a message box will appear first giving the user an indicator that the save is in progress followed by a message to let them know that the save process has completed. The fade-out effect is very cool window dressing.
Antonio leveraged the MooTools JavaScript library for this tutorial which, apart from making the code a trivial task, already includes their "fx" module which makes adding nice effects very easy.
JAVASCRIPT:
-
-
<script type="text/javascript">
-
window.addEvent('domready', function(){
-
var box = $('box');
-
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
-
-
$('save_button').addEvent('click', function() {
-
box.style.display="block";
-
box.setHTML('Save in progress...');
-
-
/* AJAX Request here... */
-
-
fx.start({
-
}).chain(function() {
-
box.setHTML('Saved!');
-
this.start.delay(1000, this, {'opacity' : 0});
-
}).chain(function() {
-
box.style.display="none";
-
this.start.delay(0100, this, {'opacity' : 1});
-
});
-
});
-
});
-
</script>
-
Antonio has created a demo to show off the results.
Friday, February 29th, 2008
Category: Ajax, Announcements, Adobe, MooTools
After recently installing Snitter, I have to say I've become a bit of a fanboy of Jonathan Snook. The guy just produces some good stuff. So when I saw that he announced a new AIR application, I had to get it installed and checked out.
While Snoto (ya know, Snook, Snitter, Snoto) isn't as polished as Snitter, it's not meant to be. Jonathan has released this as a foundation for those that want to understand how to build AIR applications.
The goal of this is not to create a Flickr client that "does it all". It was put together as a reference application for anybody interested in learning more about Adobe AIR. Snoto has been released under a Creative Commons license, so it's available for you to take and extend how you wish. The link to the source code is included at the bottom of the Snoto page.
This is a great help to many developers as interest in Adobe AIR has skyrocketed since the release of AIR v1.0. MooTools developers should be especially pleased with the fact that Snoto was built using the MooTools JavaScript library, specifically because of the ease with which AIR applications can be developed without jumping through hoops. While other JS libs are now updated to work with AIR's security model, MooTools was the first to be compatible even during the beta process.
Again, the biggest benefit is to those that want to learn about working with the AIR API:
From the AIR API, I haven't gone hogwild but rather kept it simple. You can see use of nativeWindow, context menu and EncryptedLocalStore.
Having access to Webkit made styling the interface very straightforward. Like Snitter, it's a combination of background images, PNG images, and some CSS3/border-radius to round things out.
The Snoto page has been setup with an AIR install badge which should make it easy to check it out.
Wednesday, February 20th, 2008
Category: Ajax, MooTools
Sometimes the smallest and simplest widgets are the absolutely coolest. In this case, mooSocialize fits that description. Similar in concept to the social bookmarking toolbar from AddThis.com, mooSocialize allows you to consolidate submission links for various networks in a neat little slidedown/out panel:
mooSocialize uses the MooTools JavaScript library to generate the fluid effects and is one in a number of different MooTools-based extensions produced by the artViper designstudio team.
Friday, February 15th, 2008
Category: Ajax, Prototype, MooTools
If you used Facebook on a regularly basis, you've probably come across their cool autocomplete method of adding multiple recipients to messages. For those that haven't seen it, here's a pic:
Guillermo Rauch set out to build something similar and he did a very good job of mimicking this behavior using MooTools v1.2:
While working on my big and exciting new project, I decided to include an input that resembles the famous Apple Mail to: textfield. I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)
I created my own, MooTools 1.2 compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.
Well, the folks at InteRiders wanted to get in on this Facebook goodness so they created a Prototype version of this control.
This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original. An extended and upgraded version will be posted later on this week, if you have any comments or requests, please post them and I will try to include all the requested features in the upcoming Proto release.
This is a very nice variation of the autocomplete metaphor and MooTools and Prototype developers can now leverage this enhanced functionality.
Thursday, February 14th, 2008
Category: JavaScript, Library, MooTools
Moo.rd is an extension library to MooTools that brings you more effects, and helpers for tables, lists, and lightboxes.
You can see examples of the new extensions including:
The new Custom.Alert and Custom.Confirm classes are modal, fixed, and can be draggable, like the standards. But they are “Custom”, so we can give them our personal style, choose an overlay (made by the new Overlay Utility Class) with a custom light, make them appears/disappears with a fade transition and many more.
I want to have the Apple style plus the Windows Style plus my personal style in the page: mission impossible? custom Alerts and custom Confirms, go, make it possible!
The SmoothScrolling class is now for “all smooth needs”. Extending Fx.Scroll, it take advantage of its options, like wheelStops. In addiction, we can choose which anchors must be affected and the Fx parameters of the “effects”.
Wednesday, February 13th, 2008
Category: Flash, MooTools
MooTools core team member Michelle Steigerwalt has a writeup about the MooTools 1.2 Swiff object which allows communication between Flash movie (.swf) files and a page's JavaScript. The Swiff object makes it substantially easier to interact with ActionScript allowing you to pass values or manipulate the Flash movie using JavaScript and MooTools:
Unless you're a diehard fan of the embedded Quicktime movie, you might see the benefit in a Flash video player to provide smooth playback of videos to your users, while still yearning for full control over the action using JavaScript and MooTools.
It's not even necessary for the Swiff object to be visible in order to benefit from its use. Using Swiff, you can utilize all of Flash's functionality, including its video, sound, file streaming, and clipboard accessing features, and lots more.
You get all the flashiness of Flash, while still being able to manipulate and display your content using the DOM and MooTools.
Instantiating a Swiff object instantly provides access to the referenced Flash movie and any exposed methods:
LANGUAGE:
//(JavaScript)
var obj = new Swiff('mySwf.swf', {
width: 1,
height: 1,
container: $('swiffContainer'),
events: {
onLoad: function() {
alert("Flash is loaded!")
}
}
});
In addition to this, the Swiff object's remote() method provides the hook to make calls to actual ActionScript functions:
LANGUAGE:
//(JavaScript)
var obj = new Swiff('mySwf.swf', {
//[...]
events: {
onLoad: function() {
Swiff.remote(obj, 'echoText', 'Hello Flash, meet Swiff.');
}
}
});
The Swiff object is currently available in MooTools 1.2 beta
Wednesday, January 23rd, 2008
Category: MooTools
The MooTools team has been quietly hacking away at their next major release of the MooTools library. A couple of days ago, project leader Valerio announced Beta 2 of MooTools v1.2 for public consumption:
Its been almost 2 months since the first 1.2 beta. Bugs were fixed, features were improved, and here it comes: the second beta. The first big feature we've been working on for 1.2 is Documentation.
1.2 Documentation is in fact almost 5 times more detailed than it was in version 1. Every class option has now its description, every method has a complete list of arguments along with description, type, and now every functionality comes with a code example -- sometimes more than one. If you want to see it for yourself, here is the temporary link for the 1.2 beta documentation.
Along with enhanced documentation, this release also introduces the new Element Accessors feature which makes working with elements more concise. Valerio offered a nice example which basically negates the need for chaining:
LANGUAGE:
$(element).set({
href: 'http://mad4milk.net',
text: 'mad4milk website',
morph: {duration: 200, transition: 'quad:out'},
events: {
click: function(){
document.location.href = this.href;
return false;
}
}
});
Tom Occhino followed up with another blog posting about the new Element Storage class which is meant to provide a better method of storing data for DOM elements. The concept came about mainly due to issues with how IE handles the storage of additional attributes within Elements especially with respect to memory leaks.
Element.Storage is brand new in MooTools 1.2. It is basically an external Hash that stores all the custom properties and events for every element you interact with. Let's take another look at our previous example, this time using the new Element.Storage API:
LANGUAGE:
var element = $('myElement');
element.store('effectInstance', new Fx.Tween(element, 'color'));
element.store('customProperty', 'someProperty');
element.retrieve('effectInstance'); //the Fx.Tween instance
element.retrieve('customProperty'); //'someProperty'
Note that events and actions are no longer attached directly to the Elements. Everything is stored in the external Hash, and managed by MooTools, so as a developer, you have nothing to worry about. Finally, an elegant and coherent API for attaching custom properties, functions, and objects to Elements.
Tom's blog posting goes into greater detail about the implementation and the applicable scenarios.
Thursday, November 29th, 2007
Category: JavaScript, Library, CSS, MooTools
Marat Denenberg has continued the trend of CSS frameworks by taking Mootools and creating CSS.js.
The library sits on top of CSS itself and gives you:
- Programmatic CSS
- Browser Compatibility
- Custom CSS Properties
With programmatic css, you can use loops to generate CSS that might have taken pages to type out. You can have CSS constants. You can do all sorts of math and calculations for a property. You can also modify the style of elements on the fly, without using javascript on each element. I'm sure there's other cool stuff you can do that I didn't think of.
Browser compatibility is sort of self-obvious. Before, you used to have a style sheet for each browser to allow for their quirks and weird CSS implementation. Now you can generate CSS that is browser specific using JS. The class is built to allow you to extend it for any browser and any property. You can specify a property to be limited, in which case it will only generate it for the browser you specify.
Ever wanted to invet your own CSS property? Now you can. See the examples for what I mean.
There are a lot of great examples, such as having IE grok opacity:
JAVASCRIPT:
-
-
CSS.implement({
-
'trident_opacity': function(value, property)
-
{
-
return ['filter', 'alpha(opacity=' + (value * 100) + ')'];
-
}
-
});
-
or allowing you to use border-radius and have it setup for the right browser:
JAVASCRIPT:
-
-
CSS.implement({
-
local:
-
{
-
limited: ['border-radius']
-
},
-
-
'gecko_border-radius': function(value, property)
-
{
-
return ['-moz-' + property, value];
-
},
-
-
'webkit_border-radius': function(value, property)
-
{
-
return ['-webkit-' + property, value];
-
}
-
});
-
Download CSS.js
