ldbGlobe - Tag - jquery - Commentaires

jQuery.imageMenu - Edit 2007/11/12 - cha

cha — Fri, 01 Apr 2011 18:19:26 +0200

Ok j'ai reussi a me débarrasser de ces horribles contours!
Effectivement c'est le fait de jouer sur l'opacité des PNG, j'ai donc utilisé show/hide mais maintenant j'ai un clignotement bizarre au survol...uniquement sur IE
voila mon code :

si tu as un peu de temps, merci ;-)

jQuery.imageMenu - Edit 2007/11/12 - cha

cha — Thu, 31 Mar 2011 18:43:33 +0200

merci pour ta réponse !
alors la solution des gif ou jpg n'est pas possible vu le fond qui a une texture.
j'avais essayé de faire un script uniquement pour IE avec show/hide au lieu de animate mais j'avoue je suis mauvais en JS... : en fait les images hover s'affichaient directement sans les survoler.
voila un de mes tests :

jQuery.imageMenu - Edit 2007/11/12 - mathieu

mathieu — Thu, 31 Mar 2011 16:04:06 +0200

Pour le coup ce n'est plus lié au script. mais à l'utilisation d'une PNG avec transparence et d'une opacité css (le survol fait passé l'image avec le visuel jaune de transparent à opaque...

2 solutions :
a. ne plus faire d'animation pour le changement => fait un simple hide ou show au lieu de animate
b. remplace tes PNG transparent par une version avec le fond préincrusté (tu peux même passer à du jpeg pour gagner un peu en poids)

il existe peut être d'autre solution mais la ce sont les 2 qui me viennent à l'esprit

NB : la solution "a" peux tout à fait être mise en place uniquement si tu détecte IE 8 ou inférieur

jQuery.imageMenu - Edit 2007/11/12 - cha

cha — Thu, 31 Mar 2011 02:19:31 +0200

Re-Bonjour !
Je reviens vers toi apres ma demande du 2 fevrier.
Merci bcp pour ton aide, le menu fonctionne mais il me reste juste un dernier petit soucis avec IE8 : j'ai pas mal fouillé et essayé differentes methodes mais je n'arrive pas a me debarrasser d'un contour noir au survol autour des png du menu ! Apparemment c'est un soucis courant avec le survol des png sous IE couplé a une fonction JS...
Merci d'avance si tu as une idée ;-)
Je seche :-(

http://www.bagdadrodeo.org/v2/index...

jQuery.imageMenu - Edit 2007/11/12 - john difool

john difool — Thu, 10 Mar 2011 17:10:39 +0100

Merci pour la réponse
je vais regarder tout ça

jQuery.imageMenu - Edit 2007/11/12 - mathieu

mathieu — Thu, 10 Mar 2011 17:07:39 +0100

Bonjour john,

Ce que je te conseil c'est de coder ton propre système pour déterminer l'élément à ouvrir en fonction de ta page

tes liens seront des lien tout ce qu'il y à de plus ordinaire et il entraineront ton internaute vers une nouvelle page

Du coup c'est toi qui va devoir gérer l'ouverture d'un élément plutot qu'un autre en utilisant le paramètre "init"

Dans l'exemple dispo sur la page du projet j'ai mis des liens du type #blahblah tout simplement parce que je voulais montrer le comportement du menu sans proposer une véritable navigation

=> $('#menu').ImageMenu({'init':2});

jQuery.imageMenu - Edit 2007/11/12 - john difool

john difool — Wed, 09 Mar 2011 19:58:09 +0100

Bon en fait j'ai bien regardé du côté du htaccess et y a pas moyen de passer ce #
si je le mets, le serveur ne lit plus ce qu'il y a derrière...
comme je suis pas super calé en javascript, y a pas moyen de faire sans ce dièse ???

merci d'avance

jQuery.imageMenu - Edit 2007/11/12 - john difool

john difool — Wed, 09 Mar 2011 10:52:10 +0100

Bonjour,
j'ai repris ton super menu image pour le site d'un copain et je bloque sur l'url rewritting... apparement il faut le caractère #(dièse) en premier, suivi du numéro du menu

voici le lien : www.elips-batiment.fr

ou le menu fonctionne et reste actif sur la bonne image... ou je passe ma variable de page et l'image du menu correspondante ne reste pas active...
je n'arrive pas à trouver la règle de réécriture pour passer la variable de ma page et le numero du menu..

une idée peut-être ???

en tout cas le rendu est top... beau boulot

jQuery.imageMenu - Edit 2007/11/12 - cha

cha — Fri, 04 Feb 2011 00:36:36 +0100

ca fonctionne nickel !
un grand merci a toi !

jQuery.imageMenu - Edit 2007/11/12 - mathieu

mathieu — Thu, 03 Feb 2011 09:22:51 +0100

lorsque tu bind ton action au click sur le lien
$('a.panel').bind('click',function(e){ ... })

utilise plutot "e.preventDefault()" au lieu de "return false" pour éviter que le comportement de base du lien soit executé

j'ai fait un essai avec

$('a.panel').bind('click',function(e){
e.preventDefault();
$('#wrapper').scrollTo($(this).attr('href'), 800);
});

ça me semble fonctionner

jQuery.imageMenu - Edit 2007/11/12 - cha

cha — Wed, 02 Feb 2011 20:52:12 +0100

Bonjour,

Merci pour votre script !
Il fonctionne très bien a part un petit souci du au fait que mon menu permet de lancer un autre script (jQuery.scrollTo). En effet les balises liens (a) du menu ont une classe pour permettre la navigation (class=panel). Cette classe empêche l'ouverture permanente d'un menu suite à un click.
Auriez vous une idée pour résoudre ce problème svp ?
merci d'avance
voici le site en construction :
http://www.bagdadrodeo.org/v2/index...

jQuery.imageMenu - Edit 2007/11/12 - mathieu

mathieu — Thu, 27 Aug 2009 10:02:36 +0200

Oui surement il faut revoir un peu la CSS de base et faire en sorte de travailler en height et top au lieu de width et right dans le code du script.

Mais pour le moment je vais laisser à d'autre le plaisir de le faire ^^

jQuery.imageMenu - Edit 2007/11/12 - titeuf

titeuf — Wed, 26 Aug 2009 20:30:18 +0200

beau travail... bel effet.

y a t il un ,oyen de l'adapter en vertical?

jQuery.imageMenu - Edit 2007/11/12 - mathieu

mathieu — Tue, 10 Mar 2009 19:39:00 +0100

^^ content que tu ais trouvé toute seule

jQuery.imageMenu - Edit 2007/11/12 - Sophie

Sophie — Tue, 10 Mar 2009 03:52:14 +0100

Boh, désolée pour mon commentaire bidon.
J'aurais bien effacé mon message mais ce n'est pas possible. J'ai réfléchis un peu lol, et c'est résolu...
Merci pour ce super menu!!!

jQuery.imageMenu - Edit 2007/11/12 - Sophie

Sophie — Tue, 10 Mar 2009 03:45:09 +0100

Bonjour,
j'ai voulu tester ce menu mais j'ai mis les balises <ul>......</u> entre des balises <div> avec un alignement au centre et du coup, j'ai un grand rectangle noir à gauche et les images sont en partie cachées sur la droite. J'obtiens ça avec IE mais pas avec firefox.
Aurais-tu une petite solution à me proposer car ça m'aurait vraiment plu d'utiliser ton code :-(
Merci

jQuery.imageMenu - Edit 2007/11/12 - Christophe Deliens

Christophe Deliens — Thu, 21 Aug 2008 15:22:01 +0200

Pour info, je viens de faire une modification au script pour supporter un index de base et donc "retenir" une sélection, comme dans la version originale de PhatFustion.

C'est posté sur mon blog; voici le permalink:
http://christophe.deliens.be/?p=12

jQuery.imageMenu - Edit 2007/11/12 - Baldy

Baldy — Mon, 26 May 2008 14:02:15 +0200

It's me again

Désolé de faire le squatteur mais je n'arrive pas à faire ce que je veux.

J'ai virer le float:left pour avoir un affichage vertical des <li> mais le mode coulissant reste encore et toujours à l'horizontal. De plus je n'arrive pas à se faire "chevaucher" les images comme à l'horizontal.

Aurais tu une idée pour faire cela? (en espérant avoir été assez clair sur ce que j'essaye de faire)

jQuery.imageMenu - Edit 2007/11/12 - mathieu

mathieu — Thu, 22 May 2008 19:48:03 +0200

Bah oui ça ne devrait pas poser de problème.

Ce menu fonctionne sur le principe des portes coulissantes (cad un élément dans lequel on fait glisser un autre élément et donc les partie superflu sont masqué )

Donc il suffit de travailler sur les hauteur pour avoir un résultat similaire mais vertical. Le mode de positionnement changera peut être mais il n'y à pas de raison de ne pas y arriver

jQuery.imageMenu - Edit 2007/11/12 - Baldy

Baldy — Thu, 22 May 2008 16:09:54 +0200

Re moi ^^

Je n'ai pas encore pu tester ce jouli menu car je n'ai pas d'outil approprié au bureau.

Cela dit j'ai quand même une question qui me trotte dans la tête. Est il possible d'adapter le code pour en faire une menu vertical? On aurait donc "l'ouverture" des images du haut vers le bas au lieu de la gauche vers la droite.