Discussion :

[elfamine]

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 :

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

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

Code :

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

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 :

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

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

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

[SpaceFrog]

Code :

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

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} );
	}

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

[SpaceFrog]

Code :

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

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

[elfamine]

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

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

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
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');
});

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

[elfamine]

Code :

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

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

[eckerdecker]

Bonjour,

Code :

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

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.

Code :

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

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 :

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

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 :

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

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

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