mootools

MooTools Basic Tips (lesson 3): interaction with HTML Form

Filed Under ( CSS, Javascript, Programming, Technology, Tutorial ) by admin on 01-10-2008

Tagged Under : Javascript, mootools, Tips

This post is the third lesson which I dedicate to MooTools for newbie and illustrates how to implement simple interactions with form input elements using this powerful framework and unobtrusive JavaScript code.

Some time ago I wrote this post where I explained some useful tips to enrich HTML Form using simple JavaScript functions. Some readers asked to me to illustrate similar examples using MooTools and unobtrusive JavaScript code, so in this tutorial I implemented the Twitter-like chars counter example of my previous post. This counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field:

Click on the link below to download the full code: Read the rest of this entry »

0 Comments

MooTools Basic Tips (lesson 2): get elements ID using unobtrusive code

Filed Under ( CSS, Javascript, Programming, Technology, Tips, Tutorial ) by admin on 01-10-2008

Tagged Under : mootools, Tutorial

In this post I want to illustrate how to get the ID of DOM elements using MooTools and unobtrusive elegant code.
1. An “Obtrusive” way to implement it

Before to explain how to do it with MooTools, I think it’s better take a look at the following HTML code: Read the rest of this entry »

0 Comments

MooTools Basic Tips for Web Designer (Lesson 1)

Filed Under ( CSS, Javascript, Tips, Tutorial ) by admin on 01-10-2008

Tagged Under : Javascript, mootools, Technology

In this first lesson you can see how to manipulate element properties, in particular how to get DOM element by ID, how to use getStyle(), setStyle() (to get and set CSS properties), toInt() to convert string to number and some examples to introduce how to write unobtrusive JavaScript code with MooTools.
1. Add Mootols framework to your page

First, you have to download the latest version of MooTools and add a link to the framework within the <head> tag of the page: Read the rest of this entry »