On se tutoie ?

Aller au contenu | Aller au menu | Aller à la recherche

mercredi, février 11 2009

dom:loaded != onload

Petite histoire de développeur web du jour.

J'étais aujourd'hui entrain de développer un petit slider photos pour un client.

Pour se mettre tout de suite dans le contexte, voilà un aperçu de la situation:

  • Un conteneur d'une largeur fixe avec un overflow.
  • Une liste avec une largeur volontairement excessive.
  • Des images dans des li en display inline.

En plus de ça une petit fonction javascript, qui par le biais d'un accumulateur récupère la position de chaque image dans le container, ainsi que leur taille et qui se charge de faire « slider » les photos.

Comme j'ai la largeur totale des photos j'en profile pour redimensionner le conteneur à la bonne taille.

Ca fonctionne partout (même IE!), sauf Safari. où les items de la liste continue à s'afficher les uns en dessous des autres.

Convaincu qu'il s'agit d'un problème de CSS je commence à mettre des bordures sur chacun des blocs concernés pour me rendre compte que la liste (ul) n'a quasiment pas de largeur.

Du coup je reste convaincu qu'il s'agit d'un problème de CSS, et notamment le inline.

En fait cela provenait du javascript.

L'événement dom:loaded de prototype est lancé quand quand le DOM est chargé mais pas les images.
Du coup ce n'est pas du tout un bug de safari (au contraire, j'aurais dû avoir le souci sur d'autres navigateurs) ; simplement quand je calculais la largeur des images elles n'étaient pas encore chargées, et ma liste se voyait logiquement attribuer une largeur de 0.

Pour palier à ce cas de figure, plutôt rare, j'ai dû utiliser l'événement onload ; envoyé quand les ressources sont chargées.

mercredi, avril 16 2008

Contribution à Protoflow, un effet de coverflow en javascript

À la recherche du script cover flow

Dans le cadre de la réalisation d'un projet spécifique j'étais à la recherche d'un effet javascript permettant de simuler un coverflow sur une collection d'images.

Je suis d'abord tombé sur imageflow, que j'ai testé et qui fonctionne bien.

Mais de préférence je souhaitais un script basé sur prototype pour profiter de son incroyable potentiel puisqu'il est intégré à rails de base.
Je suis donc tombé sur Protoflow.

Protoflow plus sexy, mais avec moins de features

Le souci avec Protoflow c'est qu'il possédait moins de fonctionnalités qu'imageFlow, comme la gestion du clavier, de la souris et quelques soucis comme la mauvaise gestion des liens englobant les images.

En effet ces liens étaient désactivés en changeant leur cible (href à #), ce qui empêchait l'utilisation combinée d'effets comme lightbox.

J'ai décidé de mettre les mains dans le cambouis et de soumettre mes retours.
J'ai donc envoyé un patch pour accroitre le nombre de fonctionnalités.

Finalement le patch a été intégré \o/
Je trouve ça sympa de contribuer sur des projets externes de temps en temps.