UI Position. Images avec attribut "case" sur division avec attribut "id_case"

**kilhom** · 15/07/2010, 17h34

Bonjour à tous !
Voici mon problème :
J'aimerais faire en sorte que chaque images ayant l'attribut "case" soit positioné sur le div possédant l'attribut id_case correspondant.

Voici mon code :

Code :

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

1
2
3
4
5
6
	$('[case]').position({
		of: $('[id_case=' + $('[case]').attr("case") + ']'),
		my: 'center bottom',
		at: 'center bottom',
		collision: 'none none'
	});

Le hic : Les images vont toutes sur le même div... comment faire pour qu'elles aillent chacune sur leur div respectif ?

Deuxième petit soucis : Quand je resize la fenêtre, tout est chamboulé, est-ce que quelqu'un aurait une astuce pour ça ?

Merci d'avance !

**danielhagnoul** · 15/07/2010, 22h50

Bonsoir.

UI Position" est nouveau pour moi. J'aimerais examiner votre problème, mais j'aurais besoin d'un code (HTML, CSS, JS) plus complet pour mieux le comprendre.

**kilhom** · 15/07/2010, 23h13

Bonjour, tout d'abord merci de votre réponse et de votre petit modification faite sur mon titre

Ensuite pour ce qui est du code html c'est tout simple :

Code :

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

1
2
3
4
5
<div id_case="1"></div>
<div id_case="2"></div>
<div id_case="3"></div>
<div id_case="4"></div>
<div id_case="5"></div>

etc, et en dessous :

Code :

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

1
2
<img src="A.png" case="3">
<img src="B.png" case="5">

Je voudrais faire en sorte que l'image A.png, aille se positionner sur le div avec l'attribut id_case correspondant, c'est à dire 3.

Pour le moment ça marche mais le problème est que l'image B vient elle aussi se positionner sur la case 3 et non la case 5....

Une idée ?

**danielhagnoul** · 15/07/2010, 23h38

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.2.custom.css">	
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: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%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
		*/
 
		/* TEST */
		div.caseClass {
			position:relative;
			width:200px;
			height:200px;
			margin:12px;
			background-color:lightGreen;
			border:1px solid grey;
		}
		img.caseClass {
			width:100px;
			height:100px;
			border:1px solid gray;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.2.custom.min.js"></script>
 	<script>
		$(function(){
			$('[case]').each(function(i, item){
				$(item).position({
					of: $('[id_case=' + $(item).attr("case") + ']'),
					my: 'center bottom',
					at: 'center bottom',
					collision: 'none none'
				});
			});
		});
	</script>
</head>
<body>
	<div class="caseClass" id_case="1">&nbsp;</div>
	<div class="caseClass" id_case="2">&nbsp;</div>
	<div class="caseClass" id_case="3">&nbsp;</div>
	<div class="caseClass" id_case="4">&nbsp;</div>
	<div class="caseClass" id_case="5">&nbsp;</div>
	<img class="caseClass" src="../images/imageTest.png" case="3">
	<img class="caseClass" src="../images/avatarDVJH.jpg" case="5">
</body>  
</html>