Recupérer les dimensions

Version imprimable

Bonjour,

J'essaye d’écrire une fonction qui me permet de récupérer les dimensions d'une balise object (comme dans l'exemple plus bas) et de les attribuer à sa balise parent div

supposant
Code:

1 2 3 4 <div class="container"> <object width="x" height="y"></object> </div>
Code:

1 2 3 4 5 6 7 8 9 function SetDim(theContainer){ var objWidth=$(theContainer).children().width(); var objHeight=$(theContainer).children().height(); $(theContainer).css( 'width',objWidth ); $(theContainer).css( 'height',objHeight ); } ...SetDim(".container");
ca fonctionne sauf que quand j'ai
Code:

1 2 3 4 5 6 7 <div class="container"> <object width="x1" height="y1"></object> </div> <div class="container"> <object width="x2" height="y2"></object> </div>
le 1er div prend x1 et y1 comme dimension
le 2eme div prend aussi x1 et y1 au lieu de x2 y2

J’espère avoir bien expliqué mon problème et que vous avez une solution ou une approche à me proposer :D

edit : ca ne change absolument rien au problème object ou objet

Code:

1
2
3
4
5
6
 
function SetDim(theContainer){
	var objWidth=$(theContainer).find('object:eq(0)').width();
	var objHeight=$(theContainer).find('object:eq(0)').height();
	$(theContainer).css( {'width':objWidth, 'height':objHeight} );
	}

13/04/2012, 13h29
elfamine

Merci d'avoir pris le temps de répondre mais malheureusement ca ne règle toujours pas le problème (oui meme apres avoir vidé le cach :B)

Peut etre que le problème vient du SetDim(".container"); je l'ai mis dans un $(document).ready(function() {});

J'ai l'impression que le SetDim ne s’exécute que pour le 1er div et s'applique sur les suivants de la meme facon...

Code:

1
2
3
4
5
6
7
8
9
 
$(function(){
 
	$('.container').each( function(){
			var objHeight=$(this).find('object:eq(0)').attr('height');
			var objWidth=$('.container').find('object:eq(0)').attr('width');
			$(this).css({'height':objHeight+'px','width':objWidth+'px', 'border': 'solid 2px red'})
			})
})

A noter que c'est object et non objet ...

1 pièce(s) jointe(s)

Je pense qu'avec un exemple ca va etre plus clair (voir pièce jointe)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="mainframe">
	<div id="frame1">
		<div class="container">
			<p class="obj">200x200</p>
		</div>
	</div>
</div>
	<br>
<div class="mainframe">
 
	<div id="frame2">
		<div class="container">
			<p class="obj">100x100</p>
		</div>
	</div>
</div>

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
function SetDim(theContainer){
	var objWidth=$(theContainer).children().width();
	var objHeight=$(theContainer).children().height();
	$(theContainer).css( 'width',objWidth ); 
	$(theContainer).css( 'height',objHeight );
	}
function CenterItem(theItem){
    var winWidth=$('.mainframe').width();
    var winHeight=$('.mainframe').height();
    var windowCenter=winWidth/2;
    var itemCenter=$(theItem).width()/2;
    var theCenter=windowCenter-itemCenter;
    var windowMiddle=winHeight/2;
    var itemMiddle=$(theItem).height()/2;
    var theMiddle=windowMiddle-itemMiddle;
    if(winWidth>$(theItem).width()){ //horizontal
        $(theItem).css('left',theCenter);
    } else {
        $(theItem).css('left','0');
    }
    if(winHeight>$(theItem).height()){ //vertical
        $(theItem).css('top',theMiddle);
    } else {
        $(theItem).css('top','0');
    }
}
$(document).ready(function() {
	SetDim('.container');
    CenterItem('.container');
});
$(window).resize(function() {
	SetDim('.container');
    CenterItem('.container');
});

http://i.imgur.com/iWCgZ.png

Ca bloque au niveau du 2eme élément celui en 100x100 son div prend toujours les dimension 200x200

Code:

1 2 3 4 5 6 $(document).ready(function() { SetDim('#frame1 .container'); SetDim('#frame2 .container'); CenterItem('#frame1 .container'); CenterItem('#frame2 .container'); });
par contre ceci semble résoudre le problème...mais bon je me demande s'il y a pas de solution plus clean...

Bonjour,
Citation:
Code:

1 2 3 4 5 6 7 $(function(){ $('.container').each( function(){ var objHeight=$(this).find('object:eq(0)').attr('height'); var objWidth=$('.container').find('object:eq(0)').attr('width'); $(this).css({'height':objHeight+'px','width':objWidth+'px', 'border': 'solid 2px red'}); }); });
Ce que te montre SpaceFrog avec ce code c'est que tu dois adresser chacun de tes .container individuellement si tu veux qu'ils aient chacun leur propre comportement.
Citation:
Code:

1 2 3 4 5 6 $(document).ready(function() { SetDim('#frame1 .container'); SetDim('#frame2 .container'); CenterItem('#frame1 .container'); CenterItem('#frame2 .container'); });
C'est d'ailleurs ce que tu fais ici mais sans l'optimisation.

Explications :
Si on regarde la documentation de .width() ou .height() on peut lire : "Get the current computed width (height) for the first element in the set of matched elements."

Quand tu appelles ta fonction SetDim en lui passant en paramètre ".container" que se passes-t-il ?
- $('.container') te retourne un tableau de tous les éléments de class container
- .children() te retourne tous les fils de tous tes éléments de class container
- .width() et .height() te retournent la largeur et la hauteur du premier de tous ces éléments

Et ensuite tu appliques ces deux valeurs à tous tes éléments de class container => ton problème en somme !

Solution :
Première étape, comme te l'a suggéré SpaceFrog : utilises .find('object:first') ou .find('object:eq(0)') au lieu de .children(), au cas ou ton html devait évoluer tu seras certain de cibler exactement ce que tu veux.
Deuxième étape adapter le code suggéré par SpaceFrog à ta méthode, en somme :
Code:

1 2 3 4 5 6 7 8 function SetDim(theContainer){ $(theContainer).each(function(){ var objWidth=$(this).find('object:first').width(); var objHeight=$(this).find('object:first').height(); $(this).css( 'width',objWidth ); $(this).css( 'height',objHeight ); }); }
Et puisque j'ai déjà tant blablaté, la version "optimisée" :)
Code:

1 2 3 4 5 6 function SetDim(theContainer){ $(theContainer).each(function(){ var obj = $(this).find('object:first'); $(this).css({'width':obj.width(), 'height':obj.height()}); }); }
Note : je pense que tu as le même souci sur ta fonction CenterItem()

14/04/2012, 13h19
elfamine

Merci pour les explications. Ca semble logique sauf que ne marche pas de mon coté. Pour l'instant je pense laissé le code non optimisé puisqu'il marche et lire la docu à tete reposé quand j'aurais plus de temps. Je marque le sujet comme réglé en vous remerciant encore une fois pour vos réponses.:ccool: