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

Version imprimable

15/07/2010, 17h34
kilhom

UI Position. Images avec attribut "case" sur division avec attribut "id_case"
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:

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 ! ;)
15/07/2010, 22h50
danielhagnoul

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.
15/07/2010, 23h13
kilhom
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:

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:

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 ?

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

16/07/2010, 00h17
kilhom

Merci beaucoup, ça marche !
Une petite idée pour ma deuxième question ? :)

Edit : trouvé !
Un simple :

Code:

$(window).resize(function() {})

Et le tour est joué :)
16/07/2010, 00h38
danielhagnoul

Citation:

Envoyé par kilhom

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

Avec mon exemple je ne vois pas de problème. Je pense que cela dépend du CSS de votre page web.