11485 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fermeture Overlay

Pages :
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.
Voici un bout de piste :
// un commentaire pour dégager le truc à droite
const overlay = document.querySelector('div.overlay.overlay-genie.open');
const btn = document.getElementById('galerie');
btn.addEventListener( 'click', function(event) {
       overlay.classList.remove('open');
       event.preventDefault();
 });
Il y a plus simple avec :target mais cela nécessite de passer ton code au kärcher Smiley fache
Modifié par bazooka07 (19 Oct 2018 - 16:43)
Salut,
qu'entends tu pas passer mon code au kärcher ?
N'y aurait-il pas une solutions avec un onClick="lafonctionque jenetrouvepas()"
Merci.
Administrateur
6ro a écrit :
Salut,
qu'entends tu pas passer mon code au kärcher ?

Je pense qu'il veut dire qu'il faudrait revoir la structure HTML et CSS de ton code.

6ro a écrit :

N'y aurait-il pas une solutions avec un onClick="lafonctionque jenetrouvepas()"

Eh non Smiley smile

6ro a écrit :
De plus ton js ne fonctionne pas!

En fait si, il fonctionne mais comme il l'a dit : c'est une piste, ce n'est pas du code prêt à l'emploi.
Son code ajoute la classe ".open" sur l'élement "div.overlay.overlay-genie", et le supprime dès que l'on clique dessus.
C'est à toi ensuite de simplement associer cette classe CSS à un "display: none" par exemple.

Bonne chance !
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.
Administrateur
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 Smiley ohwell

6ro a écrit :

J'ai aussi essayer : 
&lt;a href="#galerie" onclick="toggleOverlay();"&gt;
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.
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.
Bonsoir
J'ai regardé la page (elle me donne le tournis, mais ce n'est pas là le problème)
Quand tu cliques sur la croix, ça appelle la fonction toggleOverlay qui réduit l'overlay (quand il est actif)
Quand tu cliques sur Galeire, ça ne réduit pas l'overlay, ça va simplement à #galerie qu'on ne voit pas parce que c'est caché par l'overlay.
En faisant abstraction des remarques judicieuses des autres membres, je pense (sans en avoir la certitude car je n'ai pas la possibilité de tester) que si tu écris

<li onclick="toggleOverlay();location.hash='galerie'">
  <span style="font-weight: 200;">02/</span><span style="font-weight: 400;">GALERIE</span></li>

ça pourrait faire ce que tu veux.

Pour le reste je suis perplexe devant ce code.
En 50 ans de programmation dont 20 ans en HTML j'ai rarement vu quelque chose de ce genre.
Modifié par PapyJP (20 Oct 2018 - 18:53)
@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.
Pages :
Sujet clos
Aller à