In my workspace I've done some research on how to make effects with graphical transformations. When I Googled about it, I only found that the new Safari supports using CSS transformations. I didn't find that IE has supported these things from earlier versions (5.5) -- though with another name: Matrix filters.

So as of now, I have 2 ways to make effects with graphical transformations:

• The Safari way: using the 'transform' property of CSS (extensions to the spec and proposal too) with one of its functions: skew, translate, rotate, perspective etc. Mozilla announced that they will support that too.
• The Internet Explorer way: using the 'filter' property (extensions to the spec) set to 'DXImageTransform.Microsoft.Matrix', which gets a 2x2 matrix.

What's common to both ways is the support for passing a matrix argument. Safari's support for this option is more extensive: it can handle 3- and 4-size matrices (the latter, for 3D projection)

So making a graphical transformation is easy -- just passing a matrix and voila! -- the object is transformed. But how do I integrate it into MooTools, my JavaScript library of choice?

I've been trying very hard to integrate it into Fx.Morph so it can live side by side with other CSS properties, but I didn't succeed (yet!). So I've created a class extending Fx class and learned for the first time how to create custom effects. It is very easy, but there isn't enough documentation about this subject. There also isn't any documentation on the code specifying what each method in Fx/Fx.CSS does, so I read the code and analyzed the order of the calls to each method and looked in the source code of another custom effects of what I found while Googling on it.

The result is the Fx.Matrix class, which I added to my MUI project (Mootools UI). It supports the following functions: scale, skewX, skewY, rotate, scaleNonUniform and rotateFromVector. These transformations are the only ones which can be implemented in both the Safari and the IE way; the rest (perspective, translate, etc.) are only supported in Safari/Firefox 3.1, so I didn't implement them.

How to use the class?

First, create a instance: 
var mfx = new Fx.Matrix(element, options) -- all options are the options of Fx class.

Then you can use the set method, which makes the transformation without effects. The matrix of the transformation is passed as a parameter

mfx.set([[2,0], [0, 2]]);

This code will scale (=multiply) the element by a factor of 2. The matrix is an array containing 2 arrays of 2 values each.

A more semantic way to make this is using the `Functions` static associative array, which contains all the supported transformation matrices. Thus, the code above can be written this way:

mfx.set( Fx.Matrix.Functions.scale(2) );

To make more than one transformation at a time, you can use the `prepare` static method of Fx.Matrix, which concatenates all matrices to one matrix that can be supplied to the `set` method:

mfx.set( Fx.Matrix.prepare({
    scale: [2],
    rotate: [30] // 30 degrees
}));

The `set` method saves the matrix in Element's Storage and retrieves it when an effect is applied.

To make transformation effects (the most interesting part of this post), you need to use the `start` method and provide an object, as to Fx.Morph, containing the settings of start and end values for each transformation function you want to use:

mfx.start( {
    scale:[1, 2],
    skewX: [40],
    skewY: [50, 0]
});

You can pass one value to the function, and it will set the end value of the function. It also supports two values, of which the first is the start point and the second is the end point of the function.

View a demo of using this class.

 The demo checked on IE7/8, Firefox 3.1 beta and Safari 3.1.2 on Windows Vista.

Thanks a lot to Yuval Kaplan on fixing my English.

What is ThickBox?

ThickBox is inner window, like Modal Dialog just inside the web page itself and not part of the browser objects. There is events handling only into the inner window, any object but the inner window, cannot listen to events. In order to create ThickBox we will create 2 elements:

1. Screen element – an element which block any action to go into the page's objects, won't let them focus.

2. Window element – an element which contains the content of the box, it is the only object (and it children) that can listen to events because it will be on top of the screen element.

I won't build the component itself, I will explain the main idea and show snippets which help you implement and understand how the component work. If you want to build the component itself, you will require to know JavaScript, DOM and events management.

Building the screen element:

The screen element need to block action to go into the page's objects, that said it need to be on top of any of the page's elements. So it will get position:absolute;width:100%;height:100%, then we position it from the start by let it: top:0;left:0 and high z-index (say 20) for align in to the top.

For stopping actions to go into the page's objects we need to listen to the event and cancel it:

// JavaScript code:
// For standard compliance browsers:
eventObject.preventDefault();
eventObject.stopPropagation();

//For Internet Explorer:
window.event.returnValue = false;
window.event.cancelBubble = true;

Building the window element:

The window element is actually a DIV element which position on top of the screen object, so in such way it will can listen to events. So it will get position:absolute and higher z-index then the screen element. If you want to position the DIV in the middle of the page, you need to let the element: top:50% and negative margin-top with half of the element height (offsetHeight property of the element in DOM).

In this element we put the content we want to show. For example: Webmaster.org.il use Iframe in the box that connected to their content, other use this technique for showing their image galleries (named officially LightBox).

Implemntations:

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating away from the linking page.

MUI is my implementation for this component. It is part of my UI library that based on MooTools that I develop in my spare time. In order to use the code you need to download the whole library and use the component or download from the SVN what you want.

Writing a code that need to work on a lot of websites/applications (for example: WordPress plugin) require us to ensure that the code is working in every site properly, and that our code isn't affect on the site code itself.

The code won't work if something outside our code change how the code works, by overriding function and variables. That can easily happen if we put our code in the global namespace.
We can accomplish this requirement by saving on our code's namespace, if we run our code in private namespace the code will not affect on the hosting site and backward. Every JavaScript programmer who has a few experience with JavaScript and functions know that variables which declared in the function aren't exposed outside the function. We can use this fact to our mission., if we  surround our code with anonymous function declaration and call immediately the function, we will achieve a private namespace, a world that is private to us, and only to us, nobody outside the function can affect it.

var x = “Hello World”;
(function(){
    var x = “Hello Anonymous World!!!”;
    alert(x); // alerts “Hello Anonymous World”
})();
alert(x); // alerts “Hello World”

So when we define a variable or function inside the anonymous function it won't override any variable/function outside.
To expose a object (variable, functions, in JavaScript anything is object) to the world (in other word register it in the global namespace) we can use another JavaScript features, each object property can called or created by his key as in Hash Tables. Each variable in the global namespace is actually a property of the global `window` object that exposed by the browser, and by use these features together we can expose the object outside to the large world:

(function(){
    var x = “Hello Anonymous World!!!”;
    alert(x); // alerts “Hello Anonymous World”
    window[“data”] = x;
})();
alert(data); // alerts “Hello Anonymous World”

You can see this technique a lot in JQuery plugins that need to work together without override each other variables/methods.
Another way to save the global namespace and exposing the functionality to the world, is by using a one variable, with unique name that will contains the functionality of the whole application. Like JQuery or Yahoo! UI does.

Event Delegation is a technique that get a lot attention lately in blogs and other resources  that I read, so I decide to write about it too.
 
Event Delegation is a technique to attach globally events to each element that match the condition (for example: CSS/XPath selector). Every time that new element which correspond the condition will appended into the document, it will have the event automatically.

The technique works with the bubbling ability of the DOM Events model to capture the event. The bubbling ability enable to register an event in high level and catch the event for lower level, because every event that occur will bubble up to higher elements in the hierarchy. For example if we have this structure:
<ul>
    <li><span>text</span> other text </li>
    <li><span>text</span> other text </li>
    <li><span>text</span> other text </li>
</ul>

When we click on one of the SPAN elements, the click event will fire on the SPAN element, and after on each of his parents: li, then ul, and then more higher level such as BODY element, document, and window objects.

When an event occur, an event object sent to the registered event listener. The event object contains a lot of properties and methods, the one important to this technique is the `target` property. The `target` property point on the element which fire the event, in our example it is the SPAN element. In Internet Explorer there isn't `target` property, instead there is the not standard `srcElement` property.

If we append a new “<li><span>text</span> other text </li>” into the ul, the SPAN element will automatically has the event listener, without do anything, because we capture it in more higher level.

I added this technique to my UI library (Mootools UI), and a demo page that show the technique.

More reading:
http://icant.co.uk/sandbox/eventdelegation/
http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders

Hebrew translation of this post

My name is Nir Tayeb, I'm a young (18) web developer who use Ruby and PHP technologies to write my server side and a JavaScript expert. Also I use JAVA for desktop programming from time to time.

I write a blog at blogli.co.il about Server side development, JavaScript UI programming and spread interesting news (to me at least).

I'm going to cross posting here and in blogli too, here in English and there in Hebrew.

I know that the most of the bloggers and the readers here using exclusively MS technologies, but I hope that I will interest you in my posts.