Salut à tous, je suis actuellement sur le développement d'un site :

http://www.moov-it.net/llkp2/

Comme vous pouvez le voir, le menu d'en haut permet de faire avancer les panneaux comme si ont été sur une route, par contre si vous recliquez à nouveau dessus : le panneau disparait et revient.

Pour pallier à ce problème, je souhaite désactiver le bouton qui correspond au panneau sur lequel on se trouve deja

Mon menu est composé de cette manière :

<div id="menubar">
		<a href='#' class='menu_accueil' id='menu_accueil'></a>
		<a href='#' class='menu_real' id='menu_real'></a>
		<a href='#' class='menu_infos' id='menu_infos'></a>
		<a href='#' class='menu_contact' id='menu_contact'></a>
		<a href='#' class='menu_liens' id='menu_liens'></a>

		
		</div>

Et je fais appel à mes fonctions jQuery en selectionnant la classe :

$(".menu_real").click(function () {

J'avais donc pensé à la chose suivante :

Si quand on clique sur le bouton, je lui change sa classe :

$(".menu_real").switchClass('menu_real','menu_realoff');

Du coup le clic ne marchera pas ( c'est ce que je m'étais dit ) car on ne fera plus appel à $('.menu_real') mais non, le clic sur le bouton une fois la classe changée appelle toujours le script de défilement.

Je souhaite trouver une solution pour désactiver ce bouton !

Si vous avez également des commentaires sur le site, n'hésitez pas !

A bientot

Bonjour

Pour comprendre ton problème, il faut comprendre la notion d'évènement, et en particulier celle d'écouteur d'évènement.

Quand tu fais un .click() (jQuery) ou un .onclick (méthode native des éléments de la DOM), tu ajoutes un écouteur d'évènement (event listener en anglais).
Cela signifie qu'à chaque fois que l'évènement est déclenché, la fonction donnée à l'écouteur d'évènement sera exécutée. Ton problème c'est que tu as beau changer la classe, l'écouteur d'évènement est déjà lié aux éléments HTML (et non à une classe).

Je sais qu'en JS natif on peut se démerder avec les méthodes addEventListener() et removeEventListener().

Dans ton cas tu peux peut être simplement remplacer l'écouteur d'évènement par une fonction vide, genre en faisant un .click(null) ou .click(function(){}).
Je sais pas, il faut faire des tests.

Edit : Une autre solution consiste à mettre dans une variable globale le nom|identifiant du panneau actuellement déroulé. Ensuite dans ta fonction tu vérifies que ce n'est pas déjà ce panneau là avant d'effectuer le déroulement.

Merci pour ces infos,

Je dois donc créer une variable ( var actuel='menu_accueil' que je mettrais par défaut à menu_accueil ),
Lors d'un clic, je change cette variable par l'id du bouton sur lequel je viens de cliquer. ( actuel= this.id )?

et une verif (if actuel==this.id){ FAUX }

Pour le FAUX là, je ne connais pas la commande qu'il faut que je mette pour bloquer l'action
est-ce : return false; ?

Merci

Le mieux pour avoir la réponse à tes questions, c'est de faire des tests. Mais dans l'idée je pense que tu as compris. Après je sais pas si c'est génial comme code.

Donner une fonction vide via click() ne servira à rien, puisque jQuery ajoute les listeners.


Il faut que tu fasses le truc de l'id et de la condition directement dans ta fonction actuellement attribué à click().

En fait, ta condition serait plutôt l'inverse :

if(actuel!=this.id) {
    // Alors tu fais tout ton bazar
}
// Sous-entendu sinon tu ne fais rien 

Citation : Golmote

Donner une fonction vide via click() ne servira à rien, puisque jQuery ajoute les listeners.

Merci, j'étais pas sur. Donc ça veut dire qu'en interne, jQuery fait un node.addEventListener(...), et pas un element.onclick, c'est ça ?

Et +1 pour la condition.

Citation : gyom

Merci, j'étais pas sur. Donc ça veut dire qu'en interne, jQuery fait un node.addEventListener(...), et pas un element.onclick, c'est ça ?

Yep, c'est ça.

var actuel='menu_accueil';

Que je définis au début

$(".menu_real").click(function () {
		
		if(actuel==this.id){return false;}
		actuel='menu_real';

Qui marche parfaitement !! Merci à tous !!

actuel = this.id;

Non ?

Sinon, avez vous des problemes d'affichage niveau résolution pour le site ?
Est-il assez fluide ou plutot saccadé ?

Connaissez-vous un site qui peut à partir d'un fichier js, le convertir en version minified ? ou faut-il le faire à la main ? ( Perso si ca existe pas, ca pourrait etre un bon projet à faire )

Oui pour this.id mdr jsuis bete desfois

Ça saccade un peu au début, et parfois pendant les transitions (Win7, config plutôt correcte, Chromium).

À un moment j'ai un bloc qui est carrément sorti de l'espace visible (sur la gauche) comme si il s'était déplacé deux fois de suite sans qu'un suivant ne le remplace, mais c'était peut-être ça que tu essayais de corriger, j'ai pas vu comment je m'y suis pris pour provoquer ça.

Sinon, pas de problème de résolution (1366 x 768).

Ca va, c'est plutôt fluide.

MinifyJS et Packer sont disponibles ici :
http://jscompress.com/

Y'a uglifyJS :
http://marijnhaverbeke.nl/uglifyjs

Y'a Closure :
http://closure-compiler.appspot.com/home