Nes’ Blog

Sliding Menu v1.3.1

Déjà ? Eh bien oui !

J’avais pourtant bien dit que je souhaitais faire une pause pour ce projet mais il s’est avéré que ce n’était finalement pas possible tant que tout ne serait pas parfait.

Je suppose que vous aviez remarqué que mon script ne gérait pas l’opacité des images sous IE. Je ne comprenais pas pourquoi et j’avais donc quand même décidé de sortir la nouvelle version sans attendre de régler ça (mauvaise idée en fait). Et puis hier soir j’y ai repensé dans mon lit (c’est là que je réfléchis le plus =° ) et je me souvenais que je n’avais essayé ça qu’en local, ce matin j’ai donc essayé en ligne : aucun résultat !
Comme je suis du genre têtu j’ai donc continué à chercher et j’ai fini par découvrir que cette saloperie de filtre pour l’opacité ne pouvait s’appliquer que sur des éléments HTML possédant le layout, et le layout avec IE c’est pas toujours drôle…

Bref, j’ai fini par résoudre le problème en appliquant le filtre d’opacité directement sur les images et non pas sur les liens qui les contiennent. Tant que j’y étais, j’ai cherché comment faire fonctionner l’opacité sous Konqueror mais ça m’a saoulé (navigateur alakon, je l’ai toujours dit).

Donc, pour ceux qui le souhaitent, la version 1.3.1 de Sliding Menu est disponible et arrange cette histoire d’opacité pour Internet Explorer, j’en ai aussi profité pour faire une légère restructuration du code, plus propre sur certains points.

Au passage, j’ai fini de lire mon roman : “La Guilde des Magiciens”. Je le recommande à tout ceux qui aiment le fantastique, c’est vraiment génial, maintenant il faut que j’achète les 2 autres tomes ^^ .

Concernant le blog, je ne sais pas si vous avez remarqué mais j’ai ajouté en haut à gauche un petit lecteur flash, j’y mettrai la musique que j’apprécie (d’avance, oui, j’ai des goûts bizarres). Je pense que je changerai les morceaux assez fréquemment.

Nes’

Tags: Sliding Menu

Sliding Menu v1.2.4 et Noël : quel rapport ? Aucun !

Oui, ça fait longtemps que je n’ai plus donné de nouvelles, mais j’ai plusieurs alibis (libre à vous d’y croire ou non) :

• J’ai eu quelques problèmes avec la nouvelle mise à jour de Wordpress (dont l’url-rewriting foireux comme l’avait fait remarquer smilz).
• J’ai eu peu de temps de sommeil à cause de la série manga GetBackers, je me suis couché vers 1h à 2h du mat’ chaque soir parce que je lisais environ 2 ou 3 tomes dans mon lit à chaque fois. Faut que mes amis arrêtent de me prêter des mangas sinon je vais pas tenir toute l’année…
• Et puis j’avais rien à vous dire §

Enfin bref, même si il y aura eu pas mal de temps écoulé, l’important est que la version 1.2.4 de Sliding Menu est terminée (depuis un moment en fait =° ). Donc pour marquer le coup j’ai décidé de lui offrir une page web (c’est ça qui a pris le plus de temps xD ). J’ai essayé de la faire la plus élégante possible et je pense avoir réussi même si ce n’est pas incroyablement beau, disons que c’est sobre.

La page web en question

Concernant le menu lui-même, plusieurs modifications ont été apportées, les voici :

• La première lettre du nom de la classe est maintenant une majuscule (pensez-y !).
• Quelques corrections de bugs (hauteur des fondus mal définie, z-index et margin foireux, etc).
• Modification de la licence (passage de la GPL à la LGPL).
• Remplacement du terme “melted” par “fade” dans le code (erreur de traduction).
• Initialisation automatique du menu (aucun appel à la méthode init() n’est nécessaire dorénavant).
• Si les fonds ne sont pas spécifiés on les remplace alors par un système d’opacité progressif.
• Vérification de la largeur des images, le menu se lance pas si elles n’ont pas toute la même largeur.

Bref, on peut donc dire qu’il y a eu 2 ajouts majeurs qui sont donc la nouvelle animation (compatible avec tous les navigateurs gérant le style CSS opacity) et le chargement du menu uniquement lorsque toutes les images font la même largeur. Cette dernière fonctionnalité fait aussi office de vérificateur de chargement, si toutes les images ont commencé à se charger alors on peut lancer le menu sans risque, en revanche, si une image ne se charge pas alors le menu ne s’exécutera pas.

Bon, on va maintenant parler de ma vie vu que ça vous intéresse (ou pas) :

En ce moment nous sommes en pleine période de Noël (sans blague ?!) et il paraîtrait même que tout le monde se fait des cadeaux pendant cette période ! Bien sûr, comme je suis une véritable crevure, je pense avant tout à moi et il se trouve que je sais déjà quoi m’offrir =°

Pour commencer j’ai décidé d’acheter un bouquin Fantastique nommé “La Guilde des Magiciens” qui fait partie de “La Trilogie du Magicien Noir”. J’avais offert ce bouquin à ma sœur l’année dernière mais j’avais pas eu le temps de le finir avant de le lui remettre alors qu’il me plaisait (vu qu’elle habite à Paris et moi à Lyon, je pouvais pas le continuer), j’ai donc décidé de me l’acheter pour cette année =p

Voici la couverture pour les intéressés ainsi qu’un lien vers le résumé :

Pour ceux qui ne le savent pas, je suis un fan de mangas et d’animes (une liste de tout ce que je possède se trouve ici). J’ai en tout 54 volumes amassés en une année, et comme on en a jamais assez, j’ai quelques séries en vue et que je compte acheter plus tard (elles sont inscrites sur le lien ci-dessus). Et il se trouve que je vais très probablement entamer l’une d’elles qui est très connue : Love Hina ! Cela fait un moment que je la lorgne, mais faute d’argent je ne pouvais décemment pas commencer à l’acheter, je préférais continuer mes séries actuelles. Donc pour Noël je pense que je vais m’offrir les deux premiers tomes. En fait j’ai déjà lu la série mais je voudrais la posséder pour la relire autant de fois que je le souhaite ^^ .

Les couvertures des deux premiers tomes :

Et puis comme un manga ne vient jamais seul (comment ça c’est pas la bonne expression ?!), j’ai l’intention de m’offrir le 8ème tome de la série Lanfeust des Étoiles qui est sorti il y a maintenant 2 ou 3 semaines, le voici :

Voilà tout pour mes “occasions de Noël”, enfin plus ou moins… je m’achèterai peut-être d’autres choses (dont mon joystick qui se fait attendre).

Sinon je crois que c’est tout ce que j’avais à dire… Ah si ! Il manque quelque chose !

NOYEUX JOËL !!!

Nes’

PS : Selon Wordpress j’ai très exactement écrit 792 mots de conneries, c’est beau la technologie =’)

PPS : J’avais oublié de dire que je n’ai pas été accepté en tant que checkeur pour l’anime Hyakko.

Tags: Hyakko, Joystick, Lanfeust, Love Hina, Sliding Menu

Quelques petites choses…

Bon, je n’ai pas de sujet bien précis en revanche j’ai bien envie de vous parler de deux ou trois choses donc autant rassembler tout ça dans un seul et même article, ça fait des économies de papier. En plus ça fait un moment que je n’ai plus rien écrit =p

• Commençons par une innovation pour Firefox. Je rappelle tout d’abord aux incultes que la dernière version du célèbre navigateur Firefox est la version 3.0 et que la version 3.1 ne devrait plus trop tarder (une bêta existe déjà). Si je vous annonce cela c’est parce qu’ils ont ajouté une nouvelle fonctionnalité dans la 3.1 nommée les Workers, ces derniers permettent de lancer un code Javascript en arrière-plan et réduisent ainsi l’occupation du processeur par certains scripts gourmands. Personnellement, je trouve que ça a son intérêt car ça évite qu’un script bloque le chargement d’une page, c’est plus fluide quoi. Il faudra que je télécharge la version 3.1 de Firefox histoire de tester !

• Je passe à Sliding Menu, la version 1.2.4 est maintenant terminée et je ne pense pas faire de nouveaux ajouts avant sa sortie. Si vous êtes intéressés par cette version il vous faudra attendre un peu car je suis actuellement en train de réaliser une page web qui lui est consacrée, ce sera bien plus pratique pour le distribuer, voici un aperçu (non, je ne suis pas un dieu en graphisme, c’est clair…) :
  

  Page consacrée à Sliding Menu

  J’ai choisi d’exploiter un peu mon menu sur cette page (ben oui, faut bien en vanter les mérites ^^ ), je l’ai donc placé sur le bas avec un fondu et le contenu de la page viens se mettre “sous” le menu, je n’explique pas très bien mais vous verrez bientôt en quoi ça consiste.

  Concernant le menu lui-même, il y a quelques corrections de bugs et deux ajouts majeurs, vous en saurez plus par le biais d’un nouvel article.

• Autre chose, je ne sais pas si vous l’avez constaté mais une nouvelle version du navigateur Google Chrome est sortie, il s’agit enfin d’une version stable, la v1 quoi… mais le problème est que à mon goût ça reste une bêta, pourquoi ? Parce qu’il existe et subsiste un bug qui fait que le style CSS d’opacité foire sur les images PNG qui ont de la transparence, voyez plutôt… Ce genre de bug ne devrait pas être ignoré mais immédiatement rectifié, je ne comprends pas pourquoi ça n’a pas été fait pendant tout ce temps. Enfin bon, attendons encore un peu, on verra par la suite.

• Et enfin la dernière chose dont je souhaitais vous parler, cela concerne Wordpress, la plateforme de blog que j’utilise ici-même. Elle a bénéficié d’une mise à jour qui refond absolument toute l’interface d’administration, c’est assez impressionnant pour tout vous dire, ils ont dû y passer un sacré moment ! Voici un petit aperçu :
  

  Nouvelle interface Wordpress

  Tout ce que vous voyez peut être déplacé et ainsi réorganisé selon vos envies, la gestion des commentaires est devenue ultra-simple grâce à une utilisation intensive de l’Ajax (qui évite de recharger la page pour ceux qui ne savent pas). C’est pareil pour les articles, de plus le text-area servant à écrire à été amélioré, ça se sent, il est bien plus rapide qu’auparavant !

  Bref, je pense que je vous ferai un test de cette interface. Au passage, vous aurez sûrement noté qu’il y a de l’anglais et du Français, oui, c’est le point noir : la traduction n’est pas terminée ^^’

  L’autre problème c’est qu’ils ont dû changer quelques noms de classes car mon design a été légèrement modifié, je vais y remédier (Edit : J’ai rien dit, c’est juste qu’il manquait quelques styles à définir).

Voilà tout, je vous laisse =)

Nes’

Tags: Firefox, Sliding Menu

Sliding Menu V1, enfin !

Edit : Attention ! Une nouvelle version existe !

Oui, vous avez bien lu le titre : j’ai terminé Sliding Menu !!! Alors pour ceux qui n’auraient pas suivi, il s’agit d’un menu animé en Javascript et réalisé par moi-même qui ne demande qu’un code minime en HTML pour pouvoir fonctionner, si vous voulez plus d’infos référez-vous à l’article précédent. En fait le menu est déjà terminé depuis environ une semaine mais j’avais eu la flemme de faire un article (surtout que j’en fais un paquet en ce moment)…

Bref, c’est bien beau de vous dire qu’il y a enfin la première version qui est sortie mais le plus important pour vous est de savoir : Qu’est que ça change ?!

Mais TOUT jeune inconscient ! Je me suis amusé à tout recoder de A à Z afin de sortir une version exemptée de bugs et tournant sur n’importe quel navigateur (bon, je ne garantis pas le résultat en-dessous de IE6 =° ), de plus tout à été réécrit de façon Objet, c’est pas de la merde en boîte ça !

Mais passons plutôt aux nouveautés, qu’est-ce qui a vraiment changé pour l’utilisateur ? Je vous fait une petite liste ci-dessous :

• Adoption d’une syntaxe Objet afin de faciliter l’intégration du menu dans une page mais aussi pour améliorer la gestion des variables.
• Les noms des variables ont tous été redéfinis et en anglais afin de donner une meilleure clarté au code.
• Suppression de deux arguments qui, auparavant, étaient nécessaires à l’initialisation du menu. L’argument spécifiant la largeur des images a été supprimé ainsi que celui définissant les attributs à transférer (eh oui, ça sera plus simple maintenant) !
• Résolution du problème de la constante inconnue (voir le premier article pour comprendre), je remercie au passage V@ldun car c’est grâce à lui que ça a été résolu, donc : MERCI ! =)
• Ajout de deux fonctions permettant de mettre en pause ou en lecture le menu.
• Optimisation au niveau du temps d’exécution  et au niveau du téléchargement des images (les fondus ne sont plus que des background, si vous mettez une image de 96*1px, celle-ci sera dupliquée en hauteur, c’est moins lourd pour l’utilisateur).
• Et enfin, dernier ajout : possibilité de choisir le sens de défilement ! Droite ou gauche ? À vous de choisir ! Bon, ça peut paraître banal comme ça mais quand vous avez un code qui a été entièrement prévu pour effectuer un défilement vers la gauche c’est pas si simple que ça de l’adapter pour fonctionner vers la droite. Surtout qu’il a fallu redéfinir un paquet de variables mais je suis TRÈS content du résultat, je crois que je ne pouvais pas mieux coder !

Voilà, ça fait pas mal de changements hein ^^ ? Passons maintenant à la version de démonstration (au cas où vous n’auriez pas vu que l’image plus haut redirige au même endroit =° ), je signale au passage que le menu n’est pas initialisé directement sur cette page (mais ça reste possible vous verrez), ceci afin que vous puissiez bien voir son fonctionnement de A à Z, j’ai aussi mis des boutons pour que vous puissiez contrôler le menu comme vous le voulez, ces boutons n’auront pas à apparaître normalement, c’est juste moi qui ai mis ça pour vous laisser le contrôle.

Voyons maintenant comment initialiser le menu, ben oui, ça a changé vu que j’ai recodé de façon Objet et c’est bien mieux comme ça. Bref, tout d’abord il vous faut un code HTML dont voici un exemple :

Voilà, pour faire un bouton il faut donc un ensemble de balises A + IMG, c’est pas bien dur ! Et vous définissez les attributs que vous souhaitez, ils seront conservés tout au long de l’animation. À noter que pouvez très bien ajouter une balise P afin de rendre votre code valide XHTML 1.0 Strict. Vous pouvez même ajouter du texte si vous le souhaitez, celui-ci ne sera alors affiché que si le Javascript est désactivé chez le visiteur.

Quant à l’initialisation du menu en lui-même, elle se fait par le biais de deux lignes de code en Javascript :

La première ligne sert à créer l’objet et à définir les options que vous souhaitez. La deuxième ligne lance l’initialisation (et donc l’animation) du menu.

Voici une définition des attributs pour la première ligne :

• cible : La cible du div contenant votre menu. Vous pouvez entrer soit le nom d’identification, soit un getElementById().
• sens : Le sens du menu. Il peut être défini par deux chaînes de caractères : “left” ou “right”.
• fondu_gauche : Le chemin d’accès au fondu gauche. Mettez plutôt une image de hauteur réduite (elle sera dupliquée si ce n’est pas assez), ainsi ça évitera de télécharger un gros fichier.
• fondu_droit : Même chose que pour le fondu gauche mais concerne le fondu droit cette fois-ci.
• vitesse : Dernier argument, facultatif. Il défini la vitesse de défilement du menu exprimée en millisecondes. Cette vitesse est le temps d’attente entre le déplacement de chaque pixel, par défaut il est à 30.

Voilà pour le code à fournir.

À noter que même si certains styles CSS sont redéfinis par mon script, la plupart d’entre eux peuvent être utilisés sans problème. La seule chose est que pour centrer votre menu, il vous faudra employer un margin:auto et non pas un text-align:center ;)

Eh bien c’est tout pour Sliding Menu, vous pouvez télécharger le pack ici. Au passage, pour ceux qui voudraient un menu compatible y compris au niveau de la transparence des images comme je l’ai fait sur ma page, je vous conseille d’aller voir ceci =)

Bon, et puis je crois que je vais faire une réforme dans mes catégories d’article parce que là c’est du grand n’importe quoi…

Nes’

PS : Si vous utilisez Sliding Menu, faites-le moi savoir, je serai ravi de voir ce que ça donne sur votre site web =D ! Et si vous trouvez un bug, n’hésitez pas à me le dire !

Tags: Sliding Menu

Sliding Menu, un menu en Javascript

Edit : Attention, ce menu était une version expérimentale. Il est maintenant disponible en version finale ici.

Bon, je crois qu’il serait temps pour moi de le présenter, parce que si j’attends que mon portfolio soit opérationnel pour ça alors ça va durer un moment… Je vous présente donc un menu réalisé par moi-même en Javascript : Sliding menu ! *TADAAAAAAM*

Oui, je sais, le nom est pourri mais je ne suis pas spécialisé dans l’invention des noms. Moi je réalise le projet, je le mets à jour, et puis basta. Je vais pas me torturer pendant des lustres pour trouver un nom tout bête namého =°

Bref, après ce spectacle atterrant de stupidité, passons au choses sérieuses et dévoilons un peu l’utilité de ce menu. Afin de vous le présenter, je l’ai inséré ci-dessous directement dans la page :

Indisponible

Vous remarquerez très certainement qu’il y a un petit problème au niveau de la fluidité lorsque l’une des images arrive au bout à gauche du menu. En fait il s’agit d’un bug qui n’est pas encore résolu, cela vient d’un margin dont je dois vérifier la valeur pour savoir si l’une des images a atteint le bout ou pas. Je l’appelle la “constante inconnue” parce que cette valeur est vraiment mystérieuse. Si vous voulez, théoriquement je dois faire passer une image de l’autre côté du menu lorsque celle-ci arrive à 0px de largeur entre la bordure gauche du menu et l’image elle-même. Seulement, en pratique ça change vachement et j’ai donc constaté que la valeur qui fonctionne dans la plupart des cas est -3 (allez savoir pourquoi >_> ). Or, sur mon blog ça foire et c’est la valeur 1 qui fonctionne correctement. Bref, c’est un mystère qui reste à résoudre dans l’immédiat.

En tout cas ce problème vient des styles CSS définis par la page sur laquelle se trouve le menu. Dans mon code j’ai essayé d’en redéfinir un maximum afin que le menu s’affiche correctement mais comme vous pouvez le constater (avec l’exemple de la constante inconnue) il semblerait que j’en ai oublié. Enfin bon, si vous essayez de votre côté, vous verrez que ça fonctionne très bien la plupart du temps ;) .

En revanche, même si il peut y avoir quelques problèmes avec les styles CSS des différentes pages web, le menu fonctionne sur tous les navigateurs suivants : IE6+ / Safari / Opera / Firefox / Chrome. Il y a eu un problème il y a quelques temps sous Konqueror mais il me semble que c’est réglé maintenant (si quelqu’un pouvait me le confimer svp).

Bon, passons à autre chose : Si vous êtes un tantinet attentif vous constaterez que l’activation du menu se fait (sur cette page seulement) par l’activation d’un bouton, j’ai fait ceci afin de vous montrer que le menu s’affiche très bien chez le client même si le JS est désactivé (oui, y’a pas l’animation mais on voit les images et on a les liens).

Venons-en maintenant au code, j’ai essayé de le simplifier le plus possible pour l’utilisateur et ça n’a pas été une chose facile. Pour vous servir de ce menu il vous faudra générer un code basique comme celui-ci :

Oui, la coloration synthaxique fail avec le HTML, désolé. Bref, comme vous pouvez le constater le code est on ne peut plus basique, la balise P n’est pas obligatoire mais j’ai choisi de la gérer pour ceux qui veulent avoir un site xHTML Strict. Au passage, il est important de préciser que vous pouvez mettre autant d’images que vous le souhaitez, toutefois un minimum de 2 images est demandé.

Vous pouvez bien entendu ajouter des attributs pour les balises A et IMG mais il faudra l’indiquer dans la fonction d’activation du menu. Et puisqu’on parle d’elle, voyons comment l’utiliser :

• Le premier argument est l’id du div que vous voulez transformer en menu, vous pouvez y entrer le nom du div ou bien y mettre l’élément this ou encore document.getElementById(’le_menu’). Bref, j’ai laissé le choix.
• Le deuxième argument est la largeur que font chaque image. C’est assez contraignant comme argument à spécifier et je vais voir comment le virer (en fait je pourrais le faire simplement mais la compatibilité avec IE6 serait foireuse du coup).
• Les deux argument suivants sont les URL des images pour les fondus du menu. En premier, le fondu gauche, puis vient le fondu droit.
• L’argument “speed” (qui est facultatif) défini la vitesse de défilement du menu. Une valeur de 30 est une bonne moyenne mais rappelez vous que plus vos icônes sont petites, moins la vitesse devra être élevée et vice-versa.

Et le dernier argument est le plus chiant à expliquer (il est lui aussi facultatif). En fait, chaque attribut de vos balises possède une valeur différente. Par exemple, pour l’attribut title vous pouvez voir quatre valeurs différentes dans le code HTML donné ci-dessus. Le problème, c’est que si vous n’indiquez pas cet attribut à la fonction alors dès que la première image sera passée de l’autre côté du menu, celle-ci se retrouvera avec la valeur de l’attribut de la dernière image.

Il y a une raison logique à cela mais ça serait trop long à expliquer, je vais donc faire simple : les seuls attributs pris en compte par défaut sont l’attribut href de la balise A et l’attribut src de la balise IMG. Pour des attributs supplémentaires, il vous faudra faire un array puis ajouter un champ pour chaque attribut supplémentaire et enfin envoyer l’array en dernier argument à la fonction. Pour définir l’attribut et la balise que vous souhaitez prendre en compte il vous faudra mettre le nom de la balise, un tiret, et le nom de l’attribut. Par exemple, si je fais “a-title”, je veux donc choisir de prendre en compte l’attribut title de la balise A. C’est clair ?

Et évitez de mettre trop d’attributs supplémentaires sinon vous aurez le droit à des ralentissements (faut que j’améliore ça), donc pensez à l’optimisation : si vous mettez des attributs de même valeur à chaque balise alors ne l’indiquez pas dans la fonction car il n’y aura pas besoin de “transférer” les valeurs ;) .

Concernant la valeur de retour de la fonction, elle renvoie false en cas d’échec et true pour un succès. Au passage, n’essayez pas de mettre plusieurs menus sur une page ou bien vous aurez une valeur de retour égale à false. C’est voulu pour plusieurs raisons mais je verrai si je peux lever cette limite.

Voilà pour la présentation et l’utilisation de ce menu. Histoire de montrer que je bosse ( =° ) je vous montre aussi la liste des choses que j’ai encore à faire sur ce menu :

• Permettre plusieurs menus sur une page;
• Eviter de demander les balises supplémentaires à “transférer”;
• Remplacer le vieux focus pourri par une animation (c’est pour l’accessibilité);
• Afficher le menu uniquement après chargement complet de toutes les images de celui-ci;
• Permettre le déplacement gauche ou droit (oui, y’a que vers la gauche pour le moment);
• Résoudre le mystère de la “constante inconnue”.

Voilà tout. Pour télécharger le code c’est ici (avec un exemple en plus !). Et au passage, pour ceux qui veulent étudier le code vous le pourrez : tout est extrêmement commenté. J’ai même laissé une page nommée “prototype.html” qui est le tout premier essai pour ce menu, le code est plus simple que celui de la version finale, vous comprendrez plus facilement =)

Ah et sinon bonne nouvelle : je me suis fait défoncer la gueule par un gars de ma classe aujourd’hui \o/

Bref, la vie est belle ! Maintenant je me retrouve avec des yeux enflés comme pas possible et je me suis fait un ennemi qui pratique la boxe Thaï. Je vous laisse je vais aller me pendre ><

Nes’

Tags: Sliding Menu