jquery (ui ?) slide right

Version imprimable

14/12/2012, 00h05
artenis

jquery (ui ?) slide right

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

J'ai essayé ceci :
Code:

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 ?

Bonsoir

Un exemple :

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

15/12/2012, 11h08
artenis
Merci Danielhagnoul,

mais je ne comprends pas cette partie là :
Code:

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.
15/12/2012, 22h43
danielhagnoul

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.
16/12/2012, 11h36
artenis

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.
16/12/2012, 11h59
NoSmoking

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

voici le code html :

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

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

16/12/2012, 18h03
NoSmoking

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)

Encore une chose pendant que l'on y est

Code:

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 ?

Bonjour Nosmoking,

voici le css :
Code:

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

Toutes mes excuses j'étais persuadé avoir répondu :oops:
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:

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

02/01/2013, 12h18
artenis

Je vais essayé tout cela, merci