mootools example!

Click here for the example!

mootools is the next version in the Mad4Milk.com library set. The guys took the moo.ajax, moo.fx and the prototype.lite library and re-worked it to exclude the prototype part of the library and combine all the moo libraries in one library. When you go download the scripts, you can decide which add-ons and plug-ins you would like to include.

Note: the moo.ajax library is deprecated and you will need to replace it with the mootools library.

If you looked at my moo.ajax example, you will note that there is only one difference in the implementation of the ajax library.

moo.ajax:

new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction});

mootools:

new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction}).request();

As you can see, the only difference is the request() at the end.

In the mootools example, I combined the ajax call with an effect to change the <div> element style.

There are many, many options in the mootools library. Here I have used the Fx.Style class to manipulate the <div> element height, width and opacity.

function myFunction(){

var myEffects = new fx.Styles(’myelementid’, {duration: 500, transition: fx.Transitions.linear});

myEffects.custom({

‘height’: [40, 100],

‘width’: [400, 300],

‘opacity’: [1,0.3]

});

}

In this example, the font color changes from white to red.

function myFunction(){

var myEffects = new fx.Color(’myelementid’, ‘color’, {duration: 500});

myEffects.toColor(’f00′);

}

TIP: The effect ALWAYS looks better in Firefox. Don’t believe me? Try it in IE then in Firefox or Flock and see the difference

Blogged with Flock

6 Comments to "mootools example!"

• qureyoon said: On 11/23/2006 at 4:11 am

  great example this will help beginners to get use to mootools
  nice work Stii

• qureyoon said: On 11/28/2006 at 5:37 am

  Stii, check this out

• Stii said: On 11/28/2006 at 6:43 am

  I saw that 1! And an awesome and complete reference it is!

  Everyone interested in mootools, check this one out:
  http://clientside.cnet.com/examples/mootools-primer/

• samiam said: On 11/29/2006 at 6:11 pm

  what are the contents of stii.php ?

• stii.za.net » Blog Archive » mootools - simple field validation. said: On 12/12/2006 at 7:29 am

  [...] I took my previous mootools example and added a validate function: function validate(form1){             if (form1) {                 if ($(’yourname’).value.trim() == “”) {                     alert(”Name field cannot be empty”);                     $(’yourname’).focus();                     return;                 } else if ($(’yourmsg’).value.trim() == “”) {                     alert(”Message field cannot be empty”);                     $(’yourmsg’).focus();                     return;                 } else {                     aStiiFunction();                 }             } else {                 if ($(’yourname1′).value.trim() == “”) {                     alert(”Name field cannot be empty”);                     $(’yourname1′).focus();                     return;                 } else if ($(’yourmsg1′).value.trim() == “”) {                     alert(”Message field cannot be empty”);                     $(’yourmsg1′).focus();                     return;                 } else {                     aStiiFunction1();                 }             }         } [...]

• stii.za.net » Blog Archive » Web 2.0 misconceptions said: On 12/13/2006 at 10:31 am

  [...] You get your graphic designer and tell him: “You. Go look at some web 2.0 sites and make our site look that way! NOW!”. Then you ask your programmer: “You. Do you know AJAX?” and he reply “No.” and you reply “You are FIRED!” and you hire an AJAX specialist. You tell him “No page must reload. All forms and navigation must go through AJAX calls!” ( After a couple of months you’ll fire him again because your SEO is not working ). You add a blog to your web site. [...]

Spit it out!

Filed in: ajax, javascript, moo.ajax, mootools by: Stii