Les sliders script.aculo.us, Internet Explorer et K3Soft

admin, le 26 octobre 2006 à 10:48 dans Programmation

Avec K3Soft, nous avons une librairie générale qui permet de
transférer les éléments de la database dans un tableau HTML
(présentable sur un site web) avec toutes ces propriétés intactes. Il
s’agit d’un mode de visualisation standard auquel les gens sont
habitués; la représentation tabulaire de l’information. Lorsqu’il y a
beaucoup d’information, un système de pagination a été instauré.

Cliquer sur des pages pour naviguer n’est pas la meilleure navigation
mais demeure néanmoins un bon compromis pour un système HTML/PHP.
Aujourd’hui j’ai amélioré cet élément de l’interface en ajoutant un peu
de JavaScript, et rapidement grâce à la librairie script.aculo.us.

Scriptaculous est un framework JavaScript basé sur prototype, le système derrière Ruby On Rails. Cette librairie offre plusieurs classes intéresantes d’effet, d’animation etc… Pour notre slider, ce sont les classes de drag & drop et le slider qui nous intéressait.

Créer un slider s’est avéré être extrêmement simple, puisque la librairie fait tout le travail. Voici un bout de code exemple:

<script type="text/javascript" language="javascript">document.write('<div id="slidePages"><div id="slideTrack"><div id="slideHandle"></div></div></div>');new Control.Slider(   'slideHandle',   'slideTrack',   {      axis:'horizontal',      range:$R(0,pageMax, false),      values: pageRange,      sliderValue: page,      onSlide:function(v) {         $('slideInfo').innerHTML=(v+1);      },

      onChange:function(v){         // EFFECTUER UNE COMMANDE ICI          // (par exemple, changer window.location)      }   });</script>

C’est tout ce qu’il y a à faire. Slider instantanné, gracieuseté de scriptalicious.
Slider instantanné dans Firefox/Opera/Konqueror… Internet Explorer refuse de coopérer si facilement…

En fait, l’exemple ci-haut fonctionne, si vous ne vous trouvez pas à l’intérieur d’une table HTML. Ça rend la session de debug assez complexe puisque

Tous les exemples sur lesquels il est basé fonctionnent
La documentation de script.aculo.us n’en fait pas mention
Aucune erreur javascript ne s’affiche; le slider s’affiche mais ne fonctionne pas
Qui peut s’imaginer que l’élément table cause *encore* des problèmes.

Ce n’est qu’après beaucoup de test que j’ai pu constater que tout
fonctionne bien si l’on sort les éléments div à l’extérieur du tableau.
Le slider fonctionne désormais, mais ne se retrouve pas à la bonne
position. Un petit peu de JavaScript pour le repositionner (facilement
grâce à la librairie prototype)

// sliderId = le slider que l'on veut positionner// refId = Objet de référence, dans le tableaufunction resizeSlider(sliderId, refId){   var p = (Position.cumulativeOffset($(refId)));   $(sliderId).style.top = (p[1])+’px’;   $(sliderId).style.left = p[0]+($(refId).offsetWidth/2)      -($(sliderId).offsetWidth/2)+’px’;}

Ne pas oublier de s’assurer que le div "slidePages", dans l’exemple précédent, soit en position:absolute.

Puisque le positionnement est absolu (et en javascript, de plus, une
dernière petite ligne de code pour s’assurer que tout fonctionne bien
lorsque l’utilisateur redimensionne sa fenêtre:

window.onresize = function(){    resizeSlider('sliderPages', 'referenceObject');};

Le slider scriptaculous va désormais fonctionner sans problème avec Internet Exporer!

Toutefois, ici, nous voulons toujours que chaque site web que nous
développons soit accessible si l’utilisateur a choisi de ne pas
autorisé le JavaScript. Notre solution est de garder la navigation par
page, et remplacer celle-ci par le slider en JavaScript.

Résultat, sans JavaScript:

La même page, avec JavaScript:

Cette modification sera visible bientôt pour tous nos clients utilisant K3Soft pour toutes les tables de l’admin. (Librairies, Produits, Images etc…)