L’utilisateur tape son mot-de-passe, et à la fin il doute de ce qu’il a entré sur l’avant dernier caractère. Du coup il retape tout. Et si on lui proposait de démasquer temporairement son mot de passe sur commande ?

Je vois souvent des sites connus proposer des formulaires d’identifications ou des formulaires d’inscription avec un champ « mot de passe » utilisant un type texte. L’effet est assez direct pour moi, on voit mon mot de passe, donc j’envoie un mail à l’équipe qui gère le site pour les prévenir de l’erreur.

« Bonjour Monsieur, ceci n’est pas une erreur et permet à l’internaute de voir ce qu’il a tapé dans le champ. »

Ah ouais carrément ! Ils ont réfléchi en plus, avant de faire cette erreur ?
Bref, sarcasmes mis à part, la personne qui regardera au dessus de votre épaule pendant que vous tapez deux fois votre mot de passe en clair, aura bien le temps de le lire une fois

Concept

Windows 8 propose une gestion du champ mot-de-passe assez interessante puisqu’il permet de masquer et démasquer le code à tout moment avec un bouton placé à droite du champ.
Voilà à quoi ressemble un tel champ :

C’est ce comportement que j’ai cherché à reproduire récemment.

Le code

HTML : la structure

Voici un petit morceau de code classique pour la structure HTML :

<div class="connect_box">
   <h1>Connection<span>use your login and password</span></h1>
   <form>
      <p>
         <label for="password">Your password</label>
         <input type="password" value="" placeholder="Enter Password" id="password">
         <button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>
      </p>
   </form>
</div>

Je ne pense pas que vous ayez besoin d’explications, mais si c’était le cas laissez-moi un petit commentaire en fin d’article.
Le bouton est présent uniquement pour intercepter l’action de masquage et démasquage, mais vous allez comprendre par vous-même. Je n’ai pas mis de bouton submit pour alléger le code

CSS : les styles

Un peu de mise en forme avec CSS, rien de sorcier également, nous verrons le design du bouton de démasquage plus tard :

div {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}
h1 {
  font-size: 30px;
  color: #969696;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 100;
}
 h1 span {
  display:block;
  font-size: 14px;
  color: #bbb;
 }
form p { position: relative; }
label {
  position:absolute;
  left:-9999px;
  text-indent: -9999px;
}
input {
  width: 250px;
  padding: 10px 12px;
  margin-bottom: 5px;
  border: 1px solid #cccccc;
  border-bottom-color: #fff;
  border-right-color: #fff;
  border-radius: 4px;
  background: #e3e3e3;
  color: #888;
}

Voici la partie concernant le petit bouton. J’ai souhaité faire quelque chose en full CSS sans image, mais à vous d’adapter la chose.

.password + .unmask {
  position:absolute;
  right: 68px; top: 7px;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  background: #aaa;
  border-radius: 50%;
}
.password + .unmask:before {
  content: "";
  position:absolute;
  top:4px; left:4px;
  z-index:1;
  width: 17px;
  height: 17px;
  background: #e3e3e3;
  border-radius: 50%;
}
.password[type="text"] + .unmask:after {
  content: "";
  position:absolute;
  top:6px; left:6px
  z-index:2;
  width: 13px;
  height: 13px;
  background: #aaa;
  border-radius: 50%;
}

On donne une forme ronde à notre bouton, puis on lui change légèrement son aspect lorsque le champ password devient un champ de type text. Pour effectuer le passage de l’un à l’autre, on va utiliser JavaScript.

JavaScript : les actions

Là où ça fait vraiment mal, c’est la fonction JavaScript.
Je pensais utiliser simplement jQuery pour changer la valeur de l’attribut type et la faire passer de password à text.
C’est un peu la base de la technique, et sur le principe c’est hyper simple.

Sauf que ça ne se passe pas comme ça : l’accès à l’attribut type est « interdit ».
Il va falloir en quelque sorte récupérer l’élément, chacun de ses attributs et ses valeurs, puis recréer un nouvel élément composé des mêmes attributs (on en profitera pour changer la valeur du type ) pour l’insérer dans le DOM.

Je vais donc vous donner la partie facile du code, celle qui consiste à dire à l’élément « change de type quand on clique là-dessus ». Je vous donne la fonction plus complexe juste après.

$('.unmask').on('click', function(){
  if($(this).prev('input').attr('type') == 'password')
    changeType($(this).prev('input'), 'text');
  else
    changeType($(this).prev('input'), 'password');
  return false;
});

Le code fait la chose suivante : au clic, si l’input précédent le bouton est de type password, alors il passe en type text ; s’il est de type text, il repasse en password.

La fonction changeType() est définie ainsi :

/*
  function from : https://gist.github.com/3559343
  Thank you bminer!
*/
// x = élément du DOM, type = nouveau type à attribuer
function changeType(x, type) {
   if(x.prop('type') == type)
      return x; // ça serait facile.
   try {
      // Une sécurité d'IE empêche ceci
      return x.prop('type', type);
   }
   catch(e) {
      // On tente de recréer l'élément
      // En créant d'abord une div
      var html = $("<div>").append(x.clone()).html();
      var regex = /type=(\")?([^\"\s]+)(\")?/;
      // la regex trouve type=text ou type="text"
      // si on ne trouve rien, on ajoute le type à la fin, sinon on le remplace
      var tmp = $(html.match(regex) == null ?
         html.replace(">", ' type="' + type + '">') :
         html.replace(regex, 'type="' + type + '"') );
      // on rajoute les vieilles données de l'élément
      tmp.data('type', x.data('type') );
      var events = x.data('events');
      var cb = function(events) {
         return function() {
            //Bind all prior events
            for(i in events) {
               var y = events[i];
               for(j in y) tmp.bind(i, y[j].handler);
            }
         }
      }(events);
      x.replaceWith(tmp);
      setTimeout(cb, 10); // On attend un peu avant d'appeler la fonction
      return tmp;
   }
}

Limites

Mon exemple utilise CSS3. Pour une meilleure prise en charge de l’aspect du bouton, utilisez le principe de dégradation gracieuse en prévoyant une image pour les vieux navigateurs, par exemple.

IE7 et 8 ne reconnaissant pas la validité de la première partie du code JS (la partie « try »), le reste du code permet le changement de type, mais l’information entrée dans le champ de type password est indépendante de l’information entrée dans le champ une fois passé en type text.

Pour ceux qui veulent forker le code :
Le code sur CodePen.io

Un Slideshow sur une page d’accueil, c’est joli, c’est à la mode, mais c’est souvent lourd à intégrer. Il vous faudra des compétences certaines en jQuery, ou utiliser des plugins déjà prêts.
Aujourd’hui je vous propose un tutoriel pour créer un infinite slideshow en quelques lignes de code.

Je vous ai promis, via Twitter, un « dossier-tutoriel » sur la création d’un slideshow de A à Z avec quelques options sympa. Cet article ne fait pas partie du dossier, il n’a pas grand chose à voir, il s’agit simplement de vous présenter une solution enfantine avec une petite dose de HTML, CSS et jQuery.

L’effet infinite

Cet effet donne l’impression que votre slideshow ne se termine jamais, il tourne en boucle indéfiniment sans jamais revenir en arrière.
Pour se faire, il suffit de placer l’image que l’on vient de visualiser en fin de liste à chaque défilement d’image, comme sur le schéma suivant :

À chaque fois qu’une image vient d’être vue et laisse place à l’image suivante, elle est placée en fin de liste afin de créer une boucle sans fin.

La structure de base

Une division contenant une liste d’images suffira pour notre tutoriel.

<div class="slideshow">
	<ul>
		<li><img src="image1.jpg" alt="" width="350" height="200" /></li>
		<li><img src="image2.jpg" alt="" width="350" height="200" /></li>
		<li><img src="image3.jpg" alt="" width="350" height="200" /></li>
		<li><img src="image4.jpg" alt="" width="350" height="200" /></li>
	</ul>
</div>

J’utilise ici une liste non ordonnée, mais un groupe de figure et figcaption peut aussi faire l’affaire.
Je vous laisse remplir les textes alternatifs

Une fois cette structure en place, il nous faut la styler pour lui donner l’apparence du slideshow.

Les styles de bases

Notre conteneur doit posséder une largeur fixe, et cacher le débordement du contenu.
Dans le dossier en cours de préparation dont je parlais en début d’article, nous procèderons de manière plus « propre » en prenant en compte l’activation, ou non, de JavaScript. Mais passons, ici faisons plus simple.

.slideshow {
   width: 350px;
   height: 200px;
   overflow: hidden;
   border: 3px solid #F2F2F2;
}
.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 400%;
   height: 200px;
   padding:0; margin:0;
   list-style: none;
}
.slideshow li {
   float: left;
}

Rien de compliqué ici : on donne les dimensions aux conteneurs, on annule quelques styles par défaut (marges, puces de liste), puis on fait flotter les éléments. On peut également utiliser display:inline-block.

Un petit coup de jQuery

La première fois que j’avais écris ce code, j’ai utilisé la bibliothèque jQuery 1.5.1. Quand on voit le poids de la bibliothèque en version 1.7+, je me suis dit qu’on pouvait rester sur la 1.5.
Voici le code, je vous l’explique après.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 
<script type="text/javascript">
   $(function(){
      setInterval(function(){
         $(".slideshow ul").animate({marginLeft:-350},800,function(){
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
         })
      }, 3500);
   });
</script>

Un grand coup d’explications

Voici quelques explications pour les personnes les moins aguerries en jQuery, car le code est court, mais quelque peu condensé.

   $(function(){
      […]
   });

Cette partie englobant notre fonction permet de vérifier que le document est bien chargé, c’est l’équivalent de la fonction ready().

   setInterval(function(){
      […]
   }, 3500);

Cette partie permet de définir une action qui va se répéter à intervalle régulier. La fonction setInterval() prend en paramètres une fonction anonyme (ou le nom d’une fonction existante), et le délai en milliseconde entre chaque exécution de la fonction. Dans notre cas, nous définissons une fonction anonyme avec function(){} et définissons la répétition à 3,5 secondes.
Petite parenthèse : il arrive très souvent de croiser la syntaxe var t = setInterval(). Cette syntaxe permet l’annulation de la répétition grâce à la fonction clearInterval(t).

Le tronçon qui va suivre est un peu plus complexe à comprendre car il utilise massivement le principe de chaînage de jQuery. Il faut imaginer qu’à chaque fois qu’un point apparait, on utilise le précédent objet jQuery pour le manipuler.

Exemple :

$('ul').find('li').css('color', 'red').filter(':first').css('color','green');

Nous commençons par « sélectionner » nos éléments ul dans notre document, puis nous ciblons les éléments li, la fonction find() nous retourne un objet jQuery, puis nous appliquons un style particulier sur ces éléments. La fonction css() nous retourne le même objet jQuery que précédemment, ce qui nous permet de le manipuler à nouveau et d’aller chercher uniquement le premier élément li grâce à la fonction filter() qui retourne également un objet jQuery auquel on va appliquer d’autres styles, etc.
Il faut savoir que la plupart des fonctions jQuery permettent ainsi le chainage.

Reprenons donc sur ce fameux tronçon :

 $(".slideshow ul").animate({marginLeft:-350},800,function(){
   $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
 })

Nous commençons par cibler notre ul que nous allons faire bouger vers la gauche grâce à une animation qui va appliquer une marge négative de 350px en 0,8 secondes (animate(marginLeft:-350, 800)). La fonction animate() permet d’exécuter une fonction de callback, il s’agit d’une fonction exécutée lorsque animate() retourne « complete » : quand l’animation est terminée donc :p
Cette fonction de callback, nous la déclarons juste après le paramètre de durée de l’animation.
Cette fonction exécute ce qui suit :

$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));

De quoi se faire plaisir en terme de chainage.
$(this) représente chacun des .slideshow ul que pourrait retourner notre objet jQuery (oui, il pourrait y avoir plusieurs slideshow sur votre page).
Nous partons donc de notre élément ul auquel nous supprimons la marge négative récemment attribuée par l’animation, puis nous allons chercher le dernier li de notre liste (find("li:last")) et nous y plaçons juste après (after()) le premier élément de notre liste ($(this).find("li:first")).
La fonction after() a une syntaxe assez particulière, j’en conviens, je vous invite donc à lire la documentation pour plus d’informations à son sujet.

Tout ce morceau de code est exécuté quasiment en même temps à la fin de l’animation. À chaque défilement d’un slide, on prend le premier élément de la liste, on le place à la fin, et on annule la marge négative que l’on vient de donner à notre liste. C’est invisible pour l’oeil.

J’espère que les explications ne sont pas plus complexes que le code

Voir la démonstration

Je vous recommanderais presque de ne pas suivre ce tutoriel pour de la production. En effet, en terme d’accessibilité (et même d’ergonomie) l’absence de contrôle sur l’animation est perturbante. (entre autres défauts)
Le prochain dossier devrait prendre en compte ces critères.
À venir donc !

Méthode 2

Une seconde méthode, assez semblable mais plus simple à comprendre, nous a été proposée par Thierry. Je vous place le code jQuery :

(function($){
  setInterval(function(){
    $(".slideshow ul li:first-child").animate({"margin-left": -350}, 800, function(){
        $(this).css("margin-left",0).appendTo(".slideshow ul");
    });
  }, 3500);
})(jQuery);

Les changements se situent sur le premier sélecteur, afin que l’animation ne se fasse que sur le premier élément de la liste (li:first-child).
Celui-ci subit un décalage de 350 pixels, les autres li suivent le mouvement.
Une fois cette animation terminée, la fonction appendTo() permet d’insérer ce premier élément en le plaçant à la suite des autres éléments du conteneur (.slideshow ul), ici à la fin des différents li.

Le plugin jQuery InView permet de déclencher des actions en JavaScript en fonction de l’apparition à l’écran d’un élément ou d’une partie de cet élément. Il est donc facile d’imaginer toutes sortes de succession d’animations ou d’actions asynchrones grâce à ce plugin. Voyons comment l’utiliser.

Où le trouver

Cela se passe sur GitHub, il est donc possible de télécharger le script, mais également de l’améliorer et partager vos suggestions.
Télécharger InView

Comment l’utiliser ?

Commencez simplement par appeler votre bibliothèque jQuery, puis chargez le plugin InView :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.inview.min.js"></script>

Une fois le plugin chargé, il est possible de « binder », autrement dit de lier un élément à l’évènement « inview » pour effectuer des actions.

$('.element').bind('inview',function(event, isInView, visiblePartX, visiblePartY){
  			// le code ici (ça va venir)
});

La fonction accepte plusieurs variables qui vont nous permettre d’exécuter les choses au bon moment.
Le deuxième paramètre (et variable) isInView retourne true ou false en fonction de si l’élément est visible ou non (peu importe quelle partie est visible). visiblePartX, la troisième variable détecte quelle partie latérale de l’élément est visible (sur l’axe X donc), les valeurs retournées possibles sont left, right et both.
La dernière est visiblePartY et détecte quelle partie en hauteur de l’élément est visible (sur l’axe Y donc), les valeurs retournées possibles sont top, bottom et both.

Nous allons concevoir une bête démonstration pour comprendre les bases.

Définir les parties visibles d’un élément

Nous allons essayer d’afficher un contenu textuel qui nous dit quelle partie est visible de deux éléments d’une page HTML.
Commencez par copier/coller ce code HTML (rien de compliqué).

<div id="first-part">
   <h2>This is the first part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat	proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <span class="info"></span>
</div>
<div id="second-part">
   <h2>This is the second part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="third-part">
   <h2>This is the third part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="last-part">
   <h2>This is the last part</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 	proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <span class="info"></span>
</div>

N’hésitez pas à mettre plus de contenu pour prendre un peu de hauteur dans votre document.

Je vous fourni également ce CSS pour que l’on ait à peu près le même document de test :

html {
	width: 750px;
	margin: 0 auto;
	padding: 2em 0;
	font-size: 62.5%;
	line-height: 1.55em;
	background: #f2f2f2;
	color: #555;
	font-family: Helvetica, Arial, Verdana, sans-serif;
}
body {
	font-size: 1.4em;
	line-height: 1.55em;
}
div {
	margin: 4em 0;
	position:relative;
}
.info {
	position: absolute;
	right: 0;
	top:0;
	padding: 15px;
	border-radius: 8px;
	background: #ddd;
	border: 1px solid #fff;
	color: #666;
	font-weight:bold;
	font-size: 16px;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
}

L’élément .info va nous servir à afficher du texte.

Reprenons sur du JS, ce JavaScript est à placer après l’appel à la bibliothèque jQuery et son plugin, bien entendu
Nous allons analyser avec notre code JS quelles sont les zones visibles sur notre première division et sur la dernière division de notre document.

$(document).ready(function(){
   $('.element').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
 
      if (isInView) {
         // l'élément est visible
 
         if (visiblePartY == 'top') {
            // Le haut de l'élément est visible
            $(this).find('.info').text('Only top is visible');
         }
 
         else if (visiblePartY == 'bottom') {
            // Le bas de l'élément est visible
            $(this).find('.info').text('Only bottom is visible');
         }
 
         else {
            // Les deux parties sont visibles (tout l'élément)
            $(this).find('.info').text('Whole part is visible');
         }
      }
 
      else {
         // l'élément n'est pas visible
         // on fait quoi maintenant ?
      }
   });
});

Ici le code est vraiment basique, nous ne faisons qu’ajouter du texte dans un élément span porteur de la classe info en fonction de la zone visible d’un élément.
Voici ce que vous devriez obtenir :
Voir la démonstration
Amusez-vous à faire défiler doucement la page pour voir ce qui s’affiche dans les blocs d’informations en haut et bas de la page.

Avec les quelques commentaires du code jQuery vous devriez maintenant avoir compris le fonctionnement du plugin. À vous d’envisager une suite ! :p (Lazy Load, chargement Ajax, infinite scroll, etc.)
Des exemples plus complexes sont donnés par l’auteur de ce plugin sur GitHub.
Plugin sur GitHub

Amusez-vous bien !

Ayant récemment eu besoin de parcourir les ressources du web à la recherche d’une solution de slideshow simple et personnalisable, j’ai rencontré quelques bonnes choses. Voici une liste très largement non exhaustive de quelques slideshow et carrousels en JavaScript qui ont retenu mon attention par leur simplicité, leurs fonctionnalités ou la qualité de leur ergonomie.

Essayons de classer ces ressources, mais ça ne sera pas toujours facile.

Slideshow simple

Basic Slider

Plugin de jQuery – Gratuit
Basic Slider est un plugin robuste permettant d’insérer dans chaque slide un contenu varié : image, texte, image légendée, vidéo, code HTML riche, etc.

Voir les démonstrations Doc et téléchargement

SlidesJS

Plugin de jQuery – Gratuit
SlidesJS est un plugin au design simple et élégant. Facile à personnaliser, il conviendra la plus plupart des utilisations.

Voir une démonstration Doc et téléchargement

WOW Slider

Plugin de jQuery – Gratuit (non-commercial), Payant (commercial, à partir de $69)

WOW Slider est un plugin robuste et, bien que simple d’apparence, propose des fonctionnalités très intéressantes comme la prévisualisation des différentes slides (visible sur la capture d’écran ci-dessus). Utilisé par de nombreux sites web, c’est un peu une référence dans le monde du slideshow.

Voir les démonstrations Téléchargement

Slideshow responsive

FlexSlider

Plugin de jQuery – Gratuit
Initialement conçu par MadeByMuffin, ce diaporama récemment acquis par WooThemes à la capacité de s’adapter à son environnement de consultation.

Voir la démonstration Le télécharger

BlueBerry

Plugin de jQuery – Gratuit
Développé par Mark Tyrrell, le slideshow BlueBerry est également un slideshow responsive.

Voir la démonstration Le télécharger

ResponsiveSlides JS

Plugin de jQuery – Gratuit
Ce slideshow très simple et léger propose quelques options classiques (dont un bouton de mise en pause du slider) et est responsive.

Voir la démonstration Le télécharger

Swipe JS

Script JavaScript – Gratuit
Ce slideshow pensé très léger supporte le Swipe, cette action de glissé effectué sur un terminal tactile. Il n’est pas un plugin de jQuery, ce qui en fait un slideshow très intéressant pour ses performances.

Voir la démonstration Télécharger le script

Slideshow qui en jette

Estro Slider

Plugin de jQuery – Payant ($12)

Un des rares plugins où j’ai croisé une option pour stopper l’animation. C’est quand même une des fonctionnalités qui devrait apparaitre par défaut dans tous les slideshow (ça n’engage que moi, m’enfin quand même). Ce plugin gère une foule de formats différents et permet l’insertion de vidéos.

Autres démonstrations L’acheter

Nivo Slider

Plugin de jQuery – Gratuit pour un usage personnel

Ces un des plugins qui chauffe le plus dans vos codes sources ces derniers temps. Vous l’appréciez notamment pour son jeu de découpe des images lors des transitions. Un effet très agréable à regarder, assurément.

Autres démonstrations Le télécharger

Royal Slider

Plugin de jQuery – Payant ($12)

Ce plugin offre un design propre et soigné et propose une gestion des touch events (écrans tactiles). Le passage d’un slide à l’autre peut également se faire par drag and drop.
Les contenus de chaque slide peuvent être variés puisque le contenu HTML est pris en charge également.

Les démonstrations L’acheter

Skitter

Plugin de jQuery – Gratuit

Simple d’aspect, ce plugin est un petit bijou proposant un grand nombre d’effets de transition et d’options. Le bouton stop, le bouton plein écran, un petit loader, etc. A découvrir grâce à la démonstration customisable !
Un plugin WordPress est même disponible.

La démonstration Le télécharger

Effet 3D

C’était l’objet même de ma recherche de slideshow avec un léger reflet et un effet 3D un peu à la coverflow, mais en plus subtile. Mon client s’était fait maquetter quelque chose de ressemblant à ce premier carrousel (avec reflet et tout le tralala).

« ProfessorCloud » Carousel

Plugin de jQuery – Gratuit

Ce carrousel propose un effet de reflet créé avec Canvas (compatible IE9) sous les images. Possédant quelques options intéressantes (auto slide, prise en charge de la molette, etc.) les démonstrations proposées par le site officielle ne sont pas exceptionnelles graphiquement parlant (c’est mon avis).
Deux démonstrations qui ressortent un peu du lot : Inspyre et Dr Solutions qui sont également listées en fin de page du site officiel.

La démonstration Le télécharger

Waterwheel Carousel

Plugin de jQuery – Gratuit

Ne vous y trompez pas, malgré la simplicité de sa présentation, les possibilités de ce carrousel sont vraiment intéressantes. Outre les nombreuses options du plugin, avec quelques retouches du cœur il est possible d’y intégrer d’autres éléments HTML et de le rendre adaptable aux différentes résolutions d’écran.

Les démonstrations Le télécharger

Coverscroll

Plugin de jQuery – Gratuit

Quelques images, quelques lignes de code, un peu de CSS et l’activation du script fait le reste. Un effet très sympathique.
Dommage qu’aucun package ne soit téléchargeable avec davantage de démonstrations.

La démonstration Télécharger le script

RoundAbout

Plugin de jQuery – Gratuit

Un des scripts que j’ai préféré voir fonctionner lors de ma recherche. Cependant sur certaines configurations, ce script rame énormément et les mouvements de l’animation sont quelque peu saccadés.
À ne surtout pas utiliser dans le cadre d’un besoin d’adaptation sur smartphone ou tablette.

La démonstration Télécharger le plugin

CCSlider

Plugin de jQuery – Payant ($12)

Un des plugins les plus sophistiqué dans ses effets de transition. De la découpe, de la 3D, de l’effet de profondeur à t’en donner le tournis, mais c’est vrai que ça déchire quand même pas mal !

Les démonstrations Acheter le plugin

Flux Slider

Plugin de jQuery – Gratuit

Un plugin qui propose les mêmes effets que les précédents, mais en mettant en avant des transitions CSS3 favorisant l’accélération matériel (et donc la fluidité des animations). Une extension WordPress existe pour ce plugin !

La démonstration Télécharger le plugin

Tutoriels

Juste pour compléter cet article et ne pas vous laisser sur des choses toutes faites, voici un tutoriel couplé à des sources téléchargeables pour la création d’un slideshow avec HTML5, Canvas et jQuery.

Plugin de jQuery – Tutoriel + plugin

La démonstration Télécharger les sources

Si vous avez d’autres ressources à me proposer, je suis disposé à compléter cette liste, bien entendu

Merci déjà à :

• Sans pseudo fix
• Stéphanie
• LudiKreation
• Dhoko

Pour leur contribution

J’ai recherché des possibilités en PHP pour retravailler les liens fournis par WordPress il n’y a pas longtemps ; ce qui m’a amené à cette idée d’article.
Beaucoup de possibilités de styles sont disponibles grâce à CSS, mais il est parfois nécessaire de transformer le comportement d’un lien avec JavaScript.

Regardons ensemble ce qu’il est possible de faire du côté de jQuery dans un premier temps, puis nous verrons les possibilités offertes par CSS.

Je tiens à rappeler que JavaScript doit autant que possible être une surcouche à un contenu HTML consultable et fonctionnel avec JS désactivé.
De même, les fonctions lancées par l’interception d’un évènement sur un lien ne doivent par surprendre vos visiteurs, n’oubliez donc pas de les prévenir de choses qui vont se produire.

Semblant de bonne pratique mise à part, rentrons dans le vif du sujet.

Étendre jQuery pour la gestion de vos liens

Imaginons par exemple que nous ayons besoin dans un projet de manipuler les liens en fonction de leurs caractéristiques.
Les principales fonctions des liens se retrouvent directement dans la valeur de leur attribut href, c’est donc là-dedans que nous allons piocher.

En créant des extensions de sélecteur jQuery, nous allons pouvoir simplifier la présentation et donc la lisibilité de nos développements.

Pour créer une extensions de sélecteur jQuery, il nous faut une manière de discriminer un objet, et le retourner à jQuery.
Pour cela rien de plus aisé, la bibliothèque le prévoit assez simplement grâce à l’expression jQuery.expr[':'].

Les codes qui suivent doivent être utilisés après le chargement de la bibliothèque jQuery.

Exemple de création d’un sélecteur :external :

// Création du sélecteur :external
$.expr[':'].external = function(obj){
	if(!obj.href) {return false;}
	return obj.hostname != location.hostname;
};
$('a:external').addClass('external');

Exemple de création d’un sélecteur :tel :

// Création du sélecteur :tel
$.expr[':'].tel = function(obj){
	return $(obj).is('[href^="tel:"]');
};
$('a:tel').addClass('tel_num');

Bien, mais si nous avons 4 ou 5 sélecteurs à ajouter comme cela, ça va faire long.
Nous pouvons très bien utiliser la syntaxe suivante pour réunir les fonctions qui nous permettent de créer nos sélecteurs sous la même forme :

// Création des plusieurs sélecteurs
$.extend($.expr[':'], {
	secure: function(a) {
		return $(a).is('[href^="https:"]');
	},
	notsecure: function(a) {
		return $(a).is('[href^="http:"]');
	},
	selfanchor: function(a) {
		return $(a).is('[href^="#"]');
	}
});
// exemples d'utilisation
$('a:secure').addClass('https_link');
$('a:notsecure').addClass('http_link');
$('a:selfanchor').addClass('self_link');

Dans ces exemples de code, j’utilise de simples addClass pour présenter les nouveaux sélecteurs. C’est à vous de voir, au sein de votre développement, à quoi vont pouvoir vous servir ces sélecteurs.

Je ne dis pas que ces exemples sont probants ou pertinents, mais ils sont là pour illustrer les possibilités d’extension de jQuery, notamment pour les liens.
Peut-être aurez-vous d’autres idées pour optimiser la gestion de vos liens, ou des besoins précis pour lancer une fonction sur un type de lien.

Ok mais… seulement en JS ?

Non, justement, CSS peut être suffisant si vous n’avez besoin que de modifier l’apparence de vos liens.
En effet, il est tout à fait possible de cibler un élément en fonction du contenu de son attribut, cela vaut pour l’attribut href.

/* cible les liens dont l'attribut href commence par */
a[href^="mailto:"] { }
a[href^="tel:"] {}
/* cible les liens dont l'attribut href fini par */
a[href$=".pdf"] { }
a[href$=".doc"] { }
/* cible les liens dont l'attribut href contient */
a[href~="twitter.com/!#"] { }
a[href~="?redirect"] { }

Cette technique est compatible avec Internet Explorer 7 et technologies supérieures… autant vous dire que vous pouvez déjà vous amuser !

Voilà, vous êtes parés pour styler et retravailler vos liens comme des pros !
Les commentaires sont à votre disposition pour nous faire part de vos idées d’amélioration, d’utilisation ou pour toute question.

J’essayerai de vous proposer de petites extensions de sélecteur dans ce genre pour d’autres cas pratiques plus tard

J’ai recherché des possibilités en PHP pour retravailler les liens fournis par WordPress il n’y a pas longtemps ; ce qui m’a amené à cette idée d’article.
Beaucoup de possibilités de styles sont disponibles grâce à CSS, mais il est parfois nécessaire de transformer le comportement d’un lien avec JavaScript.

Regardons ensemble ce qu’il est possible de faire du côté de jQuery dans un premier temps, puis nous verrons les possibilités offertes par CSS.

Je tiens à rappeler que JavaScript doit autant que possible être une surcouche à un contenu HTML consultable et fonctionnel avec JS désactivé.
De même, les fonctions lancées par l’interception d’un évènement sur un lien ne doivent par surprendre vos visiteurs, n’oubliez donc pas de les prévenir de choses qui vont se produire.

Semblant de bonne pratique mise à part, rentrons dans le vif du sujet.

Étendre jQuery pour la gestion de vos liens

Imaginons par exemple que nous ayons besoin dans un projet de manipuler les liens en fonction de leurs caractéristiques.
Les principales fonctions des liens se retrouvent directement dans la valeur de leur attribut href, c’est donc là-dedans que nous allons piocher.

En créant des extensions de sélecteur jQuery, nous allons pouvoir simplifier la présentation et donc la lisibilité de nos développements.

Pour créer une extensions de sélecteur jQuery, il nous faut une manière de discriminer un objet, et le retourner à jQuery.
Pour cela rien de plus aisé, la bibliothèque le prévoit assez simplement grâce à l’expression jQuery.expr[':'].

Les codes qui suivent doivent être utilisés après le chargement de la bibliothèque jQuery.

Exemple de création d’un sélecteur :external :

// Création du sélecteur :external
$.expr[':'].external = function(obj){
	if(!obj.href) {return false;}
	return obj.hostname != location.hostname;
};
$('a:external').addClass('external');

Exemple de création d’un sélecteur :tel :

// Création du sélecteur :tel
$.expr[':'].tel = function(obj){
	return $(obj).is('[href^="tel:"]');
};
$('a:tel').addClass('tel_num');

Bien, mais si nous avons 4 ou 5 sélecteurs à ajouter comme cela, ça va faire long.
Nous pouvons très bien utiliser la syntaxe suivante pour réunir les fonctions qui nous permettent de créer nos sélecteurs sous la même forme :

// Création des plusieurs sélecteurs
$.extend($.expr[':'], {
	secure: function(a) {
		return $(a).is('[href^="https:"]');
	},
	notsecure: function(a) {
		return $(a).is('[href^="http:"]');
	},
	selfanchor: function(a) {
		return $(a).is('[href^="#"]');
	}
});
// exemples d'utilisation
$('a:secure').addClass('https_link');
$('a:notsecure').addClass('http_link');
$('a:selfanchor').addClass('self_link');

Dans ces exemples de code, j’utilise de simples addClass pour présenter les nouveaux sélecteurs. C’est à vous de voir, au sein de votre développement, à quoi vont pouvoir vous servir ces sélecteurs.

Je ne dis pas que ces exemples sont probants ou pertinents, mais ils sont là pour illustrer les possibilités d’extension de jQuery, notamment pour les liens.
Peut-être aurez-vous d’autres idées pour optimiser la gestion de vos liens, ou des besoins précis pour lancer une fonction sur un type de lien.

Ok mais… seulement en JS ?

Non, justement, CSS peut être suffisant si vous n’avez besoin que de modifier l’apparence de vos liens.
En effet, il est tout à fait possible de cibler un élément en fonction du contenu de son attribut, cela vaut pour l’attribut href.

/* cible les liens dont l'attribut href commence par */
a[href^="mailto:"] { }
a[href^="tel:"] {}
/* cible les liens dont l'attribut href fini par */
a[href$=".pdf"] { }
a[href$=".doc"] { }
/* cible les liens dont l'attribut href contient */
a[href~="twitter.com/!#"] { }
a[href~="?redirect"] { }

Cette technique est compatible avec Internet Explorer 7 et technologies supérieures… autant vous dire que vous pouvez déjà vous amuser !

Voilà, vous êtes parés pour styler et retravailler vos liens comme des pros !
Les commentaires sont à votre disposition pour nous faire part de vos idées d’amélioration, d’utilisation ou pour toute question.

J’essayerai de vous proposer de petites extensions de sélecteur dans ce genre pour d’autres cas pratiques plus tard

Après une demande reçue par e-mail, je me suis dit que la fonctionnalité serait peut-être utile à d’autres que moi.
Lors de la rédaction de ce tutoriel : jQuery – Effet Smooth Scroll (défilement fluide), la complexité du contenu m’a fait retirer une extension intéressante à la dernière fonction/plugin proposée.

Avant propos

C’est toujours dans une optique de simplicité que j’essaye de présenter mes tutoriels. Il est clair qu’il y a des points parfois difficiles à faire comprendre au plus grand nombre, c’est aussi pour cela que je vous invite toujours à me signaler toute incompréhension sur un tutoriel que vous liriez.

C’est aussi pour cela qu’il m’arrive d’avoir des tutoriels complexes, et de les épurer en retirant des éléments que je juge inutiles – au moins dans un premier temps.

Mise à jour

Le tutoriel « jQuery – Effet Smooth Scroll (défilement fluide) » a été mis à jour aujourd’hui même afin de faire bénéficier à sa troisième partie d’une meilleure prise en charge des URL absolues fournies d’un hash (exemple : http://creativejuiz.fr/blog#kiwi).

Effet de défilement au chargement de la page

Pour effectuer un effet de défilement, voilà comment expliciter la chose en français :
« On cherche à obtenir le même résultat qu’au clic sur l’ancre porteuse du lien vers la cible présente dans la barre d’adresse. »

Voir la démonstration

Il nous faut prendre la phrase à l’envers et la transformer en jQuery.
Donc en plusieurs étapes il nous faut :

1. Récupérer le contenu de la barre d’adresse
2. Récupérer uniquement le hash
3. Chercher dans notre document quel élément pour l’attribut href="#hash"
4. Simuler un clic sur cette élément pour déclencher le défilement

Ok, voici un code qui fait ça :

function trigger_click_for_slide() {
      var the_hash = document.location.hash;
      if(the_hash)
          $('a[href~="'+the_hash+'"]').trigger('click');
}
trigger_click_for_slide();

La ligne 2 nous permet de stocker directement le hash (fin de l’URL) dans une variable.
La ligne 3 permet de vérifier l’existence d’un hash en bout d’URL.
La ligne 4, primordiale, permet de simuler (trigger) l’évènement click sur l’élément porteur d’un href ciblant le hash trouvé dans l’URL.

Pourquoi imiter le clic sur un lien plutôt que d’effectuer directement une animation ?
Pour éviter de réécrire une portion du code, et aussi pour limiter les animations vers les ancres prévues par notre système de navigation.

Ce morceau de code peut être placé après la création d’une des mini fonctions vues dans l’article jQuery – Effet Smooth Scroll (défilement fluide).

Écriture du hash dans l’URL

C’est bien sympa de proposer un défilement au chargement, mais puisque le hash ne s’écrit plus dans la barre d’adresse, comment allez vous faire pour partager une URL fournie d’un hash ?

Il faut le réécrire… oui d’accord, mais comment ?
Si on enlève le return false; en fin de fonction, le défilement va sauter, puis défiler de manière fluide, ou inversement.

Il faut donc le faire une fois l’animation terminée !
Je vous l’avez dit dans le précédent tutoriel à ce sujet, la fonction animate() permet l’accueil d’une fonction de callback.

Nous allons donc créer une fonction au sein du mini plugin vu dans l’ancien article, qui va nous permettre de réécrire le hash dans la barre d’adresse.
La voici :

function write_hash(the_hash) {
	    document.location.hash = the_hash;
}

Ensuite il faut faire appel à cette fonction dans notre plugin dans la partie qui gère l’animation :

$(container).animate({
        scrollTop:$(the_element).offset().top
}, speed, function() {
        write_hash(the_hash);
}); 

Au final, nous avons un code complet qui nous donne :

(function($) {
	$.fn.juizScrollTo = function( speed ) {
		if ( !speed ) var speed = 'slow';
		// coeur du plugin
		return this.each( function() {
			$(this).click( function() {
				var goscroll = false;
				var the_hash = $(this).attr("href");
				var regex = new RegExp("(.*)\#(.*)","gi");
				if ( the_hash.match("\#") ) {
					the_hash = the_hash.replace(regex,"$2");
					if($("#"+the_hash).length>0) {
						the_element = "#" + the_hash;
						goscroll = true;
					}
					else if ( $("a[name=" + the_hash + "]").length>0 ) {
						the_element = "a[name=" + the_hash + "]";
						goscroll = true;
					}
					if ( goscroll ) {
						var container = 'html';
						if ( $.browser.webkit ) container = 'body';
						$(container).animate( {
							scrollTop: $(the_element).offset().top
						}, speed, function() {
							tab_n_focus(the_hash)
							write_hash(the_hash);
						});
						return false;
					}
				}
			});
		});
		// fonctions
		// écriture du hash
		function write_hash( the_hash ) {
			document.location.hash =  the_hash;
		}
		// accessibilité au clavier
		function tab_n_focus( the_hash ) {
			$(the_hash).attr('tabindex','0').focus().removeAttr('tabindex');
		}
	};
	// appel de la fonction sur toutes les ancres !
	$('a').juizScrollTo('slow');
	// fonction de slide au chargement
	function trigger_click_for_slide() {
		var the_hash = document.location.hash;
		if ( the_hash )
			$('a[href~="'+the_hash+'"]').trigger('click');
	}
	trigger_click_for_slide();
})(jQuery)

Voilà… je crois que nous avons un code plutôt complet pour ce type d’effet :

• Gestion des URLs relatives et absolutes
• Navigation au clavier
• Réécriture du hash dans l’URL (pratique pour le partage d’une info précise)
• Effet smoothscroll au chargement de la page (si on cible quelque chose sur la page via l’URL)

N’hésitez pas à laisser un commentaire pour toute remarque sur ce code, problème rencontré, etc…

Merci pour votre lecture et à la prochaine.

Après une demande reçue par e-mail, je me suis dit que la fonctionnalité serait peut-être utile à d’autres que moi.
Lors de la rédaction de ce tutoriel : jQuery – Effet Smooth Scroll (défilement fluide), la complexité du contenu m’a fait retirer une extension intéressante à la dernière fonction/plugin proposée.

Avant propos

C’est toujours dans une optique de simplicité que j’essaye de présenter mes tutoriels. Il est clair qu’il y a des points parfois difficiles à faire comprendre au plus grand nombre, c’est aussi pour cela que je vous invite toujours à me signaler toute incompréhension sur un tutoriel que vous liriez.

C’est aussi pour cela qu’il m’arrive d’avoir des tutoriels complexes, et de les épurer en retirant des éléments que je juge inutiles – au moins dans un premier temps.

Mise à jour

Le tutoriel « jQuery – Effet Smooth Scroll (défilement fluide) » a été mis à jour aujourd’hui même afin de faire bénéficier à sa troisième partie d’une meilleure prise en charge des URL absolues fournies d’un hash (exemple : http://creativejuiz.fr/blog#kiwi).

Ce tutoriel utilise l’objet $.browser retiré depuis la version 1.9 de jQuery. Pour plus d’information : Note de version 1.9 de jQuery.
Vous pouvez cependant utiliser le script complémentaire présent sur Chez-Syl.fr. Merci à Xeroc pour l’info.

Pour les utilisateurs de jQuery 1.9 et supérieures, il faudra penser à remplacer dans le code ci-dessous :

• Live() :
  $(this).live('click', function() {
  par:
  $(this).on('click', function() {

• $.Browser :
  if ( $.browser.webkit ) container = 'body';
  par :
  if (navigator.userAgent.match('Chrome')) container = 'body';

Merci à Aurélien pour le code

Effet de défilement au chargement de la page

Pour effectuer un effet de défilement, voilà comment expliciter la chose en français :
« On cherche à obtenir le même résultat qu’au clic sur l’ancre porteuse du lien vers la cible présente dans la barre d’adresse. »

Voir la démonstration

Il nous faut prendre la phrase à l’envers et la transformer en jQuery.
Donc en plusieurs étapes il nous faut :

1. Récupérer le contenu de la barre d’adresse
2. Récupérer uniquement le hash
3. Chercher dans notre document quel élément pour l’attribut href="#hash"
4. Simuler un clic sur cette élément pour déclencher le défilement

Ok, voici un code qui fait ça :

function trigger_click_for_slide() {
      var the_hash = document.location.hash;
      if(the_hash)
          $('a[href~="'+the_hash+'"]').trigger('click');
}
trigger_click_for_slide();

La ligne 2 nous permet de stocker directement le hash (fin de l’URL) dans une variable.
La ligne 3 permet de vérifier l’existence d’un hash en bout d’URL.
La ligne 4, primordiale, permet de simuler (trigger) l’évènement click sur l’élément porteur d’un href ciblant le hash trouvé dans l’URL.

Pourquoi imiter le clic sur un lien plutôt que d’effectuer directement une animation ?
Pour éviter de réécrire une portion du code, et aussi pour limiter les animations vers les ancres prévues par notre système de navigation.

Ce morceau de code peut être placé après la création d’une des mini fonctions vues dans l’article jQuery – Effet Smooth Scroll (défilement fluide).

Note : Petite astuce donnée par notre ami Brice pour optimiser cette partie du code. Merci à lui

Écriture du hash dans l’URL

C’est bien sympa de proposer un défilement au chargement, mais puisque le hash ne s’écrit plus dans la barre d’adresse, comment allez vous faire pour partager une URL fournie d’un hash ?

Il faut le réécrire… oui d’accord, mais comment ?
Si on enlève le return false; en fin de fonction, le défilement va sauter, puis défiler de manière fluide, ou inversement.

Il faut donc le faire une fois l’animation terminée !
Je vous l’avez dit dans le précédent tutoriel à ce sujet, la fonction animate() permet l’accueil d’une fonction de callback.

Nous allons donc créer une fonction au sein du mini plugin vu dans l’ancien article, qui va nous permettre de réécrire le hash dans la barre d’adresse.
La voici :

function write_hash(the_hash) {
	    document.location.hash = the_hash;
}

Ensuite il faut faire appel à cette fonction dans notre plugin dans la partie qui gère l’animation :

$(container).animate({
        scrollTop:$(the_element).offset().top
}, speed, function() {
        write_hash(the_hash);
}); 

Au final, nous avons un code complet qui nous donne :

(function($) {
	$.fn.juizScrollTo = function( speed ) {
		if ( !speed ) var speed = 'slow';
 
		// coeur du plugin
		return this.each( function() {
			$(this).live('click', function() {
				var goscroll = false;
				var the_hash = $(this).attr("href");
				var regex = new RegExp("(.*)\#(.*)","gi");
				var the_element = '';
 
				if ( the_hash.match("\#(.+)") ) {
					the_hash = the_hash.replace(regex,"$2");
					if($("#"+the_hash).length>0) {
						the_element = "#" + the_hash;
						goscroll = true;
					}
					else if ( $("a[name=" + the_hash + "]").length>0 ) {
						the_element = "a[name=" + the_hash + "]";
						goscroll = true;
					}
					if ( goscroll ) {
						var container = 'html';
						if ( $.browser.webkit ) container = 'body';
						$(container).animate( {
							scrollTop: $(the_element).offset().top
						}, speed, function() {
							tab_n_focus(the_hash)
							write_hash(the_hash);
						});
						return false;
					}
				}
			});
		});
 
		// fonctions
 
		// écriture du hash
		function write_hash( the_hash ) {
			document.location.hash =  the_hash;
		}
 
		// accessibilité au clavier
		function tab_n_focus( the_hash ) {
			$(the_hash).attr('tabindex','0').focus().removeAttr('tabindex');
		}
 
	};
 
	// appel de la fonction sur toutes les ancres !
	$('a').juizScrollTo('slow');
 
	// fonction de slide au chargement
	function trigger_click_for_slide() {
		var the_hash = document.location.hash;
		if ( the_hash )
			$('a[href~="'+the_hash+'"]').trigger('click');
	}
	trigger_click_for_slide();
 
})(jQuery)

Avec les versions de jQuery supérieure à 1.7.0, favorisez l’utilisation de on() en lieu et place de live(). Regardez bien la documentation pour effectuer les petits changements adéquats.

Voilà… je crois que nous avons un code plutôt complet pour ce type d’effet :

• Gestion des URLs relatives et absolutes
• Navigation au clavier
• Réécriture du hash dans l’URL (pratique pour le partage d’une info précise)
• Effet smoothscroll au chargement de la page (si on cible quelque chose sur la page via l’URL)

Note : pour ceux qui exécuteraient le JavaScript en tout début de document, n’oublier pas d’utiliser $(document).ready(function(){ /*contenu de la fonction*/ }); pour n’exécuter le code qu’une fois le document HTML chargé.

N’hésitez pas à laisser un commentaire pour toute remarque sur ce code, problème rencontré, etc…

Merci pour votre lecture et à la prochaine.

Si vous êtes un habitué du blog, vous avez certainement déjà vu passer l’information sur ce plugin.
La mise à jour a été effectuée en début de semaine, mais je n’ai pas eu le temps de faire l’actu avant.

(Re)découverte

Pour ceux qui ne connaitraient pas le plugin Juiz DropDown Menu, il s’agit d’un outil permettant de passer d’une simple liste imbriquée à un menu déroulant fonctionnel à la souris et à la tabulation clavier.

Rappels des fonctionnalités

Ce plugin utilise jQuery, il s’agit d’une extension de la bibliothèque utilisant initialement un simple fichier .js.
Afin de styler ce menu le dossier du plugin contient un fichier CSS (pour lequel vous pouvez très bien ajouter son contenu à votre propre CSS), quelques fichiers d’images, et un fichier JavaScript.

Le passage de la souris sur un lien permet l’affichage animé (animation paramétrable) d’un sous-menu.
L’ouverture d’un autre sous-menu replis les sous-menus déjà ouvert.
Si on quitte le menu tous les sous-menus disparaissent.

L’utilisation de la navigation clavier à la touche tabulation est supportée.
Elle permet de passer d’un lien à l’autre tout en affichant les sous-menus. L’ordre d’affichage est bien en fonction de l’ordre du DOM.
La « tabulation inverse » permet d’afficher le contenu des sous-menus sans forcément avoir besoin de tout re-parcourir.

Nouvelles fonctionnalités

Désormais le plugin prend en charge un nouveau niveau de sous-menu.
Je ne suis pas spécialement fan ce type de sous-sous-menu, dans le sens où parfois c’est un peu trop, mais la fonctionnalité m’a été demandée et le défi me semblait intéressant.
Libre à vous de l’utiliser ou pas
Nulle crainte, il n’y aura pas de niveau supplémentaire à l’avenir.

Pour détecter plus facilement la présence de sous-menus, de nouvelles classes CSS font leur apparition et sont déjà exploitées par la CSS fournies. De petites flèches viennent donc décorer les liens cachant des sous-menus.
Il vous est possible de personnaliser l’aspect de ces éléments.

Une nouveauté également, l’aspect « responsive » qui permet d’avoir un affichage optimisé sur SmartPhone, à condition d’avoir fait le nécessaire au préalable sur votre interface, bien entendu. Cet aspect est directement présent dans la feuille de style, la règle @media et les déclarations qui suivent vous permettront de les personnaliser en cas de besoin.

Quelques limites

• Le support d’IE6 a été abandonné dans le sens où le plugin n’a pas été testé sur ce navigateur.
• Un bogue existe à la navigation clavier, lorsque l’on parcours les sous-sous-menus, ceux-ci ont tendance à disparaitre/réapparaitre.
• Le menu en mode « responsive » planque les sous-sous-menus, à vous de prévoir l’utilisation de pages intermédiaires (ça devrait de toute manière être déjà le cas… non ? :p)

Voili voiloù !
Si jamais vous avez des suggestions, je suis à vous !

Si vous êtes un habitué du blog, vous avez certainement déjà vu passer l’information sur ce plugin.
La mise à jour a été effectuée en début de semaine, mais je n’ai pas eu le temps de faire l’actu avant.

(Re)découverte

Pour ceux qui ne connaitraient pas le plugin Juiz DropDown Menu, il s’agit d’un outil permettant de passer d’une simple liste imbriquée à un menu déroulant fonctionnel à la souris et à la tabulation clavier.

Rappels des fonctionnalités

Ce plugin utilise jQuery, il s’agit d’une extension de la bibliothèque utilisant initialement un simple fichier .js.
Afin de styler ce menu le dossier du plugin contient un fichier CSS (pour lequel vous pouvez très bien ajouter son contenu à votre propre CSS), quelques fichiers d’images, et un fichier JavaScript.

Le passage de la souris sur un lien permet l’affichage animé (animation paramétrable) d’un sous-menu.
L’ouverture d’un autre sous-menu replis les sous-menus déjà ouvert.
Si on quitte le menu tous les sous-menus disparaissent.

L’utilisation de la navigation clavier à la touche tabulation est supportée.
Elle permet de passer d’un lien à l’autre tout en affichant les sous-menus. L’ordre d’affichage est bien en fonction de l’ordre du DOM.
La « tabulation inverse » permet d’afficher le contenu des sous-menus sans forcément avoir besoin de tout re-parcourir.

Nouvelles fonctionnalités

Désormais le plugin prend en charge un nouveau niveau de sous-menu.
Je ne suis pas spécialement fan ce type de sous-sous-menu, dans le sens où parfois c’est un peu trop, mais la fonctionnalité m’a été demandée et le défi me semblait intéressant.
Libre à vous de l’utiliser ou pas
Nulle crainte, il n’y aura pas de niveau supplémentaire à l’avenir.

Pour détecter plus facilement la présence de sous-menus, de nouvelles classes CSS font leur apparition et sont déjà exploitées par la CSS fournies. De petites flèches viennent donc décorer les liens cachant des sous-menus.
Il vous est possible de personnaliser l’aspect de ces éléments.

Une nouveauté également, l’aspect « responsive » qui permet d’avoir un affichage optimisé sur SmartPhone, à condition d’avoir fait le nécessaire au préalable sur votre interface, bien entendu. Cet aspect est directement présent dans la feuille de style, la règle @media et les déclarations qui suivent vous permettront de les personnaliser en cas de besoin.

Quelques limites

• Le support d’IE6 a été abandonné dans le sens où le plugin n’a pas été testé sur ce navigateur.
• Un bogue existe à la navigation clavier, lorsque l’on parcours les sous-sous-menus, ceux-ci ont tendance à disparaitre/réapparaitre.
• Le menu en mode « responsive » planque les sous-sous-menus, à vous de prévoir l’utilisation de pages intermédiaires (ça devrait de toute manière être déjà le cas… non ? :p)

Voili voiloù !
Si jamais vous avez des suggestions, je suis à vous !