🌍
Français
Alors j'ai trouvé une solution pas franchement satisfaisante mais qui me permet d'avancer...
Comme la fonction .show() marche mais pas la fonction .show("slow")
(en gros dès qu'on met une valeur différente de 0, ça plante avec Chrome.)
J'ai mis un test avec $.browser.webkit, qui lance la fonction .show() si webkit, et la fonction .show("slow") sinon.
Du coup c'est un poil moins joli à mon goût avec safari/chrome, mais au moins c'est efficace.
Pour comparaison, si certains sont intéressés, j'ai laissé le script d'origine sur le thème "julien-noscript" :
http://www.audreyetjulien.fr/galerie/?t … n-noscript
Le script modifié étant installé sur le thème "julien" :
http://www.audreyetjulien.fr/galerie/?theme=julien
Dans l'absolu, j'aimerais bien comprendre ce qui plante !
Je précise qu'avec Safari, c'est pareil qu'avec Chrome (c'est normal, mais ça aurait pu aussi être un bug de chrome).
Voila les captures de ce que ça donne sous chrome, à partir du deuxième affichage du menu.
Première image : avant refresh.
Deuxième image : après refresh.
Je sèche...
En rétablissant le float:left du #menubar, l'anim redevient correcte, et ça marche dans IE7.
(avec IE6 c'est la catastrophe totale)
Par contre pas moyen de faire fonctionner ça correctement avec chrome...
Le premier affichage / hide marche mais à partir du second, ça merde.
En revanche avec un refresh ça marche.
Bon ça plante complètement avec IE7, mais aussi avec Chrome (ce qui est plus inquiétant).
Le block du #menubar est un vrai problème, mais j'ai aussi un comptage des tailles de boite différent sous Chrome.
A creuser... mais je crois que la bonne solution passe quand même par des tableaux.
Bon, en écrivant le message je me suis dit que le comportement en tableau devrait marcher... il n'y a pas de raison...
En réessayant proprement, ça marche effectivement, en tous cas il me semble.
J'ai donc redéfini comme ça :
#content : display: table / max-width 1080px / padding 20 de chaque côté
--- #menubar : display:block / max-width 160px + 20 de padding right / vertical-align:top
--- #subcontent : display:table-cell / max-width 1080px / vertical-align:top
------ .thumbnailCategories : max-width:900px / margin: auto
------ #thumbnails_block : max-width:900px / margin: auto
Le seul point qui ne me convient pas dans l'esprit, c'est le #menubar qui devrait être en table-cell.
Mais le show() hide() en js impose le block (vu qu'on part de hidden... en partant de table-cell on serait censé retrouver le fonctionnement... mais le menu ne serait pas caché au départ).
En pratique, ça semble fonctionner, en tous cas sour firefox.
J'attends quelques tests de plus pour marquer résolu.
Je recrée un nouveau fil même si le problème est proche de l'ancien, parce que ça me semble plus clair comme ça.
Donc je suis toujours sur mon thème que j'essaie de créer :
http://www.audreyetjulien.fr/galerie/in … category/6
Le comportement que je voudrais obtenir :
(1) quand le menu est off, le bloc de miniatures est au milieu de la page.
(2) quand le menu est affiché, le bloc de miniatures se déplace sur la droite de la page.
(3) si la taille de la fenêtre est trop petite, c'est le bloc de miniature qui doit s'adapter.
J'arrive à avoir (1) et (2)... mais pas (3)
Si la fenêtre est trop étroite, le bloc de miniature est déplacé vers le bas.
Actuellement ma page est organisée comme ça :
#content : max-width 1080px / padding 20 de chaque côté
--- #menubar : block / max-width 160px + 20 de padding right / float:left
--- #subcontent : inline-block max-width 900px
------ .thumbnailCategories avec mes catégories affichées en float:left / pas de taille définie
------ #thumbnails_block avec mes catégories affichées en float:left / pas de taille définie
J'ai donc tout défini avec des max-width, pourtant les boites ne s'adaptent pas en fonction de la place dispo... ça se comporte exactement comme si je mettais width=...px
Si je change le display:inline-block de #subcontent par un display:block, la largeur du bloc est "mangée" par la menubar quand elle est affichée, au lieu de se pousser.
Bref ça ne marche pas comme il faut... je pense que la structure actuelle qui mélange block/inline-block et float est assez fouillie.
Mais je n'arrive pas à trouver de système qui fonctionne comme je veux.
J'ai essayé avec des table-cell mais je n'ai pas réussi à en tirer quelque chose.
Si certains d'entre vous ont des idées...