Mootools with touch events

I am so used with MooTools as I started to forgot the basic javascript, and more, I started to dislike a lot to write code in pure js. But MooTools lacks the touch events ipod and iphone has. So I wrote a small code that adds the touchevents -  well, touch, gesture, animation and transform -  to the Element class.

This will only  help you to add and remove the touch events the MooTools way, you still need to use e.preventDefault() as e.stop() is not working, and to detect touches by yourself. But at least you can use addEvent and removeEvent.

I am sure it can be improved, so If you have any ideas, just let me know.

Oh, yes, the code is here: mootouch.js

Mootools - browser sniffing

I know, I know, browser sniffing is a bad habit and it should not be used, but still, there are cases when you will want to display a message to the user (ordinary users, that don’t hack their’s browser navigator.userAgent), or you really need to know what browser is.

For example Chrome. Is ok, is webkit, but is not webkit… transparent png, with opacity set lower then 1 will look just awful in  Chrome.

So I wrote a simple function, “stealing” some code from PPK.

Include the script in your pages, and it will give you 2 more variables in Browser.Engine:

Browser.Engine.browserName

Browser.Engine.browserVersion

testing mootools apps using rhino shell

As the guys form mozilla says “The JavaScript shell provides a simple way to run scripts in batch mode or an interactive environment for exploratory programming.”
So basically you can create some tests for you app based on javascript, without needing a browser, but using rhino.
With Mootools is a little complicated, as it needs a browser environment to run, and rhino does not provide this.
The solution for this is to simulate a browser.
A great work in this direction is made by John Resig, the guy behind jQuery, here.
Only that you will need to modify a little the script, to work with Mootools

add the following lines at the very end of the env.js script

var document = window.document;
window.Element = window.DOMElement;
window.navigator.platform = “MacPPC”;

window.navigator.platform can be any platform, I used this to reflect my platform.

Mootools “ajax” request for local files

Ok,ok, I know is a contradiction in terms, but this is a problem encountered by a lot of newbies , and sometimes a feature like this would be useful to be able to copy the whole js into a local folder, and run it form here, without being forced to start a web server on the local machine.
How can this be accomplished without too much hassle or code change?

I created a function that tests the protocol used by the browser, and decides how to load the requested file, with xmlhttprequest or iframe.

Please be warned that this is just an exercise, and not a final solution. It can be improved and it should be

The example is here.
Obviously this will use the xmlhttprequest, but if you download this zip, and unzip it in a local folder, you will see working the iframe method.

The code is below:

function get_content(url,update) {
if ( document.location.protocol == “file:” ) {
// console.log(’local’);
var ifr = new IFrame({
src:url,
events:{
load: function() {
$(update).set(’html’, this.contentWindow.document.body.innerHTML );
}
}
}).inject(document.body);
}
else {
// console.log(’server’);
var myHTMLRequest = new Request.HTML({
update:update,
}).get(url);
}
}

Let me know your thoughts.

Mootools off-line documentation

Here we have documentation for both versions of mootools, 1.11 and 1.2, as chm files, and cheatsheets.

Cheatsheets are from http://mediavrog.net, but chm files i don’t know where are from, so if you know the author, please let me know so I can link to his page here.

The chm files can be opened in linux with Kchmviewer

and in os x with Chmox

DOWNLOAD the motools documentation.

How to create a product viewer using mooZoom

There are cases when we need to show a zoomed image of a product ( or something else ), that require to be as much as user friendly as possible. One of the cases are e-commerce sites that use high quality images for high impact over the client’s mind (jewelery for example).

In this case zooming a particular point ( but arbitrary chosen by visitor/client ) would be very useful, but without forcing it to leave the page, or hide some page controls - maybe buy button - like a “lightbox” script would do.

So we created mooZoom.

mooZoom is unobtrusive and allows a visitor to zoom an image in a very friendly way - just scroll the mouse in a desired point.

The image will zoom in/zoom out, depending on the direction of the wheel.  In a zoomed stage a simple drag will reveal the hidden part of the image.

The setup is ultra easy - you just need to add " class='moozoom' " to the zoomable images and give at least one dimension - width or height.

something like this:

<img class=”moozoom” src=”flower.jpg” alt=”mooZoom” style=”width:200px;”>

and mooZoom will take care of the rest. You will  also need mootools v1.11. (a script for v1.2 will be available as soon as possible)

We setup here a small demo, making a nice frame for a virtual product presentation.

There is always room for improvements  so if you have any suggestion  or found a bug  don’t hesitate to comment here.

Create window-like element with mootools

We continue our serie related to mootools with a tutorial that shows us how to build a window-like element on our page, that can be resized and moved. Based on previous tutorials, we will will create first the html and apply some js code to it, to obtain what we want. This tutorial is a simple one, so will cover only the basics to help a beginner to understand easier. A future tutorial will show, based on this, ho to create a class for windows.

So, for the beginning we need to set the html.We need next elements:

the ‘window‘ div = the window itslef;

the ‘topbar‘ - the window’s topbar, that will be used to move the window and to hold the title;

the ‘resizer‘ - the element that will resize the window.

All will look something like his:

Ok, we’ll give some ids to elements, “win” for window, “topbar” for topbar, “resizer” for resizer - pretty straight :).

the html code will be something like this:

<div id="win">

    <div id="topbar">window title</div>

    <div id="resizer"></div>

 content

</div>

We won’t cover here the CSS part,please look at the demo for basic style.

Then on event domready, we set “win” to be draggable, with handle set to “topbar”, set to be resizable, with handle “resizer”, and put some limits on resize, using “limit” property. This way we avoid some bad behaviour , like minimize too much the window.

document.addEvent( 'domready' , function() {

	$('win').makeDraggable({'handle':$('topbar')});
	$('win').makeResizable({

		'handle':$('resizer') ,

		'limit':{'x':[220,400], 'y':[120,400]}

		});

} );

Well, that is all. Pretty easy and nice, no?

Here is the demo.

This is done with MooTools V1.11. A later tutorial will explain how to do this with V1.2.

Let me know your thoughts or questions.

Singles Singles

Mootools 1.2 stable is out!

It seems that MooTools team just released the stable 1.2 version of popular framework mootools. Great job, and a big step forward.My only concern is what is going to happen with 1.11, as the website for the moment is working in a reduced form, docs, download being available only, but as they said “At least you can download, right?” :) Again, congratulations!    

A beginner’s mootools - create draggable and resizable elements

The today tutorial will try to explain how to make an element draggable or resizable - or even both in the same time, using the MooTools framework. To accomplish this we’ll make use of two functions existent in mootools: makeDraggable() and makeResizable().

This is very simple.We simply select the element we want to be resizable or draggable and use one of those functions:

$(’id_of_the_element’).makeDraggable();

or

$(’id_of_the_element’).makeResizable();

A good idea would be to set in css of the elements “position:relative” as, those functions assume that elements are positioned absolute, and may break your layout. But this depends on the layout you have.

Doing so, a drag of the element will drag it or resize it.

There are some parameters we can use for this functions.

One of this is ‘handle‘. Handle passed to the function will tell what other element is used to manage the drag or the resize of the main element.so something like :

$(’id_of_the_element’).makeResizable({handle:$(’id_of_handler’)});

will have the effect we obtain in demo page, for the orange div.

What do you have to pay attention on is that handle is an selected element so we need to use $(’id_of_handler’).

In the next tutorial we will try to use all the knowledge we learned until now - select and create elements, add events and make draggable or resizable, to create a window-like element than can be resized or moved around our page.

A beginner’s mootools - select and create elements

In previous tutorial we learned how to add events to elements in webpage. In this one we will learn how to select elements - or better said how to access an element from page, and how to create new elements in page.

In mootools we have two functions that select an element:

function $ - this is equivalent of document.getElementById and returns the object selected.

if we have an element with id = ‘my_element’, the expression $(’my_element’) will return that element, then we will be able to manipulate it.

and function $$ - this one allows you to select multiple objects, and return an array with selected objects.

$$(’a') will return all the ‘a’ elements in document.

A nice trick done by $$ is that you are able to select all the elements with same class:

$$(’.my_class’) will select all the elements in page that have class=’my_class’.

The creation of an element is done by declaration:

var my_element = new Element( type , { options }) ;

Let’s explain a little:

type - define the type of the element, for example img, li, input, div, etc..

options - this lets you specify at the moment of creation the attributes the new element has.

options is not mandatory, the equivalent html code being - let’s say for div - “<div></div>”

An example:

var my_img = new Element ( ‘img’ , { ’src’ : ‘aa.jpg’ , ’style’ : ‘width:200px; border:3px solid red’ }) ;

As u see, we create an img element and we set the src as aa.jpg and the style as above. Please note the way options are declared:

{attribute: value , attribute:value}

so pairs of attribute:value coma separated.

Ok, now we have the element my_img, but is not yet viewable. The new created element exist in browsers memory, but is not inserted yet in page. For this we need to use one of:

injectBefore( element) ;

injectAfter(element);

injectInside(element);

injectTop(element) ;

Remember the selectors we explained at the beginning of this tutorial? The element object is exactly an object select using $, or created previously,using new Element();

What each inject does?

injectBefore( element) ; - injects the new created element just before the passed element;

injectAfter(element); - injects the new created element just after the passed element;

injectInside(element); - injects the new created element inside the passed element, at the bottom. Be carefull you have to pass an element that support subelements - you cannot insert an ul in an img for example
injectTop(element) ; - injects the new created element inside the passed element but at the top.

Take a look at the example page , and in source to see practical implementation.