Discussion :

[Anonyme1784]

Bonsoir,
j'ai un bon script mais je n'arrive pas à faire en sorte que ma div soit caché au départ quand on ouvre la page! Car je veux utiliser le bouton "Modifier mot de passe" pour l'afficher. Vous auriez une idée? merci !

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
.tran15 {
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;  
}
 
.tran2 {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
 
#nav { padding: 1ex; border: 2px solid #aaa; background-color: #ccf; margin: 1em; width: 20em; }
#nav:hover { border: 2px solid #ddd; background-color: #eef; }
#nav h2 { display: inline; vertical-align: middle; }
 
.hide, .show  { display: none;  font-size: 80%; vertical-align: middle; }
 
@media all and (min-width:1px) { .hide, .show  { display: inline; } }
 
a.hide:focus + .show { display: inline; }
.show { display: none; }
a.hide:focus { display: none; }
 
#menu { opacity: 1; height:300px; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.hide:focus ~ #menu { opacity: 0; height: 0em; }
 
@media print {
.hide, .show  { display: none; }
#nav {position: static; border: none; width: auto;}
#menu {width: auto;} 
}

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
<div id="nav" class="tran2">
<a href="#" class="hide">Annuler</a>
<a href="#" class="show">Modifier le mot de passe</a> 
<div id="menu" class="tran15">
<form method="POST" action="/<?php echo $nom; ?>/index.php">
        <p>Nom :</p>
        <input type="text" name="nom" placeholder="<?php echo $nom; ?>">
        <p>Ancien mot de passe :</p>
        <input type="password" name="mdpa">
        <p>Nouveau mot de passe :</p>
        <input type="password" name="nvmdp">
        <p>Confirmer nouveau mot de passe :</p>
        <input type="password" name="nvmdp2">
        <input type="submit" value="Valider" name="submodif">
        </form>
</div></div>

[miltone]

tu parle d'un div alors que dans ton code il y en a 2.
De plus je ne sais pas pour les autres mais moi j'ai du mal à lire ton code CSS présenter en ligne. C'est vraiment pas pratique et décourageant pour le lire.
(ce n'est que mon point de vue biensur)

[caroe.lavoie]

Oublie pas d'inclure le jQuery dans ton document

CSS

Code :

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

#menu {display:none;}

HTML

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
<div id="nav" class="tran2">
<a href="#" class="hide">Annuler</a>
<a href="#" class="show" id="btn_modPass">Modifier le mot de passe</a> 
<div id="menu" class="tran15">
<form method="POST" action="/<?php echo $nom; ?>/index.php">
        <p>Nom :</p>
        <input type="text" name="nom" placeholder="<?php echo $nom; ?>">
        <p>Ancien mot de passe :</p>
        <input type="password" name="mdpa">
        <p>Nouveau mot de passe :</p>
        <input type="password" name="nvmdp">
        <p>Confirmer nouveau mot de passe :</p>
        <input type="password" name="nvmdp2">
        <input type="submit" value="Valider" name="submodif">
        </form>
</div></div>

Code javascript :

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

1
2
3
$("#btn_modPass").click(function(){
 $("#menu").css("display", "block");
});

[Anonyme1784]

Merci,
je n'ai pas bien compris votre message...
"jQuery" comment je l'inclus?
+ Je ne vois pas ce que vous avez fait dans le code posté de différent de moi...

EDIT : j'ai vu les modif enfait mais je comprends pas pour le jQuery

[papajoker]

EDIT : j'ai vu les modif enfait mais je comprends pas pour le jQuery

ca c'est du code jquery, le changement au click est fait par jquery

Code javascript :

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

1
2
3
$("#btn_modPass").click(function(){
 $("#menu").css("display", "block");
});

"jQuery" comment je l'inclus?

une petite recherche

[rodolphebrd]

Ne pas oublier la Faq Jquery du forum