Le contexte

Imaginons que vous devez appliquer le même comportement d’événement à un ensemble d’éléments, il devient alors tout à fait naturel de créer une classe CSS qui permettra d’identifier tous les éléments et ainsi leur appliquer le comportement d’événement simultanément.

Ceci ce traduirait par le code jQuery ci-dessous (notez que j’utilise jQuery à la place de $ pour des questions de compatibilité avec d’autres librairies) :

jQuery('.jQuery-elements-1').change(function(e){
   //traitement de l'événement
});

Le problème

Le code que nous venons de voir fonctionne bien, en revanche comment appliquer ce même comportement à un second ensemble d’éléments sans pour autant dupliquer de code ? Imaginons maintenant que nous possédons un second ensemble d’éléments portant pour une raison quelconque une classe CSS différente mais pour lequel nous désirons le même comportement d’événement.

La première solution qui vient à l’esprit consiste à dupliquer le code précédemment vu et à modifier la classe CSS utilisée pour pointer les éléments. C’est là qu’un peu d’astuce vas nous permettre d’éviter cette dupplication ! En effet, jQuery possède un puissant système de sélecteurs permettant de cibler des éléments HTML,en l’occurrence il suffira de séparer les deux classes CSS par une virgule pour appliquer le comportement d’événements à tous les éléments d’un seul coup !

jQuery('.jQuery-elements-1, .jQuery-elements-2').change(function(e){
   //traitement de l'événement
});

Pratique, n’est-ce pas ?

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.

LESS est un environnement de programmation héritant de CSS écrit pour Ruby permettant d’ajouter un grand nombre de fonctionnalités au CSS (variables, opérations, utilisation de classes au sein du CSS, règles en cascade…).

En développant avec LESS, nous n’écrivons plus directement de CSS mais du LESS qui sera compilé en un fichier CSS prêt à fonctionner.

Lessphp rend tout ceci possible dans un environnement PHP grâce à une classe à inclure dans vos scripts afin de compiler du LESS.

Lessphp est en cours de développement et ne supporte pas l’ensemble des fonctionnalités offertes par LESS pour le moment, cependant un certain nombre d’entre-elles sont opérationnelles.

Quelques exemples

• Inclusion de lessphp et compilation

require 'lessc.inc.php';
 
try {
    lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
    exit('lessc fatal error:<br />'.$ex->getMessage());
}

• Utilisation des variables et des opérations :

/** LESS **/
@base: 2px; /** Déclaration d'une variable **/
 
.myClass {
  border: 2px + @base solid red; /** Utilisation de la variable au sein d'une opération **/
}
 
/** CSS RESULT **/
 
.myClass { border:4px solid red; } /** CSS obtenu après la compilation **/

• Utilisation des « mixins » (classes au sein du fichier CSS)

/** LESS **/
@base: 2px; /** Déclaration d'une variable **/
 
.myClass {
border: 2px + @base solid red; /** Utilisation de la variable au sein d'une opération **/
}
 
.mixin {
color: red;
.myClass;  /** Utilisation de la classe .myClass au sein de la classe .mixin **/
}
 
/** CSS RESULT **/
 
.myClass { border:4px solid red; }
.mixin {
  color:red;
  border:4px solid red;
}

Nous voyons bien de cette manière que nous pourrions grandement améliorer notre code CSS et factoriser énormément de code ! De plus, la compilation s’effectuant côté serveur, il est tout à fait possible de générer dynamiquement le CSS via un appel ajax en fonction d’évènements homme-machine par exemple.

Il est à noter que lessphp est disponible sur la plateforme github et qu’il vous ait donc possible de signaler les éventuels bugs que vous rencontrez ou encore récupérer les toutes dernières versions de la librairie.

Alors, pensez-vous que lessphp pourrait améliorer votre code CSS ?

Pour plus d’informations

• Site officiel de lessphp
• Site officiel de LESS (Ruby)
• Documentation de LESS
• Plugin lessphp pour Symphony

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 !

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