Discussion :

[pierrot10]

Bonjour,

Je prends le chou grave à comprendre mais surtout à corriger une erreur d'affichage.
Pour comprendre le problème regarder ceci
http://www.therapie-isch.ch/
et réduisez la taille du navigateur de moitié, jusqu'à ce que vous voyez le bouton "sarmtphone" qui s'affiche.
ce bouton ce présente ainsi

Code HTML :

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

1
2
3
4
5
<button type="button" class="js-cd-panel-trigger" data-panel="main">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>

Appuyez sur le bouton, pour que le menu déroulant s'affiche.

Vous constaterez que la première barre violette, du bouton, reste visible, à côté de mot "Thérapie Isch". En fait tout le bouton est visible sauf que l'on ne voit pas les autres barres puis qu'elles sont de la même couleur du fond du menu qui se déploie.

Ceci ne se produit que sur la page d'accueil.

Pour revenir sur Javascript, J'essaye de modifier le code Javascript, pour que ce bouton se cache quand le menu est déployer, après avoir cliqué sur ce bouton, et.. qu'il apparait quand on a fermé le menu déroulant, ou plus tôt coulissant

Ce script fait le travail:

Code javascript :

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
(function(){
    // Slide In Panel - by CodyHouse.co
	var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
	if( panelTriggers.length > 0 ) {
		for(var i = 0; i < panelTriggers.length; i++) {
			(function(i){
				var panelClass = 'js-cd-panel-'+panelTriggers[i].getAttribute('data-panel'),
					panel = document.getElementsByClassName(panelClass)[0];
				// open panel when clicking on trigger btn
				panelTriggers[i].addEventListener('click', function(event){
					$('.js-cd-panel-trigger').hide();
					event.preventDefault();
					addClass(panel, 'cd-panel--is-visible');
 
 
				});
				//close panel when clicking on 'x' or outside the panel
				panel.addEventListener('click', function(event){
					if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
						$('.js-cd-panel-trigger').hide();
						event.preventDefault();
						removeClass(panel, 'cd-panel--is-visible');
					}
				});
			})(i);
		}
	}
 
	//class manipulations - needed if classList is not supported
	//https://jaketrent.com/post/addremove-classes-raw-javascript/
	function hasClass(el, className) {
	  	if (el.classList) return el.classList.contains(className);
	  	else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
	}
	function addClass(el, className) {
	 	if (el.classList) el.classList.add(className);
	 	else if (!hasClass(el, className)) el.className += " " + className;
	}
	function removeClass(el, className) {
	  	if (el.classList) el.classList.remove(className);
	  	else if (hasClass(el, className)) {
	    	var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
	    	el.className=el.className.replace(reg, ' ');
	  	}
	}
})();

et plus particulièrement cette partie

Code javascript :

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
// open panel when clicking on trigger btn
				panelTriggers[i].addEventListener('click', function(event){
					$('.js-cd-panel-trigger').hide();
					event.preventDefault();
					addClass(panel, 'cd-panel--is-visible');
 
 
				});
				//close panel when clicking on 'x' or outside the panel
				panel.addEventListener('click', function(event){
					if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
						$('.js-cd-panel-trigger').hide();
						event.preventDefault();
						removeClass(panel, 'cd-panel--is-visible');
					}
				});

J'ai essayé plusieurs truc. Déjà pour le cacher, j'ai repris la variable

Code :

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

var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');

et j'ai essayé d'ajouté ceci qui me fait une erreur

Code javascript :

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

1
2
3
panelTriggers.style.display="none";
document.getElementsByClassName('js-cd-panel-trigger').style.display="none" /* ceci devrait faire la même chose */
$('.js-cd-panel-trigger').hide();

La troisième solution n'est pas la meilleur, mais je ne comprends pas pourquoi les deux première ne fonctionne pas.
Je cible un élément par sa classe et je lui dit de se cacher.

Qu'est-ce que je fais de faux?

PS: J'ai aussi chercher avec du CSS, notamment en changeant les valeurs du index:2, sans succès


Merciii

[Invité]

Bonjour,

oublie les solutions capillo-tractées.
La solution la plus SIMPLE est souvent la meilleure.
Si ça devient trop complexe, c'est que tu t'es trompé de voie.

C'est z-index.

On voit dans ton code (style.css, ligne 119) :

Code css :

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

1
2
3
#page_1 button.js-cd-panel-trigger {
    z-index: 100;
}

Il te faut donc :

Code css :

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

1
2
3
.cd-panel.cd-panel--is-visible {
    z-index: 101;
}

[NoSmoking]

Bonjour,
un truc qui n'a rien à voir avec le soucis que tu rencontres c'est le mixe de JavaScript pure et de jQuery, il est quand même préférable si tu utilises jQuery de l'utiliser correctement pour une meilleur cohérence de ton code.

[pierrot10]

Bonjour Jeraux62,

J'ai pourtant cherché autour du index. En effet en mettant l'index de la class .cd-panel.cd-panel--is-visible, ca résoud ce probleme d'affichage. Mais j'ai constaté que ca ne résous pas réellement, ça le "magouille" .
Oui, car cette erreur vient de moi après modifier une autre class en ajoutant un autre index. j'ai remis "à la normal" et j'ai trouvé la source du problème.
Le problème est résolu

Merci.

@NoMsoking.
Merci pour ton observation. J'aime beaucoup le rendu de la librairie du menu qui se déploie, mais elle est en effet en javascript. J'aimerais bien trouver un similaire en jquery.

Merci beaucoup et tout bon dimanche à vous et courage durant ce confinement.

[Invité]

...mais elle est en effet en javascript. J'aimerais bien trouver un similaire en jquery

1- Tu n'as pas compris le propos de NoSmoking.

jQuery, C'EST du JavaScript.
Mais avec sa propre syntaxe, simplifiée.

Il faut éviter de mélanger les 2 syntaxes.
En clair : savoir ce qu'on fait.

Ex. :

Code :

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

1
2
document.getElementsByClassName('js-cd-panel-trigger').style.display="none"
$('.js-cd-panel-trigger').hide();

Ces 2 lignes veulent (quasiment) dire la même chose !
La 1ère se "traduit" exactement en jQuery par :

Code :

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

$('.js-cd-panel-trigger').css({'display':'none'}); // ça revient au même que hide()

2- Autre remarque :

• compte-tenu du "peu" de contenu de chaque page, tu aurais intérêt à TOUT regrouper dans un site "ONE PAGE".

Ça améliorerait grandement le référencement, d'autant que ta page "Accueil" actuelle n'a quasiment pas de contenu "pertinent"..