jquery (ui ?) slide right

**artenis** · 14/12/2012, 00h05

Bonjour, ( !! ma question concerne à la fois le css et le jquery !!)

J'ai 3 div principales dans un conteneur :
la première 1 div à gauche (float:left), contient un formulaire et placée en z-index:30
la deuxième 2 à gauche (float:left), située en-dessous de la première z-index:20
la troisième 3 à droite (float:right), placée en z-index:10

je souhaite appliquer un slide (direction droite) à la deuxième div , sans que la div de gauche soit décallée.
(je n'arrive pas à me décider entre animate et jquery ui "show")

Après plusieurs test je n'arrive toujours pas à savoir quel attribut css utiliser pour empecher la div ( de droite de se décaler vers le bas pendant que le slide (animate) s'effectue sur la div 2 à gauche.

le but est de faire passer la div 2 par dessus la div 3.

un très grand merci à la personne qui pourra me donner l'explication à mon problème

**artenis** · 14/12/2012, 23h47

J'ai essayé ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 
	$('#r-a_click').click(function(){
 
		$('#rechercher-ava').toggle(
		function() {
			$(this).stop().animate({marginLeft:'290px'},1000);
		},
 		function() {
    		$(this).stop().animate({marginLeft:0},1000);
  		});
	});

legende : r-a-click et r-a-cache sont dans le même conteneur "rechercher-ava"
mais il y a un bug : pour la deuxième partie du toggle le click sur "r-a-click" ne fonctionne pas, mais marche sur la div situé à sa gauche "r-a-cache".

Auriez-vous une solution ?

**danielhagnoul** · 15/12/2012, 00h51

Bonsoir

Un exemple :

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			footer { margin-top: 30rem; }
 
			div { position: relative; border:0.1rem dotted grey;  width: 20rem; height: 20rem; margin: 2rem; padding: 0.6rem; }
 
			div:nth-of-type(1) { float: left; z-index: 30; background-color: yellow; }
			div:nth-of-type(2) { float: left; z-index: 20; background-color: red; }
			div:nth-of-type(3) { float: left; z-index: 10; background-color: blue; }
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
 
		<div><button id="btn1">Slide</button></div>
		<div><button id="btn2">Slide</button></div>
		<div><button id="btn3">Slide</button></div>
 
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-15T00:46:47.126+01:00" pubdate>2012-12-15T00:46:47.126+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
				var sens1 = "+",
					sens2 = "+",
					sens3 = "-";
 
				$( "#btn1" ).on( "click", function(){
					$( this ).parent().animate({ "left" : sens1 + "=80rem" }, 3000, function(){
						if ( sens1 == "+" ){
							sens1 = "-";
						} else {
							sens1 = "+";
						}
					});
				});
 
				$( "#btn2" ).on( "click", function(){
					$( this ).parent().animate({ "left" : sens2 + "=50rem" }, 3000, function(){
						if ( sens2 == "+" ){
							sens2 = "-";
						} else {
							sens2 = "+";
						}
					});
				});
 
				$( "#btn3" ).on( "click", function(){
					$( this ).parent().animate({ "left" : sens3 + "=55rem" }, 3000, function(){
						if ( sens3 == "+" ){
							sens3 = "-";
						} else {
							sens3 = "+";
						}
					});
				});
 
			});
		</script>
	</body>
</html>

**artenis** · 15/12/2012, 11h08

Merci Danielhagnoul,

mais je ne comprends pas cette partie là :

Code :

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

1
2
3
4
5
if ( sens1 == "+" ){
							sens1 = "-";
						} else {
							sens1 = "+";
						}

et je ne comprends pas l'utilisation de sens1 comme variable associé à "left".

j'ai un conteneur qui contient deux div, une a gauche et une à droite. Quand je clique sur celle de droite le conteneur s'anime et slide vers la droite, mais lorsque je veux le refermer (slide gauche) le script ne s'execute plus sur la div droite mais sur la div gauche. Or je n'ai rien spécifier de tout cela dans mon script.

**danielhagnoul** · 15/12/2012, 22h43

Bonsoir

C'est une page de démonstration qui montre ce qu'il est possible de faire avec la méthode animate() de jQuery.

Il suffit de copier-coller le code de ma page de test pour voir la démonstration.

Le bouton "Slide" permet de déplacer la division parent au premier clic et de la ramener à son emplacement d'origine au second clic.

La valeur de sens est "+" ou "-" selon le sens du déplacement et la division concernée.

Il faut reprendre la partie du code qui vous intéresse et l'adapter à vos besoins spécifiques.

**artenis** · 16/12/2012, 11h36

j'ai bien fait un copier/coller de votre script, cependant, même après l'avoir adapté à mon code, il ne fonctionne pas .

si cela vous est possible pourriez vous me décrire en détail sa signification.

**NoSmoking** · 16/12/2012, 11h59

Bonjour,
et si tu fournissais le code HTML de ta page ainsi que ta nouvelle adaptation, cela éviterait l'achat de boule de cristal, bien qu'à cette période...

**artenis** · 16/12/2012, 12h52

voici le code html :

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
<div id="zone_gauche">
            <div id="rechercher-rap" class="border-rad-total">
                <div id="rr_titre"> Recherche</div>
                <div id="rr_depart" class="rr1">
 
                    <input class="recherche_rapide1 border-rad-total" type="text" name="rr_depart" placeholder="Départ"/>
                </div>
                <div id="rr_arrivee" class="rr2">
 
                    <input class="recherche_rapide1 border-rad-total" type="text" name="rr_arrivee" placeholder="Arrivée"/>
                </div>
                <div id="rr_horaire" >
 
                    <input class="recherche_rapide2 border-rad-total" type="text" placeholder="Horaire" name="rr_horaire" />
                </div>
                <input type="submit" value="Rechercher" id="rr_btn" class="border-rad-total"  name="rr_btn" />
                <div id="rr_result">6 résultats : <span style="width:100%; background:white; color:#999; padding-left:5px; padding-right:5px;">Consulter -></span></div>
            </div>
 
                <div id="rechercher-ava">
                    <div id="r-a_cache"></div>
                    <div id="r-a_click" class="border-rad-right"></div>
                </div>
 
        </div>

voici le script déjà utiliser:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
$('#r-a_click').on( "click",function(){
$('#rechercher-ava').toggle(
		function() {
			$(this).stop().animate({marginLeft:'290px'},1000);
		},
 		function() {
    		$(this).stop().animate({marginLeft:0},1000);
  		});
 
	});
});

merci pour votre aide

**NoSmoking** · 16/12/2012, 18h03

Le soucis que tu va avoir est de concilier le CSS avec les animations, les pages WEB ont horreur du vide.

Il nous faudrait connaître les CSS appliqué à tes différents éléments pour en voir l'interaction.

D'autre part tu parles de 3 DIV et je n'en vois que 2( principales)

**NoSmoking** · 16/12/2012, 19h10

Encore une chose pendant que l'on y est

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$('#r-a_click').toggle(
  function () {
    $(this).parent().stop().animate({
      'marginLeft': '290px'
    }, 1000);
  },
  function () {
    $(this).parent().stop().animate({
      'marginLeft': '0px'
    }, 1000);
  });
});

cela ne marche pas ?

**artenis** · 17/12/2012, 00h32

Bonjour Nosmoking,

voici le css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.recherche_rapide1{border:1px solid #000000; width:200px; height:40px;  background:#333;}
.recherche_rapide2{border:1px solid #000000; width:75px; height:40px;  background:#333;}
.rr1{margin-bottom:8px;}
.rr2{margin-bottom:15px;}
 
#recherche_main_bloc #rechercher-rap{width:290px; height:250px; background:#333; border-bottom-right-radius:0;z-index:200; position:relative;}
		#recherche_main_bloc #rechercher-rap #rr_titre{width:290px; padding-top:7px; padding-bottom:7px; font-size:13pt; text-align:center; margin-bottom:15px; border-bottom:3px solid white; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px;}
		#recherche_main_bloc #rechercher-rap #rr_horaire{float:left;}
		#recherche_main_bloc #rechercher-rap #rr_btn{float:left; background:585858; color:#999; border:none; width:105px; height:46px; padding-left:10px; padding-right:10px; font-size:13pt; margin-bottom:6px;}
		#recherche_main_bloc #rechercher-rap #rr_result{height:20px; width:290px;  text-align:center;  font-size:11pt;clear:both;}
 
 
#recherche_main_bloc #rechercher-ava{width:319px; height:220px; position:relative; left:0; top:-220px; z-index:2;}
		#recherche_main_bloc #rechercher-ava #r-a_cache{width:290px; height:220px; background:#333; float:left; }
		#recherche_main_bloc #rechercher-ava #r-a_click{width:29px; height:220px;  border-left:1px solid #5C5C5C; background:#333; position:relative; left:290px;}

pour le script jquery il fonctionne à moitié:
"j'ai un conteneur qui contient deux div, une a gauche et une à droite. Quand je clique sur celle de droite le conteneur s'anime et slide vers la droite, mais lorsque je veux le refermer (slide gauche) le script ne s'execute plus sur la div droite mais sur la div gauche. Or je n'ai rien spécifier de tout cela dans mon script."

le conteneur se situe en-dessous d'un autre conteneur (z-index).

les div concernées sont : #rechercher-rap, #rechercher-ava, #r-a_cache, #r-a_click, seul #r-a_click a un problème lors de l'éxécution du script.

description plus précise du problème :

j'ai une div #rechercher-rap en première position, sous celle-ci j'ai une div #rechercher-ava qui contient deux div #r-a_cache et #r-a_click (gauche et droite) #r-a_click dépasse de #rechercher-rap , ainsi je peux cliquer sur #r-a_click : quand je clique dessus la div #rechercher-ava slide(glisse) à droite , mais lorsque je veux fermer #rechercher-ava et que je clique sur #r-a_click le script ne fonctionne plus, mais il marche sur la div #r-a_cache, que je n'ai absolument pas spécifié dans le script

merci pour votre aide

**NoSmoking** · 23/12/2012, 23h06

Toutes mes excuses j'étais persuadé avoir répondu

la proposition que je t'ai mise un peu plus haut fonctionne bien si j'ai bien saisi ce que tu cherches à faire.

Sur base de ton CSS je te mets mon fichier de test

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
#rechercher-rap {
  width:290px;
  height:250px;
  background:#333;
  border-bottom-right-radius:0;
  z-index:200;
  position:relative;
  /* AJOUT */
  background-color:#DCC;
}
#rechercher-ava {
  width:319px;
  height:220px;
  position:relative;
  left:0;
  top:-220px;
  z-index:2;
}
#r-a_cache {
  width:290px;
  height:220px;
  background:#333;
/*  border-left:1px solid #5C5C5C;/* SUPPRIME */
  float:left;
  /* AJOUT */
  background-color:#CCD;
}
#r-a_click {
  width:29px;
  height:220px;
/*  border-left:1px solid #5C5C5C;/* SUPPRIME */
  background:#333;
/*  position:relative; /* SUPPRIME */
/*  left: 290px;       /* SUPPRIME */
  /* AJOUT */
  float:left;
  background-color:#EED;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  $('#r-a_click').toggle(
    function () {
      $(this).parent().stop().animate({
        'marginLeft': '290px'
      }, 1000);
    },
    function () {
      $(this).parent().stop().animate({
        'marginLeft': '0px'
      }, 1000);
    });
});
</script>
</head>
<body>
<div id="recherche_main_bloc">
  <div id="zone_gauche">
    <div id="rechercher-rap" class="border-rad-total">DIV id="rechercher-rap"</div>
    <div id="rechercher-ava">
      <div id="r-a_cache">DIV id="r-a_cache"</div>
      <div id="r-a_click" class="border-rad-right"></div>
    </div>
  </div>
</div>
</body>
</html>

il y a quelques commentaires sur le CSS

**artenis** · 02/01/2013, 12h18

Je vais essayé tout cela, merci

jquery (ui ?) slide right

jQuery

Discussions similaires

Partager

Partager