mad4milk.net

MooTools v1.1 official world release

Valerio Proietti — Mon, 07 May 2007 17:19:00 +0100

Today we released MooTools v1.1.

It brings great speed and compatibility improvements since version 1.0

All the notable additions are listed in the What’s New section of MooTools Wiki, and if you’re interested in details you can take a look at the full changelog.

For v1.1 we also added a whole lot of cool demos so you can actually see all the components in action before starting to get into development.

Have Fun.

mootools version 1 official world release

Valerio Proietti — Wed, 21 Mar 2007 22:47:11 +0100

That’s right. No more 0.x versions.

After a few months of full development immersion, with the help of Chris, Aaron, the forum guys and the IRC Channel guys, Mootools v1 has been officially released.

Notable Changes:

All the MooTools Classes use now Events. No, not element events. Class Events. Right, you can add as many onCompletes as you want, onChange(s), onStart(s).. Well, you get the idea. Options starting with “on” become events, so need to change your code on this one.

All the code, plugins, everything now uses element events. With a completely rewritten event system, its now less memory hungry and a whole lot easier to add events to your elements. You wont find another .onclick in MooTools. We’ve also added the ability to fire an event by hand, or remove all of the events from an element, or all of the events of a certain type (ex. click).

There are also a number of new “Components”, like Color, to convert colors from HSB to RGB and vice-versa, Hash, to create more flexible javascript objects.

New plugins have been added, like SmoothScroll, the Scroller, Slider, Assets and Json.Remote, to make Ajax requests directly with Javascript objects. As always, you decide which components to include, so your own version wont be bloated.

Effects are now more powerful than ever, Fx.Style/Styles/Elements now can include colors and shorthand properties. They also support one value start (the starting value will be computed in real time). You have a div with height = 100 and want to go to 200? as easy as start(200). Fx will read your current style.

There are a million of other changes/improvements, but I’ll leave the job to the documentation, or the long changelog.

API Changes:

Yes, there are a few of those. Thats what happens when a new, more powerful version comes out. (not to say the first v1 real release).

Drag has been completely rewritten to be more stable, compatible, make use of the new Events system and with a few more candies. The bad news is the options have changed a little, so you’ll need to update your code if you were using the old one.

Same thing applies for Sortables.

Needless to say, refer to the official documentation, or the exceptional MooTorial by Aaron Newton, if you have any doubts on anything.

If you encounter problems or issues you are welcome in the MooTools forum, or the irc channel.

mootools primer: a guide for the rest of us

Valerio Proietti — Fri, 24 Nov 2006 09:40:00 +0100

Good news for all of you mootools users: my friend Aaron Newton (@cnet), just released Mootools Primer, the mootools guide that doesnt expect you to be a javascript expert to understand. It covers more or less all of the current mootools plugins/addons and even Core files and functions. Its very well written and filled up with code samples you can execute. Smart idea.

Still Here??? (or in your favorite feed reader)? Go read mootools primer, and don’t forget to have fun.

moofx version 2 released

Valerio Proietti — Fri, 03 Nov 2006 21:31:00 +0100

Okay, for the mootools lovers this isnt big news. moo.fx version 2 is infact the same version that ships with mootools.

There’s one big improvement though: With nearly all of the current functionalities, the newest version of the smallest effects framework has been ported to prototype too.

Go take a look, and dont forget to digg it.

Mootools gets his documentation

Valerio Proietti — Mon, 23 Oct 2006 09:09:00 +0100

As revision 82 commits in, mootools got all the files, classes, functions, methods highly documented.

I think we all need to say a big thank you to Aaron Newton, a cnet ~~editor~~ javascript evangelist who made all the documentation in the first place, later polished and fixed by myself.

We used naturaldocs to document mootools, a cool method to document projects with inline comments. The only downfall is that the source files are much bigger now, but this is no big deal, since you can already download the source compressed, stripped of all its comments (documentation included). I also plan to add an option later to remove only documentation from the download.

I only wish naturaldocs didnt have to put that javascript inside! Also, creating the docs stylesheet took away about 6 hours of my life that I’ll never get back. Dont get me wrong, naturaldocs is a great documentation software, probably the best one out there. It’s just a templating engine away from being perfect.

But other features are online…Yes, I had a lot of fun this weekend.

I also added a mootools forum, based on bbpress. I had an hard time customizing it to add vital functionalities like gravatars (so vital), colourized code and integration with the bugs and suggestions reports. But in the end, it was worth the pain.

Thats it for now! And what do you say about mootools? Has it been useful for you? Did you find any quirks? Dont be shy, the comment box is here for you, and I’m here to listen, be it in the comments, by mail or in the forum.

A wiki for mootools

Valerio Proietti — Wed, 04 Oct 2006 18:02:00 +0100

In its first 20 days of public life, mootools has seen a lot of revision (20!), bugfixes and improvements.

Now there’s an rss feed for code changes, and a couple of days ago I also added a wiki, powered by dokuwiki.

There’s already a Getting Started document, reference for moo.js and function.js, and a page for external resources, articles and tutorials.

If you wrote anything about mootools, a tutorial, a demo, a plugin, simply want your mootools-powered site to be featured in the showcase, or you feel like adding a reference document/turorial/code snippet to the wiki, feel free to add a page!

Mootools Released!

Valerio Proietti — Sat, 09 Sep 2006 06:16:00 +0100

While its website is not very complete, I’ve released mootools, as promised! (sometimes we do keep the word). You cant do much right now, but you can download the very first release, browse the changelog and take a look at the getting started document.

I’ll add other features, demos, and larger documentation later. If you have questions or comments, dont hesitate to drop me a line through the contact page or here in the comments while Report and Suggest on mootools arent up.

And dont forget to let me know what you think of this new tool. I alwas do keep your suggestions in mind, they had a big role in the making of mootools!

mootools: extending HTML Elements with IE

Valerio Proietti — Wed, 06 Sep 2006 20:53:00 +0100

Well, sorta… Let me explain: as you probably haven’t noticed, there’s a new small banner on the top-left on the main pages of this useless blog: mootools: coming september 8th.

Mootools is a new framework, a new library, a new call-it-as-you-wish set of scripts (Javascript ofcourse!) that was born to unify all the moo libraries ever released, but it has slowly become much more. …YES yes the elements: with the Element.js component of mootools, which is a part of the core library, you can actually extend HTML Elements. How? Simply target one with the famous $ function (also $S and $E counts) and voila, extended. With all my properties. With all YOUR properties. I wont explain it in details here and now, but I will on release, in a couple of days. Ok just another couple of hints about Element.js, since you want it so badly:

to create an element from scratch? (let’s say a DIV) : new Element('div')
and to apply some styles to it? And maybe a className too? new Element('div').setStyles({'height': '100px', 'width': '200px'}).addClassName('whatever')
alright now I want it in the body! new Element('div').setStyles({'height': '100px', 'width': '200px'}).addClassName('whatever').injectInside($E('body'))
is this the only way? $E('body').adopt('div').setStyles ...
okay but I want an effect too! $('myelement').addEvent('click', myFunction).effect('opacity').custom(0,1) ...

And just not to name a few of other features: Drag and drop with full support for drop-zones, events, a better Accordion, a nicer Ajax with Form and Objects Serializers, a revamped Fx, Dom with attribute queries and Sortable lists. Oh, and a better (but still compatible with prototype) Class, based on Base.js from Dean Edwards. All of this (and more) about 15kb of (well, this time compressed) code. But dont panic: you can always chose the components you want to get with a nice download manager. Need Drag but no Fx? no prob. Need Dom but no Ajax? its fine. With mootools you’ll always get what you need.

See you in a couple of days @ mootools.net! Do not ever type /download after it! Its still beta!

mooglets?!?

Valerio Proietti — Thu, 03 Aug 2006 14:52:00 +0100

Today, I�d like to introduce you a friend of mine, his name is mooglets. He is many things, a newsreader, a web2.0 personal homepage, a development platform, a widget framework. Somebody says he quite resembles mac osx dashboard, but he runs in your browser, so no macintosh needed.

He’s a guest of freewebs farms, but you can knock on his door directly.

Hope I dont recycle too much.

UPDATE: digg this!

Italy won the world cup!

Valerio Proietti — Sun, 09 Jul 2006 18:15:00 +0100

Well, Italy won the world cup!

update: to use the top-left badge on your website

The html

Just create a div with id=”italy”

<div id="italy"></div>

The css

Pretty straightforward, it sets the previous div to an absolute position, and pushes it to the upper/left corner of the window. Make sure you use the correct path for images!


#italy {
    background: url(italy.png) top left no-repeat !important;
    background: url(italy.gif) top left no-repeat;
    height: 113px;
    width: 112px;
    position: absolute;
    top: 0;
    left: 0;
}

The Images

For the images, you will need both the png and the gif. The gif will only be served to ie, due to its silly lack of png support.

Have fun!

moo.dom: easily target html elements

Valerio Proietti — Tue, 04 Apr 2006 19:59:00 +0100

Notice: moo.dom has been replaced by mootools. Go get it now.

moo.dom is a very lightweight (less than 3kb!) and effective script, to target html elements using javascript and css selectors.

It uses prototype.js, or the light version (also included in moo.fx), and works perfectly with Firefox, Internet Explorer, Safari and Opera.

For the impatients there is a test page, and dont forget to view the source.

Continue reading for some sort of documentation.I’ve been working on this for quite some time, and in the latest revision I’ve decided to extend the javascript Objects Array and String instead of using a custom Object, to allow maximum flexibility.

The core of the script is without any doubt the $S function.

The $S function is used to dynamically select a collection of elements. It takes as parameters an arbitrary number of css selectors, or real elements. Some examples:

//this will select all span elements with class="myspan"

var spans = $S('span.myspan');

//this will select all div elements with class="mydiv" 
//AND all a elements with class="mylink" that are inside the div with id="mydiv"

var elements = $S('div.mydiv', '#mydiv a.mylink');

//please note you can also combine selectors and real elements

var myDiv = document.getElementById('mydiv');
var myElements = $S('div.mydiv', 'a.mylink', myDiv);

//You can use much more complicated selectors.

var myOtherElements = $S('div.mydiv #myid a.mylink span b.bold');

Another cool feature of moo.dom is the use of actions. Actions are used to attach a set of events to any collection of elements, not just the ones you select with the $S function. This is the syntax:

$S('span.myspan').action ({
//the initialize function takes place immediately, if some elements are found.
  initialize: function(){ 
//all spans with class=myspan will have "hello" as innerHTML.
    this.innerHTML = "hello";
  }
});

Note that the keyword ‘this’ always refers to the current element in the array.

Optionally you can also use functions as onclick and onmouseover inside the action. Every function beginning with on will be threaten as an event.

$S('span.myspan').action ({
    initialize: function(){ 
        this.innerHTML = "hello";
    }
//when I click on any spans with class=myspan it will become blue.
  onclick: function(){
 //inside events, use this as the current element.
    this.style.color = "blue";
  }
});

As said before, I’ve decided to extend The native javascript objects String and Array to allow maximum flexibility: Every function in moo.dom infact can be used if required. For example, if you need to filter a collection of elements by its container, and you only have the element reference (not an ID or class) you can use the getElementsBySelector method of the String object:

'a.link span'.getElementsBySelector(filterElement);

Same principle, if you already have your collection of elements, you can apply actions to them. Feel free to digg through the source code of this script to get an idea of the multiple functions you can use.

So, view the example page and download the script. Bye till next time!

moo.fx forums & 1.2.2

Valerio Proietti — Fri, 24 Feb 2006 15:08:00 +0100

Just a quick update:

I’ve added the moofx forum, so post there for further help requests!
I’ve fixed some bugs in moo.fx.pack (thanx for the comments), and Switched the opacity/visibility order in moo.fx (for a better compatibility with Customizing lightbox). Get the new version!

links of interest

Valerio Proietti — Mon, 20 Feb 2006 15:08:00 +0100

These days I found some interesting links I would like to share with you. But wait, I have no linkbox in this damn blog… no prob, I’m writing an entry.

Building aB: Customizing Lightbox - a special version of Lightbox Js, that uses moofx transitions. Very fashionable, By Sean McBride.
jQuery - “jQuery is designed to change the way that you write Javascript.” Very cool, uses also a special version of moofx, and I wonder how this guy extends the HTMLElement in ie.. By John Resig.
moo.fx tutorial quickie - “a short and simple beginner tutorial on how to use moo.fx” - this should help you get started! by nyokiglitter.
The Idiot�s Guide to moo.fx - “Let’s face it, you want to use moo.fx to look cool” - a very detailed guide on how to start your career as a special effect engineer. by Avinash Vora.

a new moofx

Valerio Proietti — Sat, 11 Feb 2006 21:28:00 +0100

I’m officially announcing moo.fx 1.2! The biggest improvement? Documentation.

Accordion effect, custom transition, a number of bugfixes (including opacity for safari) and a lot more!

moo.fx changelog

Each effect element will now support another option: transition: fx.TRANSITIONNAME. With this you can choose wich transition to use: from fast to slow, from slow to fast, start slow then fast then slow again, even a linear one, for older computers. You can get a list of available transitions at the end of moo.fx.js (simple ones) and moo.fx.pack.js (a lot more).

Opacity for safari is now fixed. The Opacity effect has also another method now: setOpacity. It’s used to suddenly set the opacity, crossbrowser, without displaying the effect. It will also hide/show the element when opacity=0/1, a quick fix for browsers not supporting opacity on elements (OPERA).

The new moo.fx is completely safe to update, all your effects will still work.

moo.fx.pack changelog

Here a lot more has changed. I decided to replace a lot of stuff with better stuff. If you need the old stuff you can always include that stuff in the new files, or just don’t update moo.fx.pack. Too much stuff would have been bad for filesize. stuff.

The best thing is the new fx.Accordion: forget about ~~fx.Multi~~, for loops and headhaches. You can now generate accordions in just one line of code! This new effect takes as parameters two arrays, one for the switches (the elements you click on) and one for the elements to be expanded/collapsed. A nice way to do this is with classNames, using document.getElementsByClassName from prototype. For a more detailed explanation, go read the docs!

~~fx.Fadesize~~ and ~~fx.Resize~~ are no more. Why all this when you can make your own combination of height/width/opacity with fx.Combo? just set as options width: true, height: true or opacity: true. The default is the combination of height and opacity.

fx.Scroll is now a part of the family!

Smallest improvements

A lot of smallest stuff has changed too. For example, if you’re a code reader you’ll notice there are no more for loops. I’ve made a simple and effective function (at least for me!) to avoid for loops. I hate for loops. This function extends the Array object, adding a method (each.) This is the usage:

myArray.each(function(element){
    element.style.color: &#8220;red&#8221;;
});

This will make any element of the array myArray red. Easier to read!

Another small thing is the function I’ve added to prototype.lite: Element.find. It takes as parameter what to find (nextSibling/previousSibling), and the element. It will return the real element, discarding any text-nodes. This eliminates the need to use ~~Element.clearWhitespace~~ everytime you want to perform such operations.

Frequently asked questions

These days I’m receiving a lot of support requests and I can’t answer them all. So I’m writing a faq for moo.fx/moo.fx.pack. If you have any questions you wold like too see in the faq, please ask!

UPDATE: Opera 9 PR2 now supports opacity! Yay!

UPDATE2: moo.fx.js is now 1.2.1. The previous version brake Sean McBride version of lightbox (very cool btw) due to a visibility issue. This should fix the problem. Thanx Sean!

windows xp pride

Valerio Proietti — Mon, 06 Feb 2006 21:30:00 +0100

Everyone these days wants to show mac osx superiority over the good and old windows xp. Ok, mac osx is better. Ok microsoft copies apple. Ok OK but what about some windows xp pride??

I made these little icons for you, to show the world your windows xp pride! Everyone must know your love for the best OS in the world. They come in two versions, color and black & white. Gifs on white, gifs on black and even transparent pngs! Use with caution.

p.s. I’m on a supercool supernew powerbook, but those made on mac icons suck.