Le web avance et cet article date de novembre 2011, son contenu peut ne plus être pertinent ou d'actualité.

Tip : Fix horizontal du plugin de tour interactif Joyride

Joyride est un plugin jQuery très pratique afin de réaliser une revue interactive des fonctionnalités d’une page.

Cependant, comme de nombreux plugins de type Tooltip, il ne prend pas en charge la détection horizontale des bords de l’écran afin de ne pas créer une barre de défilement lorsqu’il est placé trop près de l’un deux.

Voici quelques lignes à ajouter dans le fichier javascript de joyride, au niveau de la ligne 125 afin de régler ce problème tout en gardant le curseur positionné sur le bon élément.
[cc lang=’javascript’ ]var pdT = currentTip.innerWidth() – currentTip.width();
var fP = screen.width – currentTipPosition.left
– currentTip.width() – currentTip.innerWidth() – 20;
if( fP < 0 ) {
currentTipPosition.left = currentTipPosition.left + fP;
fChP = -fP + pdT;
currentTip.children( ‘.joyride-nub’ ).css( { left:fChP } );
}[/cc]
Ainsi la box est déplacée vers la gauche de manière à être entièrement affichée sur la page visible, le curseur est quant à lui déplacé vers la droite afin de bien indiquer l’élément souhaité.

 

 

Publié le par Edouard dans Développement