Ingredients: sprites, unorderdered lists, Mootools knowledge.
Cooking time: 1 hr
The Result: Can be seen on our – Demo page – 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

<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

No related posts.

I am sure you all know about Mictosoft’s IE9 Testdrive. Its main target was, for now, the developer – in an attempt to showcase the improvements in IE9 and maybe make us be more nice to them and forget how much time we waste with IE6.

What I was interested as a frontend developer was the the compatibility tables for features like SVG, CSS3 and DOM. And the test results, as per Microsoft’s page, are all gorgeous.

A more detailed list of supported features can be seen by checking their website but long story short, everything is green for them and not so green for the other browsers, except CSS3 :nth-child selector and CSS comments

and DOM level 2 style @import inside of @media

Another very interesting source of information regarding the present and future features supported by the browsers is When can I use… that also includes HTML5 elements – I notice IE9 testdrive page is not mentioning anything about HTML5 altough IE9 is expecting to support it in a certain percentage. They have also calculated the support that past and future browsers have for some features and their numbers are like this:

But you’d better check their website to see the features they worked with cause there are some differences that worth being taking into account.

We salute Microsofts initiative, altough we would love to see some of these CSS3 borders, backgrounds and selectors embedded in an IE8 update…cause we all check our statistics….

No related posts.

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

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.

Related posts:

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

Why?

Because “Downloadify is a tiny JavaScript + Flash library that enables the generation and saving of files on the fly, in the browser, without server interaction.”

You can generate in the client side, with no server interaction files that can be saved on the user’s computer.

Think about this:

Downloadify, a clientside persistent storage script ( like persistjs or lawnchair), some manifest file for html5 cache  and of course a capable browser , and you have a full offline webapp capable of saving files to local disk and that can be syncronized with the server when internet is available.

No related posts.

Twitter needs no presentation, and the fact that many webmasters include their posts on their sites either. This can be done in may ways, using  the Twitter API. One easy way is javascript. Thanks to some libraries you need few lines of code, and, because all is client-side you have  zero load on the server.

The following scripts may help you accomplish this:

Remy Sharp’s twitter.js

The page includes step by step instructions, form setting up the script until the html markup. A nice feature is that is also hosted on googlecode, so you can take it form here, and have always the latest version.

Tweet!

jQuery based. MIT-licensed.

• small size and fast download time
• will not slow down or pause your page while tweets are loading
• display up to 100 tweets, as permitted by the twitter search api
• display tweets from a twitter search, or from your own feed
• optional verb tense matching, for human readable tweets
• optionally display your avatar
• optionally display tweets from multiple accounts!
• automatic linking of @replies to users’ twitter page
• automatic linking of URLs
• uses Twitter’s Search API, so you can display any tweets you like
• automatic linking of #hashtags, to a twitter search of all your tags
• converts <3 to a css styleable ? (we ? hearts)
• makes awesome text, AWESOME text with AWESOMEIZER
• customize the style with your own stylesheet or with other jquery plugins
• compatible with most jquery versions, including jquery 1.2.6 and the latest, 1.3.x

MooTools Request.Twitter

Not for newbies, but saves you form using another js on your page, in case you’re mootools based

A complete Tutorial

This is not a script, even if you can copy/paste the code, but a full tutorial how to create a ticker for your site. If you want to learn this is a very good start. jQuery please.

No related posts.

Today I will try to add more resources on the Javascript graphs utilities to create attractive and more intuitive data sets presentations( graphs ).

RGraph

HTML5 – graph library – yes HTML5 so IE users – change your browser, or use google frame. The library uses the latest CANVAS features and is fully documented on the site. It has a large variety of outputs:

Bar chart, Bi-polar chart, Donut chart, Funnel chart, Gantt chart, Horizontal Bar chart, LED grid, Line chart,Odometer, Pie chart, Progress bar, Pseudo radar chart, Scatter chart, Traditional radar chart.

Bluff

Another script that is based on CANVAS, only that this time can use the excanvas from google, to support IE. Is a “translation” of a ruby graphing library named Gruff.

The following two libraries use jQuery:

jQuery visualize plugin

Very simple to implement –  it gets it’s data from a table and even allows interactive data input.

TufteGraph

It is different from other javascript charting libraries because:

- Configuration is by dynamic functions, allowing for really compact API (very few options)

- Non-core layout is done via CSS rather than code

It’s fully tested on Safari3 and Firefox3 only

MooChart

Mootools based, it draws a bubble diagram using canvas, and can animate it. There is a nice demo on the script site.

Canvas 3d graph

Exactly what it says –  bar graphing but in 3D.

gRaphaël

Charting library based on Raphael. Cross browser interactive or static graphs.

Do you know more?

Let me know.

We have an update, thanks to Kilian, who seems that created a new graph library for prototype users. It renders the graphs with Raphael, so  is cross-browser, and I must admit it looks pretty. Below is a screenshot:

If you have your own libraries, or you  know others not specified here, you can submit it here.

I will update this post as many times as I’ll receive news from you.

No related posts.

What can you answer to your client when you try to explain that your code is W3c, semantic, crossbrowser and…accessible and your client asks you “Good for you you’re coding accessible websites, but do you actually know any blind user?” Meaning, why should someone care about how you code a site as long as table-based code is still ok and cheap?

Well…you may remain speechless. Cause I really don’t know any blind person nor a person using assistive technology altough I do know people that need to increase the font-size or lower the screen resolution to be able to read better. But even if I did not “see” one that should not mean they don’t exist – but how can this be proved?

Since assistive technologies do not leave traces, maybe a solution is to see who’s clicking the a+ a++ buttons. This surely will leave some trace, right?

So we started an experiment: we wrote a script counting the number of clicks performed on the a+ a++ buttons (I know it’s not very scientific – anyone can click – but we’re counting on the fact that our users do not know about the experiment and that at least a small percentage of the clicks will be genuine). Every click is counted and written in a file. We compare it to the Google Analytics stats and hope to obtain some information about this aspect of the sites.

After a month of comparing both methods we saw that the a+/ a++ navigation was clicked on a daily basis (even though one site was selling Christmas decorations !!! ) and most of the time a++ was the star ! Between 5% and 8% of the visitors were clicking these links and that is more than the number of clicks on “about” or “contact” links.

Now, the question that started this article remains – what is the best answer for the client asking  “Good for you you’re coding accessible websites, but do you actually know any blind user?”

No related posts.

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:

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

Related posts:

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

LAB.js (Loading And Blocking JavaScript) allows you load in parallel your js scripts , speeding up the process ( sometimes a lot). But also it can force that scripts are loaded in a certain order, so this way no dependencies are broken.

The developer declares a 2x speed improvement on his site.

On an ondevelopment project , with 9 js scripts and 282k without labjs the page loaded in 8 seconds and with labjs in 2.5. So we have a >3x improvement.

No related posts.

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

Related posts:

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