Archives par étiquette : jquery

[jQuery] : mon second plugin : un period picker

Je vous avais présenté il y a peu un plugin jQuery de type date picker et avais promis à l’époque d’en sortir un second permettant la sélection de deux dates façon Google Analytics. C’est aujourd’hui chose faite et je suis fier de vous annoncer la naissance de mon tout dernier plugin : jQuery period picker.

Comme le précédent ce plugin est dérivé du travail de Jonathan Leighton sur son plugin date input et je n’ai donc pas eu à réfléchir à la licence sous laquelle diffuser le projet : ce sera une licence MIT disponible ici.

A part cela rien de bien particulier à dire si ce n’est que le plugin est d’ores et déjà disponible en 8 langues (grâce aux traductions reçues pour jdpicker) et qu’il n’attend plus que vous pour l’intégrer à vos projets !

jQuery period picker

[jQuery] Un plugin type date picker de mon cru : jdPicker

C’est pas parce que je n’ai pas eu le temps d’écrire cette semaine que j’ai mis de côté mes projets divers et variés : je travaille sur un framework PHP, plusieurs sites et le bouquin BDG avance petit à petit…

Mais je m’arrête pas à si peu de projets, vous me connaissez !

Aussi je me suis mis en tête de reprendre un plugin jQuery abandonné par son créateur pour l’adapter à mes besoins et, accessoirement, pour l’adapter aux besoins de la société pour laquelle je travaille puisqu’une partie du dev de ce nouveau jouet a été effectué sur mon temps de travail (la société en question, AMJ Groupe, a bien sûr donné son accord pour que je publie mon travail – et je l’en remercie).

Trêves de blabla je vais vous donner le lien directement et on va ensuite discuter des fonctionnalités que j’ai ajouté à la version originale : jdPicker – The ultimate datepicker (Ouais le SEO ça se travaille).

Comme il faut rendre à César ce qui est à Jonathan, je vous donne aussi le lien vers le plugin d’origine : jQuery Date Input. Il est par ailleurs crédité sur chacune des pages du site de présentation du plugin, dans les crédits et un peu partout sur le site : sans son travail je n’aurai probablement pas réussit à aller si loin dans les évolutions effectuées.

Continuer la lecture

Redimensionner plusieurs éléments du DOM en jQuery

Je vois souvent la question se poser un peu partout sur le web : avec cette manie (bonne manie, mais manie tout de même)  de structurer les pages à grand renforts de <div> (en y ajoutant le plus souvent la propriété float) là où nos ancêtres (ou juste nous il y a quelques années) utilisaient une grande quantité de <table>, les présentations en plusieurs colonnes souffrent d’un défaut majeur : elles n’ont plus nécessairement la même longueur.

Il existe un certain nombre de solutions pour remédier à cela. Celle que je vous propose aujourd’hui se base sur un bête code javascript (ignoré des Serps donc, mais peu importe vu qu’il s’agit de mise en page) et plus précisément sur du jQuery.

L’idée est d’attribuer le même nom de classe à tous les éléments du DOM que l’on veut voir de la même taille et ensuite d’appeler, à la fin du chargement de la page, une fonction javascript qui va redimensionner tous les éléments correspondants à un sélecteur jQuery que l’on basera sur la fameuse classe ajoutée à tous les éléments à redimensionner.

L’avantage, par rapport aux autres solutions, est qu’elle ne nécessite presque aucun code supplémentaire et par conséquent, que l’on garde la logique sémantique de la page. Et, après tout, c’est là tout le but de l’abandon des <table> au profit des <div>.

Trêves de blabla, voici le code javascript, à ajouter de préférence dans un fichier séparé :

function redimensionner(selecteur){
var hauteur=0;
$(selecteur).each(function(){
if($(this).height()>hauteur) hauteur = $(this).height();
});

$(selecteur).each(function(){ $(this).height(hauteur); });
}

Il suffira ensuite d’appeler, au chargement de la page, ladite fonction en lui passant en argument le sélecteur jQuery qui matche nos éléments à redimensionner. Le code se chargera de déterminer la taille du plus grand élément et de mettre les autres à l’échelle.

Concrètement, il vous faudra ajouter le morceau de code suivant :

$(document).ready(function(){
redimensionner(‘div.toSize’);
});

Pour redimensionner tous les <div> ayant la classe toSize à la taille du plus grand de ces éléments. Pour plus de détails sur les sélecteurs jQuery, je vous renvoie à l’excellente doc en ligne.