[Résolu] Fermeture Overlay

Bonjour,

je suis en train de faire mon site perso, le pré-projet est en ligne sur : http://6ro.fr/test/

J'ai un petit souci avec le menu sur la page d'accueil, je voudrais que l'overlay se ferme (comme quand on clique sur la croix) quand je clique sur 02/GALERIE qui est un lien vers une ancre de la même page.

Je ne sais pas comment appeler la fonction js avec un on-click.

Merci d'avance.

Salut,
qu'entends tu pas passer mon code au kärcher ?
N'y aurait-il pas une solutions avec un onClick="lafonctionque jenetrouvepas()"
Merci.

De plus ton js ne fonctionne pas!

Je suis un peu perdu.
Es-tu allez voir ma page d'accueil ? Quand tu ouvre le menu tu le ferme avec la croix.
Ne peux-t-on pas mettre la même action que celui de la croix sur le lien du menu ?

Sinon, je ne sais pas associer la classe CSS !

J'ai aussi essayer :

<a href="#galerie" onclick="toggleOverlay();">

mais je pense ne pas appeler la bonne fonction.

Merci d'avance.

6ro a écrit :
Es-tu allez voir ma page d'accueil ?

Non car malheureusement je suis en train de travailler. J'essaye de donner un coup de main vite fait mais je crois que ce n'est pas si productif que cela

6ro a écrit :

J'ai aussi essayer :

<a href="#galerie" onclick="toggleOverlay();">

mais je pense ne pas appeler la bonne fonction.

Il n'y a pas à "appeler" la fonction JS car... elle est bien faite. Elle ne t'impose pas de modifier le code HTML justement.
C'est elle toute seule comme une grande qui cherche la galerie grâce à la classe "div.overlay.overlay-genie" puis qui détecte l'événement de clic dessus.

6ro a écrit :
Sinon, je ne sais pas associer la classe CSS !

Puisque le code JS fourni ajoute ou supprime la classe ".open" sur la galerie, il suffit très simplement de faire quelque chose comme cela, je suppose :

div.overlay.overlay-genie {
display: none;
}
div.overlay.overlay-genie.open {
display: block;
}

Apparemment ça ne fonctionne pas.

Je veux simplement fermer la div quand je clique sur le lien.

Bon ben j'ai testé et ça fonctionne très bien :
https://codepen.io/raphaelgoetter/pen/vVrxyQ

Plutôt utiliser toggle

overlay.classList.toggle('open'); // toggle or remove, as you wish

Quand je vois qu'on use et abuse de l'attribut style, ça commence à sentir le roussi

Quand on prétend ne rien connaitre à JS et employer une douzaine de biblothèques Javascript, c'est juste un gag ?

Il est parfois plus facile de repartir de zéro pour atteindre l'objectif.

@bazooka07

Je ne comprends pas pourquoi tu m'agresse, un coup c'est le kärcher, une autre fois l'odeur du roussi et ensuite un gag.

Je fais ce que je peux, j'utilise en effet des biblothèques Javascript mais ne les maîtrise pas.
J'apprends un peu plus tous les jours, je ne suis en aucun cas développeur.

En tout état de cause chez moi ça ne fonctionne le menu ne se ferme pas avec :

div.overlay.overlay-genie {
display: none;
}
div.overlay.overlay-genie.open {
display: block;
}

<a href="#" id="galerie">clic moi</a>

<script type="text/javascript">

   const overlay = document.querySelector('div.overlay.overlay-genie.open');
const btn = document.getElementById('galerie');
btn.addEventListener( 'click', function(event) {
       overlay.classList.toggle('open'); // toggle or remove, as you wish
       event.preventDefault();
 });
</script>

J'ai un menu qui s'ouvre, quand je clique sur la croix, il se ferme, je voudrait juste qu'il se ferme aussi quand je clique sur un élément du menu. Voilà tout.

Voici le script qui semble ouvrir et fermer le menu, ça peut peut-être aider ?

(function() {
	var triggerBttn = document.getElementById( 'trigger-overlay' ),
		overlay = document.querySelector( 'div.overlay' ),
		closeBttn = overlay.querySelector( 'button.overlay-close' );
		transEndEventNames = {
			'WebkitTransition': 'webkitTransitionEnd',
			'MozTransition': 'transitionend',
			'OTransition': 'oTransitionEnd',
			'msTransition': 'MSTransitionEnd',
			'transition': 'transitionend'
		},
		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
		support = { transitions : Modernizr.csstransitions };
		s = Snap( overlay.querySelector( 'svg' ) ), 
		path = s.select( 'path' ),
		steps = overlay.getAttribute( 'data-steps' ).split(';'),
		stepsTotal = steps.length;

	function toggleOverlay() {
		if( classie.has( overlay, 'open' ) ) {
			var pos = stepsTotal-1;
			classie.remove( overlay, 'open' );
			classie.add( overlay, 'close' );
			
			var onEndTransitionFn = function( ev ) {
					classie.remove( overlay, 'close' );
				},
				nextStep = function( pos ) {
					pos--;
					if( pos < 0 ) return;
					path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { 
						if( pos === 0 ) {
							onEndTransitionFn();
						}
						nextStep(pos);
					} );
				};

			nextStep(pos);
		}
		else if( !classie.has( overlay, 'close' ) ) {
			var pos = 0;
			classie.add( overlay, 'open' );
			
			var nextStep = function( pos ) {
				pos++;
				if( pos > stepsTotal - 1 ) return;
				path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } );
			};

			nextStep(pos);
		}
	}

	triggerBttn.addEventListener( 'click', toggleOverlay );
	closeBttn.addEventListener( 'click', toggleOverlay );
})();

Je me suis peut-être mal exprimé, la solution, adaptée à mon cas ne fonctionne pas.

Merci à tous.

@PapyJP
Pour ma gouverne peux-tu me dire un peu ce qui te fais tourner la tête ?
Sinon la solution ne fonctionne pas.
Merci.

6ro a écrit :
@PapyJP
Pour ma gouverne peux-tu me dire un peu ce qui te fais tourner la tête ?
Sinon la solution ne fonctionne pas.
Merci.

Ce qui me fait tourner la tête c’est justement cet overlay qui s’ouvre et se ferme. En général je n’apprécie pas beaucoup les animations mais c’est une question personnelle.

Je ne comprends pas ce qui coince dans la solution que j’ai proposée.
Pour tester il faudrait importer la foultitude de ficher js que tu ulises et comprendre comment ils fonctionnent, ce qui nécessite pas mal de temps. Je vais peut-être essayer demain si j’ai un peu de temps mais je ne garantis rien.

Je me suis plongé dans ce code avec difficulté compte tenu de la façon dont il est écrit.
J'ai téléchargé le site par HTTrack et j'ai fait les modifications suivantes:
dans demo12.js, à la fin:

triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );
/* début de la partie ajoutée */
var menuEntries = document.querySelectorAll('li.menu');
for(var i = 0; i < menuEntries.length; i++) {
    menuEntries[i].addEventListener('click', toggleOverlay);
}
/* fin de la partie ajoutée */

Dans index.html et index-2.html
j'ai remplacé:

<ul class="menu-fullscreen">
  <li id="button"><a href="index-2.html"><span style="font-weight: 200;">01/</span><span style="font-weight: 400;">ACCUEIL</span></a></li>
  <li id="button"><a href="#galerie"><span style="font-weight: 200;">02/</span><span style="font-weight: 400;">GALERIE</span></a></li>
  <li id="button"><a href="logos.html"><span style="font-weight: 200;">03/</span><span style="font-weight: 400;">LOGOTYPES</span></a>
  <li id="button"><a href="skills.html"><span style="font-weight: 200;">04/</span><span style="font-weight: 400;">SKILLS</span></a></li>
  <li id="button"><a href="contact.html"><span style="font-weight: 200;">05/</span><span style="font-weight: 400;">CONTACT</span></a></li>

par

<ul class="menu-fullscreen">
  <li class="menu"><a href="index-2.html"><span style="font-weight: 200;">01/</span><span style="font-weight: 400;">ACCUEIL</span></a></li>
  <li class="menu"><a href="#galerie"><span style="font-weight: 200;">02/</span><span style="font-weight: 400;">GALERIE</span></a></li>
  <li class="menu"><a href="logos.html"><span style="font-weight: 200;">03/</span><span style="font-weight: 400;">LOGOTYPES</span></a>
  <li class="menu"><a href="skills.html"><span style="font-weight: 200;">04/</span><span style="font-weight: 400;">SKILLS</span></a></li>
  <li class="menu"><a href="contact.html"><span style="font-weight: 200;">05/</span><span style="font-weight: 400;">CONTACT</span></a></li>
</ul> 

(remarque que j'ai fermé le <ul>)

Explications:
1) les <li> sont des entrées de menu, d'où class="menu"
2) un id est sensé être unique dans une page, d'où la suppression des id="button" qui par ailleurs ne servaient à rien
3) dans le script lancé à l'initialisation des pages d'index, j'ai ajouté la fermeture de l'overlay quand on clique sur ces entrées de menu, ce qui, en particulier pour "02/GALERIE" rend le fond du document visible

Conseils:
Il serait bon de recoder tout cela sur des bases saines. On a l'impression que c'est du copier/coller de code existant, ce qui n'est pas un mal en soi, mais il n'est pas mal non plus de comprendre comment le code dont on s'inspire est fait et d'en tirer des lecçon pour améliorer sa propre pratique.

Bon courage!

Merci @PapyJP tu es génial !!!

Comme je le disais je n'ai reçu aucune formation de code ou de programmation, j'y vais a tatillon, j'apprends tous les jours.