Scrolling to the Top and Bottom of the page using Mootools

Scrolling to the top and bottom is very easy in mootools. Check out the code below.

window.addEvent('domready', function(){

	var myFx = new Fx.Scroll(window);

	$('bottom').addEvent('click', function(e){
		e.stop();
		myFx.toBottom();
	});

	$('top').addEvent('click', function(e){
		e.stop();
		myFx.toTop();
	});

});

Lines 5-8 lets you scroll to the bottom of the page. While lines 10-13 lets you scroll to the top of the page. Easy huh?

Note: Fx.Scroll plugin must be included. Get it at Mootools More Builder.

Check out the demo

Fx.slide using Mootools and CakePhp

Using Fx.slide in Cakephp is very easy. In this tutorial, I assume you know how the MVC works and how to create one.

First, include the javascript in the head section of the default.ctp file. There are only two javascript files. They are the mootools.js( core ) and slider.js. Put these files inside /app/webroot/js.

Read more…

Mootools Wordpress Delete Effect

This tutorial will show how to animate a content when a delete link is clicked. The script is based on wordpress comment deletion.

Create first a html file and put the following code inside the body.
Read more…

Simple Mootools Shoutbox

In this tutorial i’ll show how to create a simple shoutbox mootools script that is based from other existing shoutbox on the net.

Features of simple mootools shoutbox:

• Posting of messages
• Refreshes the page periodically for new posts to appear
• Loads previous messages
• Uses mysql as data storage

Read more…

reCaptcha using Mootools’ Json Request

A captcha program can tell if a user is a human or a computer. Most websites use captcha in order to prevent spam. You can see this mostly in contact and signup forms. One great captcha service that is available today is reCaptcha. If you are not quite familiar with how reCaptcha works, I’ll show you how. First, you must get an API key first at http://recaptcha.net/api/getkey. After you get the public and private keys, create an xhtml file and insert the snippet below at the head section of the file.

<script src="http://api.recaptcha.net/js/recaptcha_ajax.js" type="text/javascript"></script>

Next, we will be needing the Mootools library which we will use in order for Recaptcha.js to function.
Read more…