Code qui s’exécute au démarrage de la page

2 juillet 2020 à 17:05:24

Bonjour, je suis confronter à un problème un peu bête mais que je n'arrive pas à régler.

Avec une fonction JS, j'ai crée un menu déroulant quand on clique dessus. Le problème étant que dès que la page à chargé le menu est déjà dérouler.

Je veux donc qu'il ne le soit pas au chargement de celle-ci.

CentreDordi

2 juillet 2020 à 18:03:09

Salut,

j'ai une question: comment faire pour résoudre ton problème ? o_O

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

D3LT4

2 juillet 2020 à 21:26:34

CentreDordi a écrit:

Salut,

j'ai une question: comment faire pour résoudre ton problème ?

En fait mon problème est que dès que j'ouvre ou recharge la page web, le menu est ouvert directement, sans que l'on clique dessus.

Quand au démarrage de la page: comment il devrait être:

Lamecarlate

2 juillet 2020 à 21:41:51

Bonjour,

je pense que ce que veut dire CentreDordi, c'est qu'on a besoin de ton code pour savoir comment résoudre. Tu n'irais pas dans un garage sans ta voiture ? Ici, c'est pareil. On a besoin du HTML, probablement du CSS, et du JS, les trois colorés via le bouton </> de la barre d'outils du forum, en utilisant le bon langage (pour HTML, il faut choisir XML/XHTML, et pour JS, Jscript).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

D3LT4

2 juillet 2020 à 23:56:55

AH oups j'avais pas percuter, évidemment, html:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="test.css" />
  <title>langue</title>
</head>
<body>
	<div class="dropdown">
		<button id="boutton">langue</button>
		<ul class="active">
			<li class="deroul-item"><a href="#">Français</a></li>
			<li class="deroul-item"><a href="#">Anglais</a></li>
		</ul>
	</div>
</body>
</html>

JS:

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){
			$('button').click(function(){
				$('ul').toggleClass('active')
			})
		})
  </script>

et css:

.dropdown{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
button{
  position: relative;
  width: 100px;
  height: 30px;
  font-size: 1em;
  background: black;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
}
ul{
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #ccc;
  transform-origin: top;
  transform: perspective(1000px) rotateX(-90deg);
  transition: 0.5s;
}
ul.active{
  transform: perspective(1000px) rotateX(0deg)
}
ul .deroul-item{
  list-style: none;
}
ul .deroul-item a{
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  background: #262626;
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.2);
  transition: 0.5s;
}
ul li a:hover{
  background: whitesmoke;
  color: black;
}

-
Edité par D3LT4 2 juillet 2020 à 23:57:19

CentreDordi

3 juillet 2020 à 1:05:50

D'accord.

Alors j'ai peur de te décevoir mais suis nul en jquery...

C'est pour ça que j'ai fait le code en js pur :

Déjà, le html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="g.css" />
  <title>langue</title>
</head>
<body>
    <div class="dropdown">
        <button id="boutton" onclick="clicked()">langue</button>
        <ul id="ul" class="active">
            <li class="deroul-item"><a href="#">Français</a></li>
            <li class="deroul-item"><a href="#">Anglais</a></li>
        </ul>
    </div>
</body>
</html>

Ce que j'ai fait ici c'est que j'ai mis un onclick=clicked() dans la balise button.

J'ai rajouté un id="ul" à ta balise <ul>.

Ensuite js:

function clicked(){

var u = document.getElementById('ul');

if (u.style.display === "block") {

u.style.display = "none";

} else {

u.style.display = "block";

}

</script>

Ici, il n'y a pas de jquery... ( c'est plus compréhensible le js XD )...

Je pense que tu sais comment ça marche...

Enfin, la cerise sur le gateau :

#ul{
      display: none;
  }

J'ai rajouté ceci à ta page css... ( je pense que ton problème venait de ceci ( en tout cas je ne sais pas vu que c'est du jquery ton script ) ).

Et la fin de chez fin :

Rien.

-
Edité par CentreDordi 3 juillet 2020 à 1:08:02

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

Lamecarlate

3 juillet 2020 à 8:32:36

Oui alors non. Je pense que tu complexifies la chose, CentreDordi. Nul besoin de changer le JS et surtout d'ajouter de vilains onclicks (on fait avec des listeners, maintenant). Le code JS de base, qui ajoute ou enlève une classe, est très bien, c'est comme ça qu'il faut faire.

Et pour cacher un menu, on évite le display: none, qui va le faire disparaître aux lecteurs d'écran et donc on va perdre en accessibilité.

La seule chose qui ne va pas, selon moi, c'est qu'il y a déjà la classe "active" dans le HTML : c'est pour ça que le menu est ouvert.

Si on veut vraiment convertir le code en JS pur, ça serait quelque chose comme ça :

window.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#boutton').addEventListener('click', function () {
        document.querySelector('.dropdown ul').classList.toggle('active');
    });
});

-
Edité par Lamecarlate 3 juillet 2020 à 8:37:07

Pas d'aide concernant le code par MP, le forum est là pour ça :)

CentreDordi

3 juillet 2020 à 11:54:05

Ah.. autant pour moi... c'est vrai que display: none; aurait été un inconvénient.. et dans mon script, il n'y a pas les animations...

Ton code est le bon ! Mais je crois que tu as omis de mettre

document.querySelector('.dropdown ul').classList.toggle('active');

entre la 1ere et la 2ieme ligne ( car quand je test ton menu est déjà ouvert )...

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

Lamecarlate

3 juillet 2020 à 18:00:28

C'est pour ça que je dis (implicitement, certes) qu'il faut modifier le HTML pour l'enlever.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

D3LT4

4 juillet 2020 à 14:21:01

CentreDordi a écrit:

Ah.. autant pour moi... c'est vrai que display: none; aurait été un inconvénient.. et dans mon script, il n'y a pas les animations...

Ton code est le bon ! Mais je crois que tu as omis de mettre
document.querySelector('.dropdown ul').classList.toggle('active');
entre la 1ere et la 2ieme ligne ( car quand je test ton menu est déjà ouvert )...

Lamecarlate a écrit:

C'est pour ça que je dis (implicitement, certes) qu'il faut modifier le HTML pour l'enlever.

Merci pour votre aide ça a marché, je débute en JS dans le web design, donc je suis un peu perdu des fois.

Bonne journée

CentreDordi

4 juillet 2020 à 17:17:49

Heum, si c'est résolu de chez résolu, tu peux cliquer sur le bouton " résolu " car ça va permettre de faire savoir que ton sujet est résolu vu qu'il est résolu... Bonne journée...

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.