mooTools Extension

mooTools provide an excellent workframe and provide a lot of resource to extend upon. However, to create some of our tools, we needed to extend the mooTools framework and create custom functions which take full advantage of the current framework and complement it.

Option	Description	Arguments	Return Value
$_GET	A duplicate of the PHP $_GET variable in JavaScript	N/A	The $_GET value
Example: if the URL is http://www.domain.com/page.html?ID=213 alert($_GET['ID']); // will alert 2134
$randomLetters	Generate a random string with the length provided	numLetters: is the number of letters in the returned string	Random string
Example: alert($randomLetters(7)); // will alert "dl4D3sD" for example
$hCenterAbsolute	Center an object with an absolut positioning (horizontal)	obj: is the object to be centerd reValue: boolean value to either return the left position if true or move the object if false	if reValue is true will return the left position to center the object otherwise center the object horizontally
Example: HTML: <div id="div1" style="position:absolute;">Test object</div> ... later Script: $hCenterAbsolut("div1");
$vCenterAbsolute	Center an object with an absolut positioning (verticlly).	obj: is the object to be centerd reValue: boolean value to either return the top position if true or move the object if false	if reValue is true will return the top position to center the object otherwise center the object verticlly
Example: HTML: <div id="div1" style="position:absolute;">Test object</div> ... later Script: $vCenterAbsolut("div1");
$centerAbsolute	Center an object with an absolut positioning on the screen	obj: is the object to be centerd reValue: boolean value to either return the object's top and left (as an object) position to center on the screen or move the object if false	if reValue is true will return the object's top and left (as an object) position to center the object otherwise center the object verticlly
Example: HTML: <div id="div1" style="position:absolute;">Test object</div> ... later Script: $centerAbsolut("div1");
$alwaysCenter	Will try to keep the object centered on the screen at all the time	a list of object to be centered on a screen e.g. $alwaysCenter("obj1", "obj2", "obj3", ...);	N/A
Example: HTML: <div id="div1" style="position:absolute;">Test object</div> ... later Script: $alwaysCenter("div1");
$fixIEPng	Will fix PNG images on IE 6 and below NOTE: Don't use with the DockingMenu, the images will disappear. use $switchIEPng2Gif instead	spacer: is the spacer image source, if empty will be images/spacer.gif	N/A
Example: when the page loads: $fixIEPng();
$switchIEPng2Gif	Switch the png image with a gif version. The extension must be in lower case on both images both images should share the same name except for the extenssion	imgs: a list of images to be changed	N/A
Example: when the page loads: $switchIEPng2Gif($$('img'));
$daysInMonth	moved to nogray_date.js
isUpper	Extends the String type and check if all the characters in the string are upper case	N/A	True is all the characters in the string are upper case, false otherwise.
Example: alert("Hello World".isUpper()); // will alert false alert("HELLO WORLD".isUpper()); // will alert true
isLower	Extends the String type and check if all the characters in the string are lower case	N/A	True is all the characters in the string are lower case, false otherwise.
Example: alert("Hello World".isLower()); // will alert false alert("hello world".isLower()); // will alert true
isNumeric	Extends the String type and check if the string is in a number format	N/A	True is the string in a number format, false otherwise.
Example: alert("45 men".isNumeric()); // will alert false alert("45.25".isNumeric()); // will alert true
desaturate	Extends the Color plugin for mooTools and returns the desaturated the color	N/A	The desaturated the color
Example: alert(new Color("#ff0000").desaturate().hex); // alert #808080
webSafe	Extends the Color plugin for mooTools and returns the websafe equivalent of the color	N/A	The websafe equivalent of the color
Example: alert(new Color("#32fd88").webSafe().hex); // alert 33ff99

Option

Description

Arguments

Return Value

$_GET

A duplicate of the PHP $_GET variable in JavaScript

N/A

The $_GET value

Example:

if the URL is http://www.domain.com/page.html?ID=213
alert($_GET['ID']);		// will alert 2134

$randomLetters

Generate a random string with the length provided

numLetters: is the number of letters in the returned string

Random string

Example:

alert($randomLetters(7));	// will alert "dl4D3sD" for example

$hCenterAbsolute

Center an object with an absolut positioning (horizontal)

obj: is the object to be centerd
reValue: boolean value to either return the left position if true or move the object if false

if reValue is true will return the left position to center the object otherwise center the object horizontally

Example:

HTML: <div id="div1" style="position:absolute;">Test object</div>
... later
Script:
$hCenterAbsolut("div1");

$vCenterAbsolute

Center an object with an absolut positioning (verticlly).

obj: is the object to be centerd
reValue: boolean value to either return the top position if true or move the object if false

if reValue is true will return the top position to center the object otherwise center the object verticlly

Example:

HTML: <div id="div1" style="position:absolute;">Test object</div>
... later
Script:
$vCenterAbsolut("div1");

$centerAbsolute

Center an object with an absolut positioning on the screen

obj: is the object to be centerd
reValue: boolean value to either return the object's top and left (as an object) position to center on the screen or move the object if false

if reValue is true will return the object's top and left (as an object) position to center the object otherwise center the object verticlly

Example:

HTML: <div id="div1" style="position:absolute;">Test object</div>
... later
Script:
$centerAbsolut("div1");

$alwaysCenter

Will try to keep the object centered on the screen at all the time

a list of object to be centered on a screen e.g. $alwaysCenter("obj1", "obj2", "obj3", ...);

N/A

Example:

HTML: <div id="div1" style="position:absolute;">Test object</div>
... later
Script:
$alwaysCenter("div1");

$fixIEPng

Will fix PNG images on IE 6 and below

NOTE: Don't use with the DockingMenu, the images will disappear. use $switchIEPng2Gif instead

spacer: is the spacer image source, if empty will be images/spacer.gif

N/A

Example:

when the page loads:
$fixIEPng();

$switchIEPng2Gif

Switch the png image with a gif version. The extension must be in lower case on both images both images should share the same name except for the extenssion

imgs: a list of images to be changed

N/A

Example:

when the page loads:
$switchIEPng2Gif($$('img'));

$daysInMonth

moved to nogray_date.js

isUpper

Extends the String type and check if all the characters in the string are upper case

N/A

True is all the characters in the string are upper case, false otherwise.

Example:

alert("Hello World".isUpper());	// will alert false
alert("HELLO WORLD".isUpper()); // will alert true

isLower

Extends the String type and check if all the characters in the string are lower case

N/A

True is all the characters in the string are lower case, false otherwise.

Example:

alert("Hello World".isLower());	// will alert false
alert("hello world".isLower()); // will alert true

isNumeric

Extends the String type and check if the string is in a number format

N/A

True is the string in a number format, false otherwise.

Example:

alert("45 men".isNumeric());	// will alert false
alert("45.25".isNumeric()); // will alert true

desaturate

Extends the Color plugin for mooTools and returns the desaturated the color

N/A

The desaturated the color

Example:

alert(new Color("#ff0000").desaturate().hex);     // alert #808080

webSafe

Extends the Color plugin for mooTools and returns the websafe equivalent of the color

N/A

The websafe equivalent of the color

Example:

alert(new Color("#32fd88").webSafe().hex);     // alert 33ff99

mooTools Extension

Configurations: