Animation et ID

**tania** · 22/01/2012, 15h08

Bonjour à vous,
Le résultat du code Jquery suivant, n'est pas celui que j'attends..
Et je ne sais comment arranger celà..

voici le html au depart :

Code html :

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

1
2
3
4
5
	    	<div id="block1">1</div>
	    	<div id="block2">2</div>
	    	<div id="block3" class="a_supprimer">3</div>
	    	<div id="block4">4</div>
	    	<div id="block5">5</div>

sur lequel, je fais une animation, tout les blocks qui sont après le 3eme se decalent vers la gauche.

Code :

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

1
2
3
4
5
6
7
8
9
10
	      $( "div:last" ).animate(
		     {       
			     right: 10  }, 
	         {    
		     duration: 1000, 	       
		     step: function( now, fx ){     
	          $( "div:gt(2)" ).css( "right", now );    
	          }  });
 
		});

je vois donc 4 blocks, le block4 donc se retrouve au dessus du block3 (qui n'est donc pas visible), le block5 est affiché à la suite des 3 premiers.

de là, je voudrais revoir le html afin de pouvoir conserver un identifiant unique pour chaque block allant de 1 à 5.

donc, j'ai modifié le libellé de l'identifiant des deux derniers :

Code :

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

1
2
3
4
5
6
		  $( "div:gt(2)" ).each(function() {
		  	   id = $(this).attr('id');
	      	   slot = id.charAt(id.length-1);
	      	   newid = parseInt(slot)-1;
	      	   $(this).attr('id', id.substr(0, id.length-1)+newid);
		  });

ce qui donne :

Code html :

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

1
2
3
4
5
	    	<div id="block1">1</div>
	    	<div id="block2">2</div>
	    	<div id="block3" class="">3</div>
	    	<div id="block3">4</div>
	    	<div id="block4">5</div>

puis je voudrais supprimer le block qui est maintenant caché

Code :

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

$( ".a_supprimer" ).remove();

et finalement ajouter un nouveau block.

Code :

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

1
2
	block = '<div id="block5">6</div>';
	$('div:last').after(block);

ce qui finalement devrait me donner :

Code html :

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

1
2
3
4
5
	    	<div id="block1">1</div>
	    	<div id="block2">2</div>
	    	<div id="block3">4</div>
	    	<div id="block4">5</div>
	    	<div id="block5">6</div>

toutefois, impossible d'obtenir celà, car à l'appel de remove(),
le block3 et le block4 se chevauche. il n'y a donc plus que 3 blocks visibles...

**danielhagnoul** · 22/01/2012, 18h07

Bonsoir

Un ID doit être unique !

Modifier dynamiquement les ID d'une page web !

Envoyé par tania

[...] de là, je voudrais revoir le html afin de pouvoir conserver un identifiant unique pour chaque block allant de 1 à 5.

donc, j'ai modifié le libellé de l'identifiant des deux derniers : [...] ce qui donne :

Code :

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

1
2
3
4
5
<div id="block1">1</div>
<div id="block2">2</div>
<div id="block3" class="">3</div>
<div id="block3">4</div>
<div id="block4">5</div>

**tania** · 22/01/2012, 18h55

Code :

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

1
2
3
4
5
<div block="block1">1</div>
<div block="block2">2</div>
<div block="block3" class="">3</div>
<div block="block3">4</div>
<div block="block4">5</div>

Arf..
j'ai remplacé l'id, par l'attribut block, toutefois le problème reste identique...

**danielhagnoul** · 22/01/2012, 23h19

Bonsoir

Je ne suis pas certain d'avoir bien compris vos souhaits, mais voilà mon code et ma page de test.

Pourt les attributs data-x voir : http://api.jquery.com/data/

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />	
	<style>
		/* Base */
		html { font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0; padding:0; }
		body { background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td { word-wrap:break-word; }
		pre, code { white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select { max-width:100%; }
        img { border:none; }
		h1 { font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p { padding:0.6rem; }
		ul { margin-left:2.4rem; }
		.conteneur { width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer { margin-left:3.6rem; }
 
		/* --- */
		div[data-block] { position:relative; width:10rem; height:10rem; margin:0.6rem; margin-left:3.6rem; padding:0.6rem; border:0.1rem dotted grey; }
		.a_supprimer { color:red; display:none; }
</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<div data-block="1">1</div>
<div data-block="2">2</div>
<div data-block="3" class="a_supprimer">3</div>
<div data-block="4">4</div>
<div data-block="5">5</div>
 
<div>Un mot pour remplir</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-22T23:16:09.000+01:00" pubdate>2012-01-22</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* Test */
 
$( "div[data-block]:gt(2)" ).animate({ "right": "10px" }, 1000 );
 
$( "div[data-block]:gt(2)" ).each(function( i, item ) {
	var n = parseInt( $( item ).data( "block" ), 10 ) - 1;
 
	$( item ).attr( "data-block", n );
});
 
// $( "div[data-block='3']:first" ).remove();
// ou
$( "div.a_supprimer" ).remove();
 
$( "div[data-block]:last" ).after( '<div data-block="5">6</div>' );
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){			
		});
	</script>
</body>  
</html>

**Golgotha** · 23/01/2012, 11h21

Voici ma proposition, je ne suis pas sûr d'avoir bien compris non plus votre problème mais mon exemple est le suivant :

La page affiche 6 bloques en permanence, au clique sur l'un des bloque, le bloque en question est supprimé avec une animation, puis un bloque est ajouté à la fin avec un nouvel ID.

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
<!DOCTYPE html>
<html>
<head>
  <style>
div {
   position: relative;
   background-color: #abc;
   width: 40px;
   height: 40px;
   float: left;
   margin: 5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div id ="1" class="block">1</div> 
<div id ="2" class="block">2</div>
<div id ="3" class="block">3</div> 
<div id ="4" class="block">4</div>
<div id ="5" class="block">5</div> 
<div id ="6" class="block">6</div>
 
<script>
$(".block").live({
  click : function() {
  nb = this.id -1;
  div_id = this.id;
  max_id = eval($(".block").last().attr('id'));
  var div;
  $("#"+div_id).animate({
    width: 0
  }, {
    duration: 1000,
    step: function( now, fx ){
	  $("#"+div_id).css( "width", now );
    }, complete: function() {
	  $("#"+div_id).remove();
	  $(".block").last().after($(".block").last().clone());
	  $(".block").last().attr("id", max_id + 1);
	  $(".block").last().html( max_id + 1 );
    }
});
 
}});
 
</script>
 
</body>
</html>

En espérant que cela pourra vous inspirer.

**tania** · 23/01/2012, 16h13

Bonjour et merci Golgotha

, c'est tout à fait ce que je cherchais à faire.
Je l'ai quelques peu modifier pour toujours garder une numérotation allant de 1 à 5 :

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
 
$(".block").live({
      click : function() {
 
      valeur = Math.round(Math.random()*10)
 
      $(this).animate({
          width: 0
      }, {
          duration: 1000,
          step: function( now, fx ){
      	   $(this).css( "width", now );
          }, 
          complete: function() {
        	  $(this).remove();
 
            $(".block").last().after($(".block").last().clone());
            $(".block").last().attr("num", 5);
            $(".block").last().text( valeur );
 
            $(".block").each(function(index) {
                $(this).attr('num', index+1);
            });
 
 
        }
});
 
}});

Animation et ID

jQuery

Vue hybride

Discussions similaires

Partager

Partager