Friday, September 12th, 2008
Category: MooTools
, Showcase
Ruven Pillay has updated the JavaScript image viewer that we posted on awhile back. We asked Ruven what he has done and he told us:
Well, I’ve just released a new version which updates the libraries to Mootools 1.2 and adds a whole bunch of useful features like navigation buttons, a draggable navigation window and the ability to create layers.
I’ve also tried to push javascript to it’s limits and build an advanced visualization application around the IIPMooViewer. There is a demo of a multispectral viewer, which allows you to blend between different kinds of scientific imagery of the same painting. For example, you can blend between a normal colour image and an X-ray / UV or infra-red view. You can also view the spectral curve at each point on the painting when you click on the main image. The whole thing is pure javascript (using Mootools) with the graphing done using Canvas/VML via the MooCanvas library.
Friday, August 22nd, 2008
Category: Games, MooTools
Munteanu Gabriel has created today’s Friday JavaScript game. It is an old favourite…. Bomberman.
Munteanu has released the code as an open source project, and you can get going to bomb away now
Tuesday, August 19th, 2008
Category: MooTools, Tutorial
Conserving screen real-estate while still providing good content to the user has always been a challenge for designers and developers and while larger screen dimensions are becoming more prominent, it’s still important to take full advantage of the space available to you. Jeeremie over at Web Kreation came up with a very cool method of display a login panel using MooTools v1.2’s built-in effects capabilities:
Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.
Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.
Thursday, August 14th, 2008
Category: MooTools
Aaron Newton has relaunched clientside.cnet.com with a cleaner, leaner, look and feel. The news for the launch is:
- The Mootorial (the MooTools tutorial) is now updated for MooTools 1.2 and on it’s own domain www.mootorial.com
- The wikiTorials(tm! - not really) for all of CNET’s codebase have been updated for our updated 1.2 code (which launched in June)
- The MooTools book (Apress) is available for sale! You can get the PDF today, and you can pre-order the paper back which should ship in just a few days time.
Tuesday, July 1st, 2008
Category: JavaScript, MooTools
MooWheel, the JavaScript connections visualization library, has been updated to version 0.2.
Updates include:
- New data format
- Text can now be hovered over, in addition to the dot
- Images can be added for each item
You can see the popular Twitter example
(thanks to Augsto Becciu, creator of TweetWheel).
Also, MooCirclePack has just been released:
MooCirclePack is another stunning visualization library that brings circle packing to JavaScript. It is great for data that can be represented by size (eg: an alternative to a bar graph), or data that can be represented amorphously.
There is a non-Ajax demo, and an Ajax one.
Monday, June 23rd, 2008
Category: MooTools
The MooTools team recently announced v1.2 of their namesake JavaScript library and hot on the heels of this release is an update to the CNET Clientside MooTools plugin repository.
CNET has a very comprehensive set of controls and widgets that complement the MooTools library that provide such functionality as carousels, slideshows, date pickers and tabs. This update brings the plugins inline with MooTools v1.2’s updated architecture as well as adds several new features and fixes.
We’ve done a fair amount of QA (with the above listed test suites) and officially support Safari, Firefox (we haven’t done much testing in FF3 just yet but don’t expect any issues), IE 6, 7, and 8. We’ve tested in Opera and have found one or two small issues that we’ll address.
The updates are available in a couple of ways including:
Thursday, June 19th, 2008
Category: Examples, MooTools
Scott Boyce wrote in with an interesting story about deckmyplace.com.
The site was originally designed as a Flash site, but when the mandate came from the top to use HTML instead of Flash, he had to see just how much of the original comps he could implement. And it turns out, pretty much everything.
We asked Scott to share some details on his experiences building the site:
When the mandate to drop Flash came, there wasn’t time to redesign. My goal was to make it indistinguishable from Flash visually, but do so while employing valid markup, progressive enhancement, and Section 508 accessibility.
MooTools
I had previously used Mootools (and moo.fx prior to that) to add subtle animation to interface elements, but I had not built a site entirely around it (or any other JS library). I had also not created a site with such explicit positioning throughout, so there were CSS challenges as well.
I used a lot of Mootools’ built-in assets: AJAX, tool tips, sliders.
Fancy Page Transitions
The page transitions are done with a combination of effects. Basically, there’s three layers: the frame, the content, and the (ususally hidden) background. When the user navigates to a new page, the following occurs:
1. The background is switched to a blurred screenshot of the current page (instant; the image has been pre-loaded).
2. The opacity of the content area is reduced, revealing the blurred background image (300 ms).
3. New content is loaded via AJAX (each content page is about 1 KB; the lounge is about 4 KB).
4. The opacity of the content area is scaled back to 100% (300 ms).
The Development Process
The content was first laid out with HTML, using PHP includes to eliminate the need for any duplicate content. (Incidentally, the entry form and validation were also written in PHP.) The CSS was created alongside this framework, which resulted in the JS-disabled version of the site. Once we were satisfied there were no issues with the display or functionality in a few target browsers (Firefox, IE6, Safari, Opera, Lynx, IE6 + JAWS), I started writing event listeners.
Once the JavaScript was written, we tested again. In the end, I think the only thing we had to drop were the background music and some of the secondary animation (spinning knobs). Still, most people just assume it’s Flash.
Firebug, YSlow, and the Web Developer toolbar for Firefox were invaluable tools during development
Stats
* Total JavaScript is 59 KB (51 KB for Mootools + 8 KB for the library)
* 30.9 KB of CSS (including 4.7 KB of CSS for MSIE loaded via conditional comments)
* 2.59 MB for the whole site (2.11 MB of images)
I love the legal disclaimer at the bottom:
The thought of a corporation owning a trademark on a given name… fascinating. I can only imagine the future litigation between the Dave Thomas’ of the world.
Friday, June 13th, 2008
Category: MooTools
Many people wrote in to tell us about the recent MooTools 1.2 release and updated MooTools website. Coming nearly a year to the day after their last production release (1.11), Moo differentiates itself from other popular frameworks by cramming Prototype-inspired helpers and smooth effects into a small download. Weighing in at 90KB uncompressed, this bovine package is quite a bit smaller than Prototype by itself (124KB) or when combined with Scriptaculous and all its features (~280KB); it’s also a bit smaller than jQuery (97KB).
(Of course, comparing sizes is fairly meaningless due not only to minification and gzip’ing distorting the numbers but also the large variety of what’s in the “core” distribution of frameworks and what’s relegated to other plug-in’s, etc.).
Some of Moo 1.2’s notable new features include:
And more! I love the custom MooTools version builders for creating an optimized version of the MooTools core and MooTools plug-ins.
Milkshakes all around for the Moo team; congratulations on the new release.
Friday, May 30th, 2008
Category: Games, MooTools
Markus Inger wanted to hone his Mootools skills, so he created a BeJewelled-like game, BeSlimed. Give it a Friday whirl!
Wednesday, May 14th, 2008
Category: CSS, MooTools
Chris Schneider has created a javascript implementation of CSS Effects using the MooTools JavaScript library. It basically parses the css and mimics the new Webkit css animations.
With the introduction of CSS we could seperate the presentation layer and the content layer, but we were not able to add animations via CSS. DHTML fixed this misbehavior, but now the presentation and behaviour layer were mixed.
First I tried the concept of adding something like “-moofx-{property}: {from} {to};†to CSS. The disadvantage of this way is that you have to specify the change twice: First in regular CSS to serve the non-JavaScript-users, then for the animation.
After hearing about WebKit’s CSS Animations I changed my concept of CSS animations. Instead of setting an additional target or starting value, both properties are specified â€normallyâ€. The only thing you have to add is a declaration.
The script uses MooTools soon to be release v1.2 and works in Safari 3, Firefox 2 and mostly Internet Explorer 7. The script degrades in Internet Explorer 6, because no dynamic pseudo-classes are supported.
You can see the script in action here.
Monday, April 28th, 2008
Category: Component, Flash, JavaScript, 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?
-31246.2 rating from 32 votes
Monday, March 17th, 2008
Category: Adobe, Ajax, 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: MooTools, Tutorial
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})</
