slideDown - décallage

**Oprichnik** · 25/06/2009, 15h39

Bonjour, j'ai un problème vraiment étrange avec l'utilisation de slideDown..

Le fait est que le div sur lequel la fonction est appliquée s'élargit en hauteur et s'élargit même trop pour revenir subitement à sa place normale (où l'animation aurait du s'arrêter).

J'ai essayer plusieurs choses et j'ai remarquer qu'en enlevant un tag <br /> contenu dans un paragraphe, l'animation redevenait normale, mais bizarrement lorsque je supprime tout le paragraphe (qui contient le <br />) l'erreur se produit à nouveau !

J'utilise firefox mais l'effet est le même sur ie7..

voici ma ligne de paragraphe contenue dans le div sur lequel la fonction est appliquée :

Code :

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

1
2
3
<p align="center">L'utilisateur sera automatiquement rediriger lorsqu'il cliquera sur le lien créer.
		<br />Autrement, il arrivera sur une page temporaire indiquant le lien de destination.
	</p>

Merci

**danielhagnoul** · 25/06/2009, 22h17

Bonsoir.

C'est un effet assez simple, si l'élément à une hauteur il doit fonctionner. Difficile de vous répondre sans code.

Exemple :

Code :

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

1
2
3
4
5
6
 
$(document).ready(function(){
	$("#btn").click(function(){
		$("p").slideToggle("slow");
	});
});

Code :

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

1
2
3
4
5
 
<button id="btn" type="button">slideToggle</button>
<p style="text-align:center;">
	L'utilisateur sera automatiquement rediriger lorsqu'il cliquera sur le lien créer.<br />Autrement, il arrivera sur une page temporaire indiquant le lien de destination.
</p>

**Oprichnik** · 26/06/2009, 13h31

Voici le code, le "décalage" se produit lorsque je clique sur le plus de "partager un lien" :

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
 
<h2><img src="<?php echo CHM; ?>img/plus.png" style="visibility: hidden" id="devOneLink" class="dev" onclick="showBody(1)" /> Partager un lien</h2>
 
<div id="oneLink">
	<p align="center"><label>Lien :</label></p>
	<p align="center"><input id="form1Lien" style="width: 90%" type="text" /></p>
	<br />
	<p align="center"><input id="form1AutoRedir" type="checkbox" /><label>rhtthrht</label></p>
	<br />
	<p align="center">Le problème viendrait DE CETTE LIGNE
		<br />qui CONTIENT UN BR
	</p>
	<br />
	<p align="center"><input onclick="sendLinkForm()" type="button" value="Partager le lien" /></p>
</div>
<br />
<hr />
<br />
 
<h2><img src="<?php echo CHM; ?>img/plus.png" style="visibility: visible" id="devMultiLinks" class="dev" onclick="showBody(2)" /> Partager plusieurs liens</h2>
 
<div id="multiLinks" style="display: none">
	<p align="center"><label>Liens (un par ligne) :</label></p>
	<p align="center">
		<textarea cols="50" rows="20"></textarea>
	</p>
	<br />
	<p align="center"><input onclick="sendLinkForm()" type="button" value="Partager les liens" /></p>
</div>

Et le JS :

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
 
function showBody(n) { // Un lien / plusieurs liens
	if(n == 1) {
		if($('#devOneLink').css('visibility') == 'visible') {
			$('#devOneLink').css('visibility','hidden');
			$('#multiLinks').slideUp('slow');
			$('#oneLink').slideDown('slow',function() {
				$('#devMultiLinks').css('visibility','visible');
			});
		}
	}
	else {
		if($('#devMultiLinks').css('visibility') == 'visible') {
			$('#devMultiLinks').css('visibility','hidden');
			$('#oneLink').slideUp('slow');
			$('#multiLinks').slideDown('slow',function() {
				$('#devOneLink').css('visibility','visible');	
			});
		}
	}
 
}

Le problème en vidéo : http://oprichnik.power-heberg.be/slide.mpg

Voilà, merci.

**danielhagnoul** · 26/06/2009, 21h47

Bonsoir.

Il y a longtemps que je n'avais plus vu un code aussi ...

Après essai sous F3 et IE8 je ne vois pas de problème avec le code suivant :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		function showBody(n) { // Un lien / plusieurs liens
			if(n === 1) {
				if($('#devOneLink').css('visibility') == 'visible') {
					$('#devOneLink').css('visibility','hidden');
					$('#multiLinks').slideUp('slow');
 
					$('#oneLink').slideDown('slow',function() {
						$('#devMultiLinks').css('visibility','visible');
					});
				}
			} else {
				if($('#devMultiLinks').css('visibility') == 'visible') {
					$('#devMultiLinks').css('visibility','hidden');
					$('#oneLink').slideUp('slow');
 
					$('#multiLinks').slideDown('slow',function() {
						$('#devOneLink').css('visibility','visible');
					});
				}
			}
		}
 
		$(document).ready(function(){
			$("#devOneLink").click(function(){
				showBody(1);
			});
 
			$("#devMultiLinks").click(function(){
				showBody(2);
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
<h2><img src="../images/menu_accueil.png" width="200" height="50" class="dev" id="devOneLink" style="visibility: hidden" /> Partager un lien</h2>
 
<div id="oneLink">
       <p align="center"><label>Lien :</label></p>
       <p align="center"><input id="form1Lien" style="width: 90%" type="text" /></p>
       <br />
       <p align="center"><input id="form1AutoRedir" type="checkbox" /><label>rhtthrht</label></p>
       <br />
	   <p align="center">L'utilisateur sera automatiquement rediriger lorsqu'il cliquera sur le lien créer.
		<br />Autrement, il arrivera sur une page temporaire indiquant le lien de destination.
		</p>
       <br />
       <p align="center"><input onclick="sendLinkForm()" type="button" value="Partager le lien" /></p>
</div>
<br />
<hr />
<br />
 
<h2><img src="../images/menu_dossiers.png" width="200" height="50" class="dev" id="devMultiLinks" style="visibility: visible" /> Partager plusieurs liens</h2>
 
<div id="multiLinks" style="display: none">
       <p align="center"><label>Liens (un par ligne) :</label></p>
       <p align="center">
               <textarea cols="50" rows="20"></textarea>
       </p>
       <br />
       <p align="center"><input onclick="sendLinkForm()" type="button" value="Partager les liens" /></p>
</div>
 
	</div>
</body>
</html>

Après avoir regardé votre vidéo, je pense que votre problème vient du CSS.

**Oprichnik** · 26/06/2009, 21h55

Je suis sur firefox 3 (vidéo) et j'ai idem sur IE8..

Pour le code je suppose que tu parle des noms qui ne sont pas très clair, à part cela ça me semble correct (je débute jquery).

Voci les CSS :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<?php
 
header('content-type: text/css');
 
define('CHM','../');
 
?>
/* Menu */
 
body {
	background-image: url(<?php echo CHM; ?>img/background.png);
	color: white;
	font-family: sans-serif;
}
 
table {
	width: 60%;
}
 
img.logo {
	display: block;
	width: 500px;
	margin: 0 auto;
 
}
 
table#menu {
	margin: 0 auto -22px auto;
	height: 43px;
	background: #000000 url("<?php echo CHM; ?>img/menu-bg.png") top left repeat-x;
	font-size: 0.8em;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-weight: bold;
	list-style-type: none;
}
 
table#menu tr td {
	float: left;
	margin: 0 0 0 5px;
}
 
table#menu tr td a {
	height: 43px;
	color: #777;
	text-decoration: none;
	display: block;
	float: left;
	line-height: 200%;
	padding: 8px 15px 3px;
}
 
table#menu tr td a:hover {
	color: #FFFFFF;
	cursor: pointer;
}
 
table#menu tr td a.current{
	height: 30px;
	color: #FFF;
	background: #000000 url("<?php echo CHM; ?>img/current-bg.png") top left repeat-x;
	padding: 5px 15px 0;
}
 
div.indexPage {
	background-color: #444444;
	padding-top: 1.5%;
	padding-right: 0;
	padding-bottom: 1%;
	margin: 0 auto;
	width: 59.5%;
	border: 5px solid #CA6909;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-right-width: 3px;
}
 
.indexPage h2 {
	font-size: 150%;
	font-family: century sans-serif;
	color: white;
	margin: 0 0 15px 25px;
}
 
.indexPage p {
	width: 90%;
	font-size: 75%;
	margin: 0 auto;
}
 
.indexPage input[type=text] {
	background-color: grey;
	color: white;
	font-size: smaller;
	text-align: center;
	border: 2px solid white;
	margin-bottom: 2px;
}
 
.indexPage input[type=text].code {
	background-color: grey;
	color: white;
	font-size: smaller;
	font-weight: bold;
	text-align: center;
	border: 2px solid white;
	margin-bottom: 2px;
 
}
 
.indexPage textarea {
	background-color: grey;
	border: 2px solid white;
	cursor: default;
}
 
.indexPage input[type=button] {
	background-color: white;
	border: 2px solid orange;
	color: black;
	font-weight: bold;
}
 
.indexPage label {
	font-weight: bold;
}
 
.indexPage hr {
	width: 80%;
	border: 1px solid grey;
}
 
img.loading {
	display: block;
	margin: 0 auto;
	width: 150px;
	height: 25px;
}
 
.dev {
	cursor: pointer;
}

J'y avais pensé et donc essayé d'enlever des marginmais rien à faire..

EDIT: Oui ça vient bien des CSS mais d'où ?
EDIT: J'ai trouvé, ça vient d'ici :

Code :

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

1
2
.indexPage p {
	width: 90%;

Mais pourquoi ? (je ne sais plus pourquoi j'ai mis cette déclaration bizarre)

Merci !

slideDown - décallage

jQuery

Discussions similaires

Partager

Partager