Discussion :

[PrincessLoiseau]

Bonjour,

Je suis complètement perdu dans un menu.

Son rôle est l'ouverture d'un div en z-index, celui-ci comporte deux parties, un logo en partie haute, et pour la partie basse, le rapport détaillé en lien avec l'appel du menu.

La partie du script est relativement fonctionnelle, le scroll du menu est ok, les div s'ouvrent correctement. Avec pour effet non désiré, que lorsque je vais sur un div de détail, c'est celui du dernier menu qui vient remplacer celui demandé.

Code html :

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

1
2
3
<div id="utilsCat" class="utilitiesNavCall" onmouseover="navMain(utilsCat,CatS,utilsCatD)"><div id="CatS" class="utilitiesNavCallIn"><span>Catégorie</span></div></div>
<div id="utilsMark" class="utilitiesNavCall" onmouseover="navMain(utilsMark,MarkS,utilsMarkD)"><div id="MarkS" class="utilitiesNavCallIn"><span>Enseigne</span></div></div>
<div id="utilsFinance" class="utilitiesNavCall" onmouseover="navMain(utilsFinance,FinanceS,utilsFinanceD, )"><div id="FinanceS" class="utilitiesNavCallIn"><span>Finance</span></div></div>

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="utilsCalled">
    <div id="utilsCalledLogo"></div>
    <div id="utilsCalledContent">
        <!-- Utilities | Content | Nav -->
        <div id="utilsCatD">include category</div>
        <div id="utilsMarkD">include enseigne</div>
        <div id="utilsFinanceD">include finance</div>
    </div>
<!-- Utilities | Content | End -> For Utilies Nav Main & Nav Rescue | Called --></div>

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
// Define Visibility for utilsCalled.
const utilsCalled = document.getElementById('utilsCalled');
    function utilsCalledV() { utilsCalled.style.display = 'flex'; }
    function utilsCalledH() { utilsCalled.style.display = 'none';}
 
function navMain(c, d, x) { // c = call // d = div title // x = called
 
  c.onmouseover = function () {
    utilsCalledV();
    x.style.display = 'flex';
    d.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    d.style.textShadow = '2px 2px 2px #231a164D'; };
  c.onmouseout = function () {
    utilsCalledH();
    x.style.display = 'none';
    d.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    d.style.textShadow = 'none'; };
  utilsCalled.onmouseover = function () {
    utilsCalledV();
    x.style.display = 'flex';
    d.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    d.style.textShadow = '2px 2px 2px #231a164D'; };
  utilsCalled.onmouseout = function () {
    utilsCalledH();
    x.style.display = 'none';
    d.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    d.style.textShadow = 'none'; };
}

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
#utilsCalled {
    z-index:25;
    position: fixed; top: 0; left:0;
    width: calc(100% - var(--widthUtilities));
    height: calc(100% - var(--heightFooter));
    flex-direction: column;
    background-color: #ffffff;
    padding: 0 0 26px 0;
    display: none;}
    #utilsCalledLogo {
        width: 100%;
        height: var(--heightCommunication); min-height: var(--heightCommunication);
        border-bottom: 1px solid #231a16;
        padding: 6px 0;
        justify-content: center; align-items: center; }
    #utilsCalledContent {
        flex-grow: 1;
        padding: 10px 20px 0 20px;
        overflow-y: auto; }
 
    /* Page Called | Main Menu */
    #utilsCatD { width: 100%; display: none; }
    #utilsMarkD { width: 100%; display: none; }
    #utilsFinanceD { width: 100%; display: none; }

[PrincessLoiseau]

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
var utilsCalled = document.getElementById('utilsCalled');
 
var utilsCat = document.getElementById('utilsCat');
var CatS = document.getElementById('CatS');
var utilsCatD = document.getElementById('utilsCatD');
 
utilsCat.onmouseover = function () {
  utilsCalled.style.display = 'flex';
  utilsCatD.style.display = 'flex';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    utilsCatD.style.display = 'flex';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
utilsCat.onmouseout = function () {
  utilsCalled.style.display = 'none';
  utilsCatD.style.display = 'none';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    utilsCatD.style.display = 'none';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}

[PrincessLoiseau]

En ouvrant la page et en passant entre les choix du menu.

Menu Un
Menu Deux
Menu Trois

Il y a micro temps d'adaptation qui flash le fond, ce qui donne un scintillement.
Cela n’apparaît qu'au premier passage.

Qu'y a t'il à utiliser pour supprimer ce temps de latence ?

[mathieu]

avez-vous essayé de faire les changements de couleur dans le code css ?
et ensuite le code javascript s'occupe juste de modifier la classe css des éléments.

[PrincessLoiseau]

Bonjour mathieu,

Oui, cela a été testé, cela n'a aucune incidence.
Si ce n'est que je dois garder du changement de couleur en script lorsque je quitte le menu pour me diriger sur la div affichée. (utilsCalled englobant les pages d'appels utilsCatD, utilsMarkD et utilsFinanceD)

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
/* Utilities | Main */
        #utilitiesMainMenu { 
            width: 100%; height: 100%; flex-direction: column; flex-wrap: wrap; justify-content: flex-end;
            padding: 10px 0 10px 0;
            border-left: 1px solid #ffffff; }
            .utilitiesNavCall { width: 100%; height: 50px; justify-content: center; align-items: center; cursor: pointer;}
            .utilitiesNavCallIn { 
                width: 94%; height: 90%; 
                justify-content: center; align-items: center;
                background: linear-gradient(45deg, #42f5c2 0%, #1da881 96%);
                color: #090e0d; } /*  090e0d */
 
            /*.utilitiesNavCallIn:hover { 
                    background: linear-gradient(45deg, #42f5c2 85%, #1da881 100%);
                    text-shadow: 2px 2px 2px #231a164D; }
            .utilitiesNavVoid { width: 100%; flex-grow: 1;}*/

Pour les problèmes de scintillements, c'est parce que le script passe par un appel, exemple : onmouseover="navMain(utilsCat,CatS,utilsCatD)" et du coup, c'est le temps de mise en place qui provoque cet inconvénient.

J'ai fait un test direct via le script. Cela ne provoque plus le scintillement et répond directement.

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
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
var utilsCalled = document.getElementById('utilsCalled');
 
const utilsCat = document.getElementById('utilsCat');
const CatS = document.getElementById('CatS');
const utilsCatD = document.getElementById('utilsCatD');
 
utilsCat.onmouseover = function () {
  utilsCalled.style.display = 'flex';
  utilsCatD.style.display = 'flex';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    utilsCatD.style.display = 'flex';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
utilsCat.onmouseout = function () {
  utilsCalled.style.display = 'none';
  utilsCatD.style.display = 'none';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    utilsCatD.style.display = 'none';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
 
var utilsMark = document.getElementById('utilsMark');
var MarkS = document.getElementById('MarkS');
var utilsMarkD = document.getElementById('utilsMarkD');
 
utilsMark.onmouseover = function () {
  utilsCalled.style.display = 'flex';
  utilsMarkD.style.display = 'flex';
  MarkS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  MarkS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    utilsMarkD.style.display = 'flex';
    MarkS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    MarkS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
utilsMark.onmouseout = function () {
  utilsCalled.style.display = 'none';
  utilsMarkD.style.display = 'none';
  MarkS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  MarkS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    utilsMarkD.style.display = 'none';
    MarkS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    MarkS.style.textShadow = '2px 2px 2px #231a164D';
  }
}

Alors c'est très fonctionnel, mais je me vois écrire pour chaque appel du menu (ici deux : utilsCat et utilsMark) un bout de code. Vu qu'il y a +- 18 appels.
Je réfléchi a fonction réutilisable pour chaque lien du menu.

En partant sur quelques chose comme ceci, mais y'a truc qui m'écharpe ? Puisque c'est (utilsMark.onmouseover=true) qui est gardé fonctionnel.

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
31
32
33
34
35
36
37
var utilsCalled = document.getElementById('utilsCalled');
 
const utilsCat = document.getElementById('utilsCat');
const CatS = document.getElementById('CatS');
const utilsCatD = document.getElementById('utilsCatD');
 
const utilsMark = document.getElementById('utilsMark');
const MarkS = document.getElementById('MarkS');
const utilsMarkD = document.getElementById('utilsMarkD');
 
if (utilsCat.onmouseover=true) { var call = utilsCat; var title = CatS; var called = utilsCatD; }
if (utilsMark.onmouseover=true) { var call = utilsMark; var title = MarkS; var called = utilsMarkD; }
 
call.onmouseover = function navOver() {
  utilsCalled.style.display = 'flex';
  called.style.display = 'flex';
  title.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  title.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    called.style.display = 'flex';
    title.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    title.style.textShadow = '2px 2px 2px #231a164D';
  };
};
 
call.onmouseout = function navOut() {
  utilsCalled.style.display = 'none';
  called.style.display = 'none';
  title.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  title.style.textShadow = 'none';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    called.style.display = 'none';
    title.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    title.style.textShadow = 'none'; };
};

Le html devenant ainsi :

Code html :

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

1
2
<div id="utilsCat" class="utilitiesNavCall"><div id="CatS" class="utilitiesNavCallIn"><span>Catégorie</span></div></div>
<div id="utilsMark" class="utilitiesNavCall"><div id="MarkS" class="utilitiesNavCallIn"><span>Enseigne</span></div></div>

[NoSmoking]

Bonjour,
il y a des choses surprenantes dans ce que tu fais comme

Code :

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

if (utilsCat.onmouseover=true) { var call = utilsCat; var title = CatS; var called = utilsCatD; }

tu affectes la valeur true à un événement ... !!!!

Si j'ai bien compris ce que tu cherches à faire, afficher/masquer un élément particulier fonction du survol d'un autre, il y a des façons simple de résoudre ce mécanisme.

Sur base de ce code HTML :

Code html :

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

1
2
3
4
5
6
7
<div class="title" data-ref="text-1">Un</div>
<div class="title" data-ref="text-2">Deux</div>
<div class="title" data-ref="text-3">Trois</div>
<hr>
<div id="text-1" class="title-text">Texte pour Un</div>
<div id="text-2" class="title-text">Texte pour Deux</div>
<div id="text-3" class="title-text">Texte pour Trois</div>

la relation entre les éléments « title » et « title-text » se fait grâce à l'attribut « data-ref ».
Le code JavaScript pour faire fonctionner cela se résume à :

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
31
// récup. des éléments à traiter
const elementsTitle = document.querySelectorAll(".title");
const elementsText = document.querySelectorAll(".title-text");
 
// function communes pour enter or leave
function handleEvent(e) {
  const el = e.target ;
  // masque tous les elementsText
  elementsText.forEach((el) => {
    el.style.display = "none";
  });
  switch (e.type) {
    case "pointerenter":
      // récup. élément lié
      const idElementText = el.dataset.ref;
      const elText = document.getElementById(idElementText);
      elText.style.display = "";
      break;
    case "pointerleave":
      break;
  }
}
// affectation des événements
elementsTitle.forEach((el) => {
  el.addEventListener("pointerenter", handleEvent);
  el.addEventListener("pointerleave", handleEvent);
})
// masque les éléments Texte par défaut
handleEvent({
  target: null
});

le CSS fait le reste pour la mise en forme et tu peux ajouter autant de liaison que tu le souhaites sans modifier le code.

Ici on modifie uniquement le display des éléments mais on pourrait tout aussi bien ajouter/supprimer une class CSS si besoin.

[PrincessLoiseau]

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
var utilsCalled = document.getElementById('utilsCalled');
const utilsCat = document.getElementById('utilsCat');
const CatS = document.getElementById('CatS');
const utilsCatD = document.getElementById('utilsCatD');
 
// etc...
 
utilsCat.addEventListener("mouseover", navMain(utilsCat, CatS, utilsCatD));
// etc..
 
function navMain(call, title, called) {
 
call.onmouseover = function navOver() {
  utilsCalled.style.display = 'flex';
  // etc ..
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    // etc .. }; };
 
call.onmouseout = function navOut() {
  utilsCalled.style.display = 'none';
  // etc ...
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    // etc ... }; };
}

Code html :

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

1
2
3
4
5
6
7
<div id="utilsCalled">
    <div id="utilsCalledLogo"></div>
    <div id="utilsCalledContent">
        <div id="utilsCatD">include category</div>
        <!-- etc ... -->
    </div>
</div>

[PrincessLoiseau]

#6

Merci pour cette interprétation. Pour laquelle je n'y serait point arrivé.
Cela laisse de la marche.

Je vais me lancer dans sa compréhension technique. Histoire de déchiffrer tout cela.


Pour ce que je cherchais à exécuter :

Il y a un menu sur un coté de l'écran. Celui-ci sert à l'appel display couvrant l'autre partie de l'écran, par dessus le contenu général.
Je devais donc afficher le display, quitter de la souris le menu pour interagir avec le display. Garder le menu actif (il y en plusieurs en couches), ainsi que son lien de correspondance, également actif.

Ce display; a la partie haute égale et contenu identique pour tous les appels; donc je devais également, en appelant ce display, appeler un page correspondante au lien. Je dis page, puisque ce sera à terme du include.

1) liens dans un menu à droite.

2) display à afficher à gauche
2.1) partie haute identique.
2.2) partie basse unique à chaque lien du menu droite.

[PrincessLoiseau]

Bonjour,

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
31
// récup. des éléments à traiter
const elementsTitle = document.querySelectorAll(".title");
const elementsText = document.querySelectorAll(".title-text");
 
// function communes pour enter or leave
function handleEvent(e) {
  const el = e.target ;
  // masque tous les elementsText
  elementsText.forEach((el) => {
    el.style.display = "none";
  });
  switch (e.type) {
    case "pointerenter":
      // récup. élément lié
      const idElementText = el.dataset.ref;
      const elText = document.getElementById(idElementText);
      elText.style.display = "";
      break;
    case "pointerleave":
      break;
  }
}
// affectation des événements
elementsTitle.forEach((el) => {
  el.addEventListener("pointerenter", handleEvent);
  el.addEventListener("pointerleave", handleEvent);
})
// masque les éléments Texte par défaut
handleEvent({
  target: null
});

Bien, j'ai pris le temps de la compréhension.
Cela est intéressant pour la partie data-ref="".

J'ai su faire l'appel du display général et de son contenu en fonction du lien.

Par contre cela devient bien contraignant, à partir du moment ou il faut :
- récupérer l'ld du <div class="title" data-ref="text-1">Un</div> par un .class ?
- récupérer l'Id du sous-parent du div <div class="title" data-ref="text-1"> puisque il y a dans celui-ci un autre div de taille inférieur, à modifier par survol.


Résultat, trop de terme techniques. Dont par les mots, la documentation est difficile.

Dans le style :
Vous appeler, const el = e.target ;,
Pour obtenir l'Id :

Code :

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

1
2
const idElementText = el.dataset.ref;
const elText = document.getElementById(idElementText);

Quid de l’appelant ? elementsTitle = document.querySelectorAll(".title"); est-ce un .parent ? .parentNode ou autre chose ?
le dataset.ref est compréhensible puisque à identifiant unique. Mais comment récupérer l'Id par un .class ? du <div id="uniqueUn" class="title" data-ref="text-1">Un</div>.

Bref, entre l'ancien jeu auquel j'ai abouti, peut-être avec quelques lignes de plus et une chipote minime si rajout d'un lien; et la méthode moderne incompréhensive sauf à y être perpétuellement investi dans une multiplication de terme.



Vous remerciant