Prenons un exemple : vous venez de faire un div que l’on peut déplacer à volonté avec la souris. On clique, le déplacement commence… on relâche, le déplacement s’arrête. Mais voila, si on relâche en dehors de la fenêtre du navigateur, aucun événement n’est déclenché, et on continue à déplacer notre div indéfiniment !

Le meilleur moyen d’éviter ça est de stopper le déplacement dès l’instant où l’on quitte la fenêtre du navigateur. Seulement voila : javascript ne déclenche aucun événement lorsque c’est le cas. Il faut tricher…

On commence par se dire que si l’on cesse de survoler l’objet que l’on déplace, on arrête le déplacement… Et l’on se rend vite compte que ce n’est pas pratique du tout ! En effet, la souris va presque toujours bouger plus vite que la div et le déplacement cessera instantanément, sauf si l’on bouge au ralenti.

Pour éviter ça, on peut chercher à déterminer vers quel élément la souris à quitté la div, et n’arrêter le déplacement que si ce n’est pas un élément inclus dans la balise html.
Facile… en théorie. Mais tous les navigateurs n’utilisent pas les mêmes attributs de l’événement, et évidemment IE va encore nous poser problème !

Sans plus d’introduction, voici un morceau de code jQuery (« code less do more ») qui vous aidera grandement à résoudre ce problème :

$('div#dragged').bind('mouseleave.dragged',function(e) {
	var ev = e || window.event;
	if(ev.relatedTarget){
		if(ev.relatedTarget == $('html').get(0)){
			stopDrag();
		}
	} else {
	// IE
		if(!ev.toElement){
			stopDrag();
		} else if(ev.toElement.tagName == "HTML"){
			stopDrag();
		}
	}
})

Maintenant, les explications :

$('div#dragged').bind('mouseleave.dragged',function(e) {

On associe une fonction à l’événement ‘mouseleave’ sur la div déplaçable.
Notez au passage que jQuery nous permet d’associer un nom à cette fonction (ici : ‘.dragged’), ce qui est très pratique pour gérer ensuite les événement nominativement, surtout dans le cas ou plusieurs événement du même type sont associés à cet objet.

	var ev = e || window.event;

On récupère ensuite l’événement déclenché. Firefox et les browsers respectueux des standards le trouveront en paramètre de la fonction (ici : ‘e’), pour Internet Explorer il faudra aller le chercher dans window.event.
Le double pipe (‘||’) permet d’attribuer à la variable ‘ev’ la valeur de ‘e’ si elle existe, et la valeur de ‘window.event’ si ce n’est pas le cas.

	if(ev.relatedTarget){
		if(ev.relatedTarget == $('html').get(0)){
			stopDrag();
		}

Pour les navigateurs standards, l’événement contient une propriété ‘relatedTarget’.
Si elle existe, on est dans le cas d’un navigateur standard, sinon on est probablement sous IE.

Cette propriété retourne l’élément ‘html’ quand on quitte la div en sortant du navigateur.
On utilise ici une syntaxe jQuery pour comparer le contenu de cette propriété avec le contenu html (‘get(0)’ sur l’objet jQuery) de la balise ‘html’. S’ils sont identiques, on peut arrêter le déplacement.

	} else {
	// IE

Si la propriété ‘relatedTarget’ n’existe pas, on est alors dans le cas d’IE. Deux cas se présentent alors :

		if(!ev.toElement){
			stopDrag();

Pour certaines versions d’IE, la propriété ‘toElement’ de l’événement est indéfinie. C’est un critère suffisant pour arrêter le déplacement.

		} else if(ev.toElement.tagName == "HTML"){
			stopDrag();
		}
	}
})

Pour d’autres versions d’IE, la propriété ‘toElement’ existe. On devra dans ce cas vérifier que la propriété ‘tagName’ de ‘toElement’ est bien ‘HTML’. Si c’est le cas, on arrête le déplacement.

Voila, j’espère que ces quelques explications pourront vous aider, il n’est pas toujours évident de trouver sur internet les ressources nécessaires pour arriver à faire cette chose pourtant si basique !

Il semblerait que dans la version 7 de ce navigateur cher aux développeurs masochistes, on n’aie toujours pas la possibilité pourtant bien utile de désactiver une des options d’un ’select’.

Heureusement, javascript (boosté par jQuery) permet de régler pas mal des lacunes du navigateur que l’on adore détester.

Voici un petit script trouvé sur internet qui peut vous dépanner si vous êtes confronté à ce problème :

$(document).ready(function(){
  // Disabled options fix for Internet Explorer
  $('select').each(function(){
    this.rejectDisabled = function(){
      if (this.options[this.selectedIndex].disabled){
        if (this.lastSelectedIndex) {
          this.selectedIndex = this.lastSelectedIndex;
        } else {
          var first_enabled = $(this).children('option:not(:disabled)').get(0);
          this.selectedIndex = first_enabled ? first_enabled.index : 0;
        }
      } else {
        this.lastSelectedIndex = this.selectedIndex;
      }
    };
    this.rejectDisabled();
    this.lastSelectedIndex = this.selectedIndex;
    $(this).children('option[disabled]').each(function(){
      $(this).css('color', '#CCC');
    });
    $(this).change(function() {
      this.rejectDisabled();
    });
  });
});

Merci jQuery

N’ayant pas trouvé d’équivalent à implémenter dans une administration web, j’ai décidé d’en écrire un moi-même. J’ai donc utilisé la commodité de jQuery pour écrire un plug-in javascript simulant le fonctionnement du pickwhip.

Démo

Basiquement, on attribue à un élément source une liste d’éléments cible auxquels il a le droit de se lier. Lorsque l’on cliquera sur cet élément source, on activera un pickwhip qui réagira différemment au survol d’éléments cible, d’éléments cible déjà lié, ou d’éléments non-cible, et qui bien sûr effectuera le lien demandé.

Une démonstration valant mieux qu’un long discours, vous pouvez tester le pickwhip.

En pratique

Pour utiliser le pickwhip, vous devrez tout d’abord avoir chargé jquery.js et jquery.pickwhip.js, de préférence dans la balise <head> de votre page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pickwhip.js"> </script>

Il faut ensuite initialiser le pickwhip en lui indiquant une url où trouver ses images :

$(document).ready(function(){
	$.pickWhip.init({
		imageDir: 'whipImg/'
	});
});

Si vous souhaitez déplacer les images du pickwhip, vous pouvez remplacer ‘whipImg/’ par leur emplacement actuel, sinon vous pouvez juste lancer $.pickWhip.init() sans paramètre.

Il ne reste plus qu’à définir les cibles et les options de chaque pickwhip, comme dans l’exemple ci-dessous :

$('#src1').pickWhip('.dropzone, .dropzone2',{
	unlinkedHoverClass	: 'whipHover1',
	linkedHoverClass	: 'whipHoverLinked1',
	linkList		: Array( $('#drop2') ),
	showLinks		: true,
	linkedClass		: 'whipLinked1',
	unlinkedClass		: 'whipUnlinked1',
	callback		: function(source, target){
		alert("The link between the source " + source.attr('id') + " and the target " + target.attr('id') + " has been updated.";
	}
});

Ce code attribue un pickWhip à l’élément dont l’id est ’src1′.

Le premier paramètre passé à la méthode pickWhip() est une String à faire interpréter par le sélecteur jQuery.

Ici, on demande à ce que les éléments de classe ‘dropzone’ et de classe ‘dropzone2′ soient réactifs à ce pickwhip.

Le second paramètre est une liste d’options au format json…

Options disponibles :

• linkedHoverClass : classe css à donner à un élément cible déjà lié à cette source lors de son survol.
  Type : String
  par défaut: linkedWhipHoverTarget
• unlinkedHoverClass : classe css à donner à un élément cible non lié à cette source lors de son survol.
  Type : String
  Par défaut: unlinkedWhipHoverTarget
• linkedClass : classe css à donner à un élément cible déjà lié à cette source lorsque showLink est actif.
  Type : String
  Par défaut : linkedWhipTarget
• unlinkedClasss : classe css à donner à un élément cible non lié à cette source lorsque showLink est actif.
  Type : String
  Par défaut : unlinkedWhipTarget
• showLinks : appliquer les classes linkedClass/unlinkedClass aux cibles lorsque l’utilisateur active le pickwhip.
  Type : Boolean
  Par défaut : true
• linkList : liste d’éléments jQuery déjà associés à cette source ou de tableaux associatifs (source, cible) .
  Type : Array( [jQuery Object target], [Array( jQuery Object source, jQuery Object target)], [...] )
• callback : fonction à executer après l’association
  Type : Function
  Note : cette fonction peut prendre 2 paramètres, qui seront respectivement la source et la cible liés.

L’option linkList s’avérera très utile pour initialiser l’état actuel des associations. Vous pouvez lui fournir des cibles pour ce pickwhip, la source du pickwhip leur sera associée. Mais vous pouvez aussi fournir un tableau d’association de type Array(source, cible), car ce n’est pas forcément à la source du pickwhip elle même que vous souhaitez associer la cible. Par exemple, vous voulez peut-être associer la cible à l’élément parent du pickwhip…ou exploiter plus directement les associations faites dans votre base de données !

Pour connaitre à tout moment l’état des associations, vous pouvez interroger la liste globale $.pickWhip.allLinks comme dans l’exemple ci-dessous :

function showLinks(){
	var links = '<p>Current associations are :<\/p>
<ul>';
	for (var i=0; i<$.pickWhip.allLinks.length; i++) {
		for (var j=0; j<$.pickWhip.allLinks[i].length; j++) {
			links += '<li>source : '+$.pickWhip.allLinks[i][j][0].html()+' _ dest : '+$.pickWhip.allLinks[i][j][1].html()+'<\/li>';
		}
	}
	links +='<\/ul>';
	$('#links').html(links);
}

Par ailleurs, jquery permet de développer des plugins de manière assez simple, afin de rajouter des fonctionnalités au module de base. Mais nous y reviendrons une autre fois…

Le sujet du jour est le préchargement d’images, un concept relativement basique et régulièrement utile.

Voici une méthode simple pour l’effectuer :

$.preloadImages = function(arguments)
{
    for (var i = 0; i < arguments.length; i++) {
        $('<img/>').attr('src', arguments[i]);
    }
}

var imagesToPreload = Array(\
    'image1.gif',\
    '/repertoire/des/images/image2.gif',\
    'http://www.example.com/repertoire/image3.gif');

$.preloadImages(imagesToPreload);

Notes:

• $ est un raccourci pour l’objet de base jQuery. En cas de conflit (par exemple avec Prototype, une autre lib assez répandue), il est possible de le redéfinir.
• imagesToPreload contient une liste (Array) d’images sous forme de texte (String).
• Les \ en fin de lignes permettent de continuer à la ligne du dessous en rendant le retour à la ligne invisible au parser javascript, et donc d’avoir une liste d’images plus agréable à lire si l’on aligne verticalement le début du nom de chaque image.
• La fonction preloadImages() prend chacun des arguments donnés par le tableau (Array) et crée à la volée une balise html <img> puis donne à l’attribut « src » de cette balise le nom de l’image. Du coup, l’image est appelée et chargée dans le cache du navigateur.
• Comme on n’insère pas cet objet dans le DOM, rien n’est affiché.

Et voila. C’est simple et efficace, à l’image de jQuery !