Voici un aperçu très original proposé par rickyh.co.uk du mariage entre MooTools et CSS3 et des nouvelles possibilités qu’offrent ces deux technologies en termes d’effets visuels pour le web. Inutile de préciser qu’il est préférable de disposer d’un navigateur récent

Glissez par ici…

Nous l’attendions depuis longtemps ! La forge du framework JavaScript MooTools destinée au partage de plugins est désormais en ligne !

Celle-ci concentre déjà plusieurs dizaines de plugins et propose pour chacun d’entre eux le téléchargement des sources, une démonstration, un tutoriel et la liste des dépendances, chose qui manquait cruellement par le passé.

Pour les utilisateurs de jQuery, la forge de MooTools est comparable à la section plugins du site de jQuery.

Une petite sélection de plugins incontournables

Voici une petite sélection personnelle des meilleurs plugins actuellement disponibles sur la forge :

• LazyLoad
• MooTools FileManager
• Lighter
• ScrollSpy
• InputMask
• MeioMask
• Database

Accéder à la MooTool Forge.

What is MooEasyRollover ?

MooEasyRollover is a plugin for Mootools that allows you to make a simple rollover image without writing any code line !
The plugin is able to detect all images tagged with a specific class in order to add a rollover image behavior with an image caching.

Live Demo

Check out the MooEasyRollover live demo to see it in action !

Why this Mootools plugin ?

I was working on an old website that use the Macromedia function mm_swapimage, when I added some Mootools stuff, I thought it can be cool to be able to do the same work than mm_swapimage with a Mootools class

Installation instructions

• Download the MooEasyRollover archive.
• Then, add mootools to your page, note that the plugin requires the Assets class of the more builder.
• Add the MooEasyRollover class to your page :

<script src="/js/mooeasyrollover/mootools-1.2.2-core.js" type="text/javascript"></script>
<script src="/js/mooeasyrollover/mootools-1.2.2.2-more.js" type="text/javascript"></script>
<script src="/js/mooeasyrollover/mooeasyrollover.js" type="text/javascript"></script>

• Use this code to launch the plugin. Make sure to set options with the correct values according to your server.

window.addEvent('domready', function() {
 
        //MooEasyRollover launcher
	var MooEasyRolloverInstance = new MooEasyRollover({
		MooEasyRolloverClass : 'rollover', //Set the class which tags all buttons to rollover
		fullPath : 'http://www.domain.com/buttons/', //Set the full path to your images folder
		prefix: '-on' //Set the prefix of mouseover images
	});	
 
});

MooEasyRolloverClass is the classname used to identify images to rollover.

Fullpath is the path to the images folder to use.

Prefix is used to identify rollover images, for exemple, in order to rollover button.png you have to create a button-on.png image in the fullPath folder.

Download

Click here to download MooEasyRollover.

I am using Mootools with most of my CodeIgniter projects, and I often have to use site_url() and base_url() inside my Mootools script especially when I’m dealing with ajax uploading (in order to refresh picture thumbnails for example).

That’s why I have implemented a very simple way to use CodeIgniter‘s config values in a Mootools script :

Setting up the CodeIgniter controller

The point is to generate a JavaScript file with a CodeIgniter controller.

1. Create a new PHP file called mootools.php in system/application/controllers/
2. Copy / Paste the code below inside mootools.php

<?php
 
class Mootools extends Controller {
 
	function Mootools()
	{
		parent::Controller();	
		$this->load->helper('url');
	}
 
	function index()
	{
 
		header('Content-type: application/javascript');  
 
		$js = "
 
			var site_url = '" . site_url() . "';
			var base_url = '" . base_url() ."';
 
		";
 
		echo($js);
	}
 
}
 
/* End of file mootools.php */
/* Location: ./system/application/controllers/mootools.php */

Adding the JavaScript file to your header

Next, we have to add the JavaScript file generated by CI inside our HTML header, just add this line after the mootools inclusion in your header view:

<script src="<?php echo site_url('mootools') ?>" type="text/javascript"></script>

Testing

Here is a simple testing script that write your base_url() and site_url() value in two H2 tags.

The CodeIgniter view to load:

<html>
	<head>
		<title>Mootools / CodeIgniter integration by www.nukium.com</title>
		<script src="<?php echo base_url() ?>js/mootools-1.2.2-core-yc.js" type="text/javascript"></script>
		<script src="<?php echo site_url('mootools') ?>" type="text/javascript"></script>
		<script src="<?php echo base_url() ?>js/demo.js" type="text/javascript"></script>
	</head>
	<body>
		<h2 id="demo-site_url"></h2>
		<h2 id="demo-base_url"></h2>
	</body>
</html>

The JavaScript testing file:

1. Create a new file in /js called demo.js
2. Copy / Paste the code below inside demo.js

window.addEvent('domready', function(){
 
	$('demo-site_url').set('text', site_url);
	$('demo-base_url').set('text', base_url);
 
});

Then just load the view inside a controller to see your config values printed in the two H2 tags

PS: Don’t forget to add the mootools core in the /js folder !

Suite à un tweet de @cpojer j’ai pris le temps de traduire son excellent plugin MooTools FileManager.

Pour utiliser MooTools FileManager en français, téléchargez le fichier de langue et rajoutez le à la liste des scripts inclu dans votre page HTML :

<script type="text/javascript" src="../Source/Language/Language.fr.js"></script>

Utilisez ensuite le paramètre ‘fr’ lors de l’instanciation du plugin :

	/* Simple Example */
	var manager = new FileManager({
		url: 'manager.php',
		assetBasePath: '../Assets',
		language: 'fr',
		uploadAuthData: {session: 'MySessionId'}
	});
	$('example3').addEvent('click', manager.show.bind(manager));

C’est tout

Je vous invite également à lire la documentation de Mootools FileManager.

I was looking for a simple but elegant effect to highlight a menu item to announce a new feature on one of my websites.

I made a simple Mootools based script that switch periodically the color of a text element in order to create an elegant highlight effect.

This code has been tested under mootools 1.2.1 core and mootools 1.2 more builds.

Support and feedback are both available in English and in French.

Any feedback would be appreciated !

The Mootools script

var highlight = true;
 
var periodicalFunction = function(){
	if(highlight) {
		this.tween('color', '#F89838'); //Change to your custom color
		highlight = false;
	} else {
		this.tween('color', '#000000'); //Change to your custom color
		highlight = true;
	}
}
 
window.addEvent('domready', function() {
 
	if($defined($$('.highlight'))) {
		var passedVar = $$('.highlight');
		var periodicalFunctionVar = periodicalFunction.periodical(700, passedVar); //Change to your custom time
	}
 
});

The HTML

<ul>
	<li>No highlighted</li>
	<li class="highlight">Highlighted</li>
	<li>No highlighted</li>
	<li class="highlight">Also highlighted</li>
</ul>

Live showcase

• No highlighted
• Highlighted
• No highlighted
• Visit www.nukium.com

Download showcase