Une Value qui disparait après un slideDown()

Version imprimable

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

1 2 3 4 5 6 7 8 9 10 //code jQuery $(document).ready(function(){ $(".input_text").click(function(){ if ($(".xox").is(":hidden")){ $(".xox").slideDown("slow"); } else{ $(".xox").slideUp("slow"); } });
code HTML

Code:

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

15/02/2013, 10h52
danielhagnoul

Citation:

Envoyé par Pecose

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

Impossible de tester sans la totalité des codes (CSS, HTML, JS).
15/02/2013, 12h11
Vercetti

Il nous manque quelques éléments (quel élément est rattaché à la classe xox, quelle value disparait?), j'ai testé en créent une div bidon

Code:

<div class="xox">aaaa</div>

et ton code fonctionne chez moi !!

Le code

Voila le code, c'est tres simple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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">
                // mon code
                </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>

Code:

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".valide").click(function(){
        if ($(".class1").is(":hidden")){
            $(".class1").slideDown("slow");
        }
        else{
            $(".class1").slideUp("slow");
        }					
});});

La div ne sert qu'a dérouler plusieurs type="text" de façon homogene.
Je déroule le tout en meme temps pour enlever le saut de ligne que provoque
l'apparition des type="text".

Regarde cette value:

Code:

<input type="text" value="LOGIN" class="class1"/>

Normalement elle est affichée a l'interieur du champs, mais là ce n'est pas le cas.La value ne disparait pas dans le code HTML mais a l'affichage...
Elle est là mais elle est pas visible.

15/02/2013, 12h35
Vercetti

Tu utilises quel navigateur ?
Ca fonctionne pour moi sous firefox je vois la value, mais pas sous chrome!
15/02/2013, 13h49
Vercetti
Code:

1 2 fadeIn("slow"); fadeOut("slow")
à l'air de fonctionner avec les différents navigateurs sans supprimer la value

Effectivement je suis sous chrome...
Comment dire...
En fait, j'ai trouvé la solution TOTALEMENT par hasard en me trompant de syntaxe:

Code:

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
<!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 votre aide maintenant, je sais d'ou vien le problème.
Mais si vous avez d'autres façons d'encoder ce "truc" c'est avec plaisir.

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:

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

1 2 3 4 5 6 <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:

1 2 3 4 5 6 7 8 $( ".valide" ).click( function(){ if ( $( ".class1" ).is( ":hidden" ) ){ $( "div.test" ).slideDown( "slow" ); } else { $( "div.test" ).slideUp( "slow" ); } });