Une Value qui disparait après un slideDown()

Pecose · Message par **Pecose** » 14 févr. 2013, 17:42

Bonjour à vous qui me venez en aide.
Voilà mon problème:

//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

Asumbaa · Message par **Asumbaa** » 15 févr. 2013, 09:16

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

Pecose · Message par **Pecose** » 15 févr. 2013, 12:20

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

calimo · Message par **calimo** » 15 févr. 2013, 15:29

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

Pecose · Message par **Pecose** » 15 févr. 2013, 17:09

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

Pecose · Message par **Pecose** » 16 févr. 2013, 20:56

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 : Tout sélectionner

div.test { position: relative; height: 30px; }

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

Asumbaa · Message par **Asumbaa** » 18 févr. 2013, 10:53

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

Geckozone

Une Value qui disparait après un slideDown()

Une Value qui disparait après un slideDown()

Re: Une Value qui disparait après un slideDown()

Re: Une Value qui disparait après un slideDown()

Re: Une Value qui disparait après un slideDown()

Re: Une Value qui disparait après un slideDown()

Re: Une Value qui disparait après un slideDown()

Re: Une Value qui disparait après un slideDown()

Qui est en ligne ?