cssgallery.info » MooTools

How to make a glowing menu with MooTools in 3 easy steps

Dan Tamas — Wed, 28 Apr 2010 12:11:17 +0000

Ingredients: sprites, unorderdered lists, Mootools knowledge.
Cooking time: 1 hr
Result:
Can be seen on our website – Rborn Web development – mouse-over the top menu.

Preparation of the Mootools glowing menu

The menu is a list containing an A tag for each menu item. We are using sprites and text-indent:-5000px for accessibility purposes. The trick is that we use the image positioned top for LI and bottom for A HREF

Step 1: cook the HTML code


home
products
portfolio
news
contact

Step 2: add the CSS code

li.home {background:url("../img/home.png") top left;}
li.home a {width:29px;background:url("../img/home.png") bottom left;}

This is the positioning of the background image I was talking about earlier.
Now the magic of the glowing is made with few lines of code using MooTools.

Step 3: spice with MooTools code

$('mainnav').getElements('li a').each( function(item){
    if ( !item.hasClass('clicked') ) {
        item.setStyle('opacity',0.01).addEvent('mouseenter', function() {        
this.fade(1)}).addEvent('mouseleave',function(){this.fade(0.01)});
}
})

The code is triggered either on domready event, or put inside a script tag just before the body ends so have the dom loaded and ready to be accessed by javascript.

Basically all we are doing is to get all the A tags inside the menu, set the opacity to 0.01 because if you set it to 0 MooTools will add display:none to the style and the links won’t be visible anymore.

Further we play with the fade method to increase the opacity to 1 or decrease back to 0.01 on the mouseenter and mouseleave event.

We also check if the menu is active or not – we are on the menu page or not – verifying if the item has a class ‘clicked’, set by the backend. If the item contains this class we simply leave it alone and the item is ‘on’ all the time.

That’s it. Let me know your thoughts.

Check the Spanish version of this post:
Cómo hacer un menú brillante con MooTools en 3 pasos

Website of the day: Floom

Dan Tamas — Tue, 27 Oct 2009 12:08:11 +0000

Well, is not actually the site but the script behind.

Floom is a beautiful MooTools plugin, that takes a collection of images and creates a blinds-effect slideshow.

The demo is simply outstanding, so that’s why this is the today’s website.

More info, specs and docs on the developer’s site: Oskar Krawczyk.

Clientside validation for accessible forms with mootools

Dan Tamas — Wed, 29 Jul 2009 17:11:27 +0000

As we discussed in a previous article about forms -Basic copy-paste accessible contact form - we made the form validation accessible using a class that will highlight and point to the elements that need to be filled or corrected in case the validation failed.

Now, the only weak point form the user’s point of view is the fact that we need to refresh the page every time he hits submit, this being somehow annoying. Nowadays most browsers offer a client-side processing capabilities ( javascript ) that can be used for local validation – avoiding the refresh of the page.

Don’t get me wrong. The server side part needs to remain intact for accessibility purposes.

The last MooTools version offers a validation plugin in the mootools-more package, that will help us to solve our task. Basicaly we need to add some classes to out inputs, to reflect the type of validation we want. For our form, we need only name – mandatory, and email – mandatory + correct email formating.

So we’ll use required and validate-email from the list of the validators already included, like this:

 Name  (required) 

 Email  (required)

The next step is to create the code that does the validation:

On the domready event of the window (we need to allow the html to load and therefore to be able to access it) we attach the validator to our form with the methods needed to show the user what he did wrong (in case he did it). To keep the presentation and the accessibility intact – as in the back-end validation – we will add the next code:

window.addEvent('domready', function(){
	var myFormValidator = new FormValidator($('contact'), {
		onFormValidate: function(ok) {
			$('error_wrapper').getElements('a').dispose();
			if (!ok) {
				$('contact').getElements('.validation-failed').each( function(el) {
					var a = new Element( "a",{'href' : "#add"})
                            .addEvent('click', function(){ el.focus(); return false; })
                            .set('text', el.get('id').capitalize() )
                            .inject($('error_wrapper'));
				})
 
				$('error_wrapper').setStyle('display','block');
			}
			else {
				$('error_wrapper').setStyle('display','none');
			}
		},
		stopOnFailure:true,
		evaluateFieldsOnBlur:false
	});
})

Ok, it’s a little long but basically it’s validating each field it needs to, as specified in the class, and attach in the error_wrapper the labels to the erroneous inputs. It’s better to study the code and see exactly how it’s done.

Now, what is happening?

The MooTools library is validating each field we specified on the submit event of the form and adds by default a class validation-failed or validation-passed to each field that was submitted to the validation routine.

We can use these two classes to visually improve the form – here I just made the faulty ones red. If the validation failed the submit event of the form is stopped and the incomplete data is not reaching the server.

Next step: to complete the correct data, and resubmit.

Here is the DEMO

The form validator class is more powerful than this so take a look at the documentation on the MooTools site.
Anyway, no matter what you do, do not forget to make the server side validation too. It is mandatory for your (server’s ) security.

Mootools with touch events

Dan Tamas — Tue, 05 May 2009 11:55:48 +0000

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

Check the Spanish version of this post:
Motools con eventos de toque

Mootools – browser sniffing

Dan Tamas — Tue, 17 Mar 2009 17:12:54 +0000

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 he using.

For example Chrome. It’ss ok, is using webkit, but it’s 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

Dan Tamas — Sat, 17 Jan 2009 13:53:25 +0000

As the guys from Mozilla say “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 own platform.

Mootools ‘ajax’ request for local files

Dan Tamas — Sun, 11 Jan 2009 18:40:27 +0000

Ok, ok, I know it’s 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.

Add this to DZone

Stumble upon something good? Share it on StumbleUpon

Share this on del.icio.us

Digg this!

Post on Google Buzz

Share this on Reddit

Share this on Technorati

Share this on Facebook

Clip this to Evernote

Add this to Google Reader

Submit this to Meneame

Mootools off-line documentation

Dan Tamas — Mon, 11 Aug 2008 10:02:50 +0000

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

Dan Tamas — Wed, 09 Jul 2008 15:27:00 +0000

There are moments when we need to show a zoomed image of a product (or something else) that requires to be as much as user friendly as possible. An example is 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:

and mooZoom will take care of the rest. You will also need mootools v1.2

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

Dan Tamas — Fri, 13 Jun 2008 23:53:01 +0000

We continue our series 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 in order 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.

It look something like his:

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

the html code will be something like this:

 
   window title 
   
   content

We won’t cover here the CSS part, please look at the demo for a 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, isn’t it?

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.