Page 1 sur 1
Une Value qui disparait après un slideDown()
Publié : 14 févr. 2013, 17:42
par Pecose
Bonjour à vous qui me venez en aide.
Voilà mon problème:
Code : Tout sélectionner
//code jQuery
$(document).ready(function(){
$(".input_text").click(function(){
if ($(".xox").is(":hidden")){
$(".xox").slideDown("slow");
}
else{
$(".xox").slideUp("slow");
}
});
//code HTML
<input type="text" value="BONJOUR" class="input_text" /></p>
J'ai écrit ce code de quinze façons differentes et à chaque fois la value disparaît une fois que l'input a été enroulée ou surtout déroulée.
Jusqu'à ce qu'il gagne puis qu'il perde le focus alors que le code HTML est intacte et que value="BONJOUR"!!!
Ca fait une semaine que je suis dessus, je pleure, j'ai grandement besoin d'aide.
Votre Navigateur : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Re: Une Value qui disparait après un slideDown()
Publié : 15 févr. 2013, 09:16
par Asumbaa
Salut,
Ce bout de code seul n'a pas de raison de toucher ta value.
C'est quoi xox ? As-tu du javascript dessus aussi et comment s'articule-t-il avec ton input ?
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:18.0) Gecko/20100101 Firefox/18.0
Re: Une Value qui disparait après un slideDown()
Publié : 15 févr. 2013, 12:20
par Pecose
Je reprend vite fait:
Code : Tout sélectionner
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css"> .class1 {display:none;} </style>
<script type="text/javascript">
$(document).ready(function(){
$(".valide").click(function(){
if ($(".class1").is(":hidden")){
$(".class1").slideDown("slow");
}
else{
$(".class1").slideUp("slow");
}
});});
</script>
</head>
<body>
<form action="index.php" method="post" title="formulaire" class="form">
<input type="text" value="LOGIN" class="class1"/></p>
<input type="button" value="valide" class="valide"/>
</form>
</body>
</html>
Le problème est là, la value ne disparait pas dans le code HTML mais a l'affichage...
Elle est là mais elle est pas visible.
Votre Navigateur : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Re: Une Value qui disparait après un slideDown()
Publié : 15 févr. 2013, 15:29
par calimo
Je n'ai rien compris, qu'est-ce que ce code est censé faire ?
Si tu veux supprimer la valeur du champs, un .val("") bien placé devrait faire l'affaire. Un champs caché est tout aussi rempli qu'un champ visible.
La première chose que tu dois faire ici est définir exactement ce que tu souhaites obtenir. En général, poser le problème de manière claire est suffisant pour qu'il se résolve de lui-même !
Au passage, si le but est d'effectuer une action sur un champ bien précis (et non sur un groupe de champs), utilise un id plutôt qu'une classe (id="valide" et $(".class1")...)
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/20100101 Firefox/18.0
Re: Une Value qui disparait après un slideDown()
Publié : 15 févr. 2013, 17:09
par Pecose
C'est bon le problème est résolu.
Si tu as testé ce bout de cote sur chrome, et ce n'est finalement le cas que sur chrome, tu peut voir à l'affichage que le champs texte est vide, alors qu'il devrais afficher sa value.
Et b'in j'ai trouvé la solution en me trompant de syntaxe:
Code : Tout sélectionner
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css"> .class1 {display:none;} .xox{height:150px;}</style>
<script type="text/javascript">
$(document).ready(function(){
$(".valide").click(function(){
if ($(".class1").is(":hidden")){
$(".class1").show("slow");
}
else{
$(".class1").hide("slow");
}
});});
</script>
</head>
<body>
<form action="index.php" method="post" title="formulaire" class="form">
<div class="class1 xox">
<input type="text" value="LOGIN" class="class1"/></p>
<input type="text" value="LOGIN" class="class1"/></p>
<input type="text" value="LOGIN" class="class1"/></p>
<input type="text" value="LOGIN" class="class1"/></p>
</div>
<input type="button" value="valide" class="valide"/>
</form>
</body>
</html>
Merci de ton aide, je suis vraiment pas doué...
Votre Navigateur : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Re: Une Value qui disparait après un slideDown()
Publié : 16 févr. 2013, 20:56
par Pecose
Un certain danielhagnoul m'a donner une bien meilleur solution:
Bonsoir
C'est un bogue spécifique à Chrome.
Mais, pour les animations, il faut se donner comme règle de toujours manipuler un élément du DOM de type "block" (ou similaire). Au niveau CSS, cet élément doit avoir une hauteur et sa position doit être relative (explicitement) ou absolue.
Exemple :
Code css :Sélectionner tout - Visualiser dans une fenêtre à part
Code html :Sélectionner tout - Visualiser dans une fenêtre à part
Code : Tout sélectionner
<form class="form" title="formulaire">
<div class="test">
<input type="text" value="LOGIN" class="class1">
</div>
<input type="button" value="valide" class="valide">
</form>
Code javascript :Sélectionner tout - Visualiser dans une fenêtre à part
Code : Tout sélectionner
$( ".valide" ).click( function(){
if ( $( ".class1" ).is( ":hidden" ) ){
$( "div.test" ).slideDown( "slow" );
} else {
$( "div.test" ).slideUp( "slow" );
}
});
Votre Navigateur : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Re: Une Value qui disparait après un slideDown()
Publié : 18 févr. 2013, 10:53
par Asumbaa
Salut,
Merci d'être venu poster la solution
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:18.0) Gecko/20100101 Firefox/18.0