Discussion :

[maxtrident]

bonjour
J'utilise le script de NoSmoking pour menu en responsive.
je voudrais fermer quand on click à l’extérieur du div nav.
j'ai trouver ça pour fermer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.body.onclick = function(e){
  var evt = window.event || e; 
  var target = evt.target || evt.srcElement; 
  var prevent = false;
  while( target && !prevent ){
    // id des éléments qui ne déclenche pas la fermeture
    if( target.id == "lateral-panel" || target.id == "lateral-panel-bloc" )
      prevent = true;
    target = target.parentNode;
  }
  // si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
  if( !prevent ){
    document.getElementById('lateral-panel-bloc').style.display='none';
  }
  // ne stop pas la propagation
  return true;
}

il me faudrait une simulation du clic sur label type checkbox à la place du display:none pour garder les effets de fermeture

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="lateral-panel">
  <input id="lateral-panel-input" type="checkbox">
  <label id="lateral-panel-label" for="lateral-panel-input"><span class="tmenu">Menu</span></label>
  <div id="lateral-panel-bloc">
   <nav>
			<a href="user_settings/modif">Modifier Compte</a>
			<a href="reflink ">Mon Parrainage</a>
			<a href="user_settings/avatar">Mon Avatar</a>
			<a href="mesprive">Ma Messagerie</a>
			<a href="user_settings/pub">Ma Pubicité</a>
                        <a href="Donation">Faire un Don</a>
                        <a href="user_settings/mesdons">Mes Donations</a>  
			<a href="logout">Se déconnecter</a>
 </nav> 
 
  </div>
</div>

[maxtrident]

pour ce que ça intéresse résolu avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("lateral-panel-label").click();

[unanonyme]

https://developer.mozilla.org/fr/doc...eckbox#checked

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('lateral-panel-input').checked=true;

[maxtrident]

merci j'ai testé mais ça ne fonctionne pas dans mon cas.

par contre je n'arrive pas a l’arrêter si je re-clic dans le body il re-ouvre le div...
je ne vois pas comment le stopper: essayer le break dans le while, removeEventListener, condition avec variable, stopPropagation()...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
document.getElementById('lateral-panel-label').addEventListener('click', function(){
document.body.onclick = function(e){
 
  var evt = window.event || e; 
  var target = evt.target || evt.srcElement; 
  var prevent = false;
 
 
  while( target && !prevent ){
    // id des éléments qui ne déclenche pas la fermeture
    if( target.id == "lateral-panel" || target.id == "lateral-panel-bloc" ){
      prevent = true;
	} 
    target = target.parentNode;
  }
 
  // si le clique n'était pas sur un élémént de la recherhe, on cache l'élément
  if( !prevent ){
 
	if(finclick === undefined){
	document.getElementById("lateral-panel-label").click();
 var finclick = true;
 e.stopPropagation();
 prevent = true;
  }
  }
  // ne stop pas la propagation
  return true;
}
});

[unanonyme]

testé hier soir mdn play, fonctionnel.

[maxtrident]

merci, c'est bon avec false

[NoSmoking]

Bonjour,

J'utilise le script de NoSmoking pour menu en responsive.

excellent choix à ceci prêt que après avoir regardé je dois admettre que je me suis bien planté en beauté lors du transfert des fichiers, confusion dans les noms, la mise à jour n'étant pas la bonne.

Correction faite et estampillée m-à-j : Jan. 2024 pour une meilleur clarté.

La structure est différente et apporte une meilleur fluidité lors du déplacement, l'élément « languette » ayant été déplacé dans l'élément <div id="lateral-panel-bloc"> ce qui veut également dire que le CSS est également impacté.
C'est donc à vérifier si tu optes pour la « nouvelle » version et encore toutes mes excuses


Revenons au souci de fermeture.

je voudrais fermer quand on click à l’extérieur du div nav.

Il faut effectivement bloquer la propagation des événements issus du panneau-latéral vers le document sans quoi tous les clics seront pris en compte et bonjour la prise de tête.

Concrètement il te faut une fonction du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", () => {
  const inputPanel = document.getElementById("lateral-panel-input");
  // annule la propagation click au document, ! impératif !
  // parentNode correspond au "lateral-panel"
  inputPanel.parentNode.addEventListener("click", (e) => {
    e.stopPropagation();
  });
  // traite clic sur document
  document.addEventListener("click", (e) => {
    if (inputPanel.checked) {
      inputPanel.checked = false;
    }
  });
});

Après si tu veux gérer cela en JavaScript, tu peux t’affranchir de l'<input> et utiliser l'ajout/retrait d'une class sur l'élément <div id="lateral-panel-bloc"> et là plus de problème de propagation d’événement.

[maxtrident]

bonjour
merci pour le script pour la propagation...je pensais qu'avec l'autre script ça bloqué avec le false mais à voir non quand on fait avec un console log.
j'avais séparé en css pour le chexbox.
En mode smartphone sur firefox, j'ai des petits traits qui disparaisse et revienne ou bougeant la souris... il n'y a pas que la, c'est un peut partout.

En mode plus grand, on les vois plus...Quelqu'un peut confirmé que c'est bien un délire de firefox ? comme je suis en local je ne peut pas tester.

j'ai voulue mettre le bloc à droite mais on a un scrool sur la page (je n'avais plus pensais à mettre un display:none).

j'ai voulu modifier avec un effet du style hangburger - croix à la place de flèche, j'ai passé un temps fou à essayer de l'intégré et donc laisser tombé si tu peut l'intégré à ton script.
je ne retrouve plus la source voila le script ( je ne savais pas qu'on pouvais faire ça rien qu'avec du css...balaise le mec!)

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
  .hangb {
  --s: 1.5em; /* control the size */
  --c: #888; /* the color */
 
  height: var(--s);
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-inline: calc(var(--s)/2) solid #0000; 
  box-sizing: content-box;
  --_g1: linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) 
         no-repeat content-box border-box;
  --_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) 
         repeat-y content-box border-box;
  background: 
    var(--_g2) left  var(--_p,0px) top,
    var(--_g1) left  calc(var(--s)/10 + var(--_p,0px)) top,
    var(--_g2) right var(--_p,0px) top,
    var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
  background-size: 
    20% 80%,
    40% 100%;
  position: relative;
  clip-path: inset(0 25%);
  -webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
  cursor: pointer;
  transition: 
    background-position .3s var(--_s,.3s), 
    clip-path 0s var(--_s,.6s);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.hangb:hover{
	color: #069; -> ma modif qui marche pas
}
 
.hangb:before,
.hangb:after {
  content:"";
  position: absolute;
  border-radius: var(--s);
  inset: 40% 0;
  background: var(--c);
  transition: transform .3s calc(.3s - var(--_s,.3s));
}
 
.hangb:checked {
  clip-path: inset(0);
  --_p: calc(-1*var(--s));
  --_s: 0s;
}
.hangb:checked:before {
  transform: rotate(45deg);
}
.hangb:checked:after {
  transform: rotate(-45deg);
}
.hangb:focus-visible {
  clip-path: none;
  -webkit-mask: none;
  border: none;
  outline: 2px solid var(--c);
  outline-offset: 5px;
}

l

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <input type="checkbox" role="button" aria-label="Display the menu" class="hangb">

ps: est ce normal que je ne reçois pas de mail quand réponse sur le forum avec yahoo ?

[NoSmoking]

j'ai voulu modifier avec un effet du style hangburger - croix à la place de flèche, j'ai passé un temps fou à essayer de l'intégré et donc laisser tombé si tu peut l'intégré à ton script.

Ceci est un autre problème qui n'a rien à voir avec cette discussion, merci d'ouvrir une autre discussion dans ce cas !

Une discussion = une question Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue. Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.