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

logo

Alt-I, des informations alternatives

Alt-I est un blog traitant d'informatique généraliste et de cultures alternatives.

Keyword - JavaScript

Fil des billets - Fil des commentaires

mercredi, 9 juillet 2008

Extensions Firebug

Dascritch m'a indiqué ce matin un article très intéressant listant les meilleurs extensions pour Firebug. Pour rappel, Firebug est une extension Firefox incontournable pour tout développeur, facilitant grandement le debug dans le développement web.

On y retrouves des extensions très pratiques telles que :

  • Firecookie qui permet de lister tout les cookies de la page en cours et de les éditer
    FireCookie
  • FirePHP, dont je parlais il y a peu, permet de logguer des informations dans la console Firebug à partir d'un script coté serveur, sans modifier le contenu de la réponse envoyée au navigateur. Les logs étant passés dans le header de la page. Nickel pour débugger de l'ajax.
    Firebug
  • RainbowForFirebug coloriera le code javascript dans votre console Firebug.
    Rainbow For Firebug
  • Jiffy calculera le temps d'éxécution de chacune de vos fonctions Javascript.
    Jiffy

L'article en recense encore plein d'autres, mais c'était celles qui me paraissaient les plus intéressantes. Bon débug ;)

samedi, 24 mai 2008

Mario Kart en Javascript

Superbe prouesse technologique ! Des fous ont codé un Mario Kart en Javascript ! Pas de flash, pas de Java, que du Javascript. Et ça nous donne un Mario Kart premier du nom :

Mario Kart Javascript

Message à tout les inconditionnels de Flash, vous voyez qu'on peut se passer de flash pour préférer des technologies ouvertes si on se donne un peu de mal.

Source : Emunova

mardi, 12 février 2008

Menu en colonne en Javascript

Xylpho voulait pour son site, un menu en colonne comme le fait Mac OS X :

Menu Colonne Mac OS X

Ce menu devait être à la fois accessible, référençable et dynamique. Donc, pas de flash ! Javascript à la rescousse. Je lui ai donc codé une classe JS qui construit un menu en colonne à partir de listes imbriquées…

Lire la suite...

samedi, 8 septembre 2007

Ajax, navigation et accessibilité… Exemple pratique

J'ai codé à l'arrache un exemple pratique pour illustrer mon astuce concernant la navigation en Ajax accessible. Bon, c'est pas encore top au point, mais ça fonctionne nickel sous Firefox. Sous Safari 2, l'historique n'est pas modifié donc, pas de précédent ou suivant. Seul le rechargement de page fonctionne. Opera 9.5, seul le bouton Suivant ne fonctionne étrangement pas. Et IE, j'ai pas testé : j'ai pas envie de lancer VMWare : j'attends vos retours en commentaires.

Donc, de quoi s'agit il ? Nous avons une liste paginée. Sont affichés la liste des articles de ce blog par lot de 10 éléments. Une pagination en dessous permet d'afficher les 10 éléments suivants grâce à Ajax. Vous constaterez que lors d'un clic sur un numéro de page, une ancre s'ajoute à l'url. Mais aucun rechargement de page ne s'effectue.

Faîtes donc le test suivant : naviguez de page en page, puis rechargez la page. Vous vous retrouverez à la même pagination où vous étiez \o/ Attention, ce n'est pas fini. Cliquez sur le bouton précédent de votre navigateur… Pas de rechargement ni de changement de page, mais vous voilà quand même à la pagination précédente, toujours en ajax :o Revenez donc en arrière deux ou trois fois, puis repartez en avant. Même principe. Tout se charge par Ajax.

Voilà une application Ajax totalement accessible et qui reste utilisable comme tout site traditionnel.

Ah oui, ça se passe ici :

Exemple pratique pour rendre Ajax accessible

La prochaine étape sera d'écrire un module pour YUI afin de faciliter l'implémentation de cette méthode.

mercredi, 22 août 2007

Annuler le changement de page

Ahah !! Je l'ai enfin trouvé cet événement javascript ! Ça faisait un moment que je le cherchais mais que je n'en voyais pas la queue ! Je parle de l'event qui permet d'afficher un dialogue de confirmation lors du changement de page, ceci afin d'éviter de perdre le contenu d'un formulaire par exemple.

Et bien cet événement js, ce n'était simplement que onbeforeunload !!

On met ça en place de la façon suivante :

window.onbeforeunload = function(){return 'Votre Message';}

Pour l'essayer, , puis essayez de partir d'ici ;)

EDIT : J'ai trouvé comment faire fonctionner le bouzin IE… Il faut placer l'événement non pas sur window, mais sur body… Merci Microsoft encore de respecter les normes…

document.body.onbeforeunload = function(){return 'Votre Message';}

Il faut mettre les deux car pour les vrais navigateurs, ça reste dans window. On est habitué au code en double…

Vous pouvez essayer en cliquant sur le bouton

- page 1 de 4