Une Value qui disparait après un slideDown()

**Pecose** · 15/02/2013, 08h48

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

Code :

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

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 html :

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

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

**danielhagnoul** · 15/02/2013, 11h52

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

**Vercetti** · 15/02/2013, 13h11

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 html :

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

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

et ton code fonctionne chez moi !!

**Pecose** · 15/02/2013, 13h15

Voila le code, c'est tres simple:

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

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

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 html :

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

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

**Vercetti** · 15/02/2013, 13h35

Tu utilises quel navigateur ?
Ca fonctionne pour moi sous firefox je vois la value, mais pas sous chrome!

**Vercetti** · 15/02/2013, 14h49

Code :

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

1
2
fadeIn("slow");
fadeOut("slow")

à l'air de fonctionner avec les différents navigateurs sans supprimer la value

**Pecose** · 15/02/2013, 17h55

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

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

**danielhagnoul** · 16/02/2013, 00h23

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

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

Code html :

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

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 javascript :

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

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

Une Value qui disparait après un slideDown()

jQuery

Discussions similaires

Partager

Partager