Category Archives: MooTools

Lots of Mootools scripts and resources for webdevelopment, tutorials, documentation, tips and tricks.

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

Ingredients: sprites, unorderdered lists, Mootools knowledge.
Cooking time: 1 hr
The Result: Can be seen on our – Demo page – mouse-over the top menu.
Rborn web development glowing 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

<ul id="mainnav">
<li><a href="/">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="/blog/">news</a></li>
<li><a href="#">contact</a></li>
</ul>

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

Upload forms – enhanced

Upload forms are something we often use in our projects. Sometimes a simple upload form is not enough, so I’ll try to compile a list with enhanced file upload forms that help us to improve the look, functionality and usability of our sites.

Stickman multiple file uploader

capture-11

The linked version is Mootools v1.2 based but there is a version for v1.1 and also one framework independent.

The script allows you to add multiple files in a nice form,multiple forms in the same page, and customization.

FancyUpload – Swiff meets Ajax (v3.0)

Flash+Mootools unobtrusive upload form.

  • Select and upload multiple files
  • Filter files by type in the select dialog
  • Optional Events to add your own behavior
  • Show and filter useful file information before the upload starts
  • Limit uploads by file count and/or file size
  • Platform and server independent, just needs Flash 9+ (> 95% penetration)
  • Unobtrusive, since the element is replaced after the swf loaded successfully
  • Cancel running uploads, add files during upload
  • Everything is optional, documented and easy editable
  • New in 2.0
    • Get the server response after upload for showing additional information or previewing the image, etc.
    • Shows the current upload speed and the time left
    • Send additional request data via GET or POST variables
    • Set the filename for the upload request

Ajax file upload

Jquery and Prototype versions available.
capture-31

Clientside validation for accessible forms with mootools

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 solve our task. Basically 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 formatting.

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

<label for="name"> Name <span> (required) </span></label>
<input  tabindex="1" type="text" name="name" id="name" class="required" />
<label for="mail"> Email <span> (required)</span></label>
<input  tabindex="2" type="text" name="mail" id="mail" class="validate-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

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

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