modification automatique de la taille et de la position de plusieurs div

Version imprimable

Bonjour,

Je cherche à faire un fond grisé autour d'un div(div_fenetre) contenu dans un div (div_conteneur).

Pour ca j'utilise 4 div (nord,est,ouest,sud) qui sont situés au nord,est,ouest et sud du div div_fenetre.

Code:

1
2
3
4
5
6
7
8
9
 
<div id="conteneur">
 <img src="image.jpg" id="img_fond">
 <div id="div_nord" style="position:absolute;"></div>
 <div id="div_est" style="position:absolute;"></div>
 <div id="div_fenetre" style="position:absolute;"></div> 
 <div id="div_ouest" style="position:absolute;"></div>
 <div id="div_sud" style="position:absolute;"></div>
</div>

En gros le div fenetre peut se déplacer et se redimensionner.
Donc il faut recalculer à chaque déplacement et chaque redimensionnement les tailles et positions des 4 div (nord,sud,est,ouest)...

Voici les fonction que j'ai fait pour recalculer:

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
 
function change_div_nord()
{
	var nouv_haut_nord=parseInt(document.getElementById('img_fond').style.height)-(parseInt(document.getElementById('div_sud').style.height)+parseInt(document.getElementById('div_fenetre').style.height));
	document.getElementById('div_nord').style.height=parseInt(nouv_haut_nord)+"px";
}
 
function change_div_est()
{
	var nouv_top_est=parseInt(document.getElementById('div_nord').style.height);
	document.getElementById('div_est').offsetTop=parseInt(nouv_top_est)+"px";
 
	var nouv_larg_est=parseInt(document.getElementById('div_nord').style.width)-(parseInt(document.getElementById('div_fenetre').style.width)+parseInt(document.getElementById('div_ouest').style.width));
	document.getElementById('div_est').style.width=parseInt(nouv_larg_est)+"px";
 
	var nouv_haut_est=parseInt(document.getElementById('div_fenetre').style.height);
	document.getElementById('div_est').style.height=parseInt(nouv_haut_est)+"px";
}
 
function change_div_ouest()
{
	var nouv_top_ouest=parseInt(document.getElementById('div_nord').style.height);
	document.getElementById('div_ouest').offsetTop=parseInt(nouv_top_ouest)+"px";
 
	var nouv_left_ouest=parseInt(document.getElementById('div_est').style.width)+parseInt(document.getElementById('div_fenetre').style.width);
	document.getElementById('div_ouest').offsetLeft=parseInt(nouv_left_ouest)+"px";
 
	var nouv_larg_ouest=parseInt(document.getElementById('div_nord').style.width)-(parseInt(document.getElementById('div_est').style.width)+parseInt(document.getElementById('div_fenetre').style.width));
	document.getElementById('div_ouest').style.width=parseInt(nouv_larg_ouest)+"px";
 
	var nouv_haut_ouest=parseInt(document.getElementById('div_fenetre').style.height);
	document.getElementById('div_ouest').style.height=parseInt(nouv_haut_ouest)+"px";
}
 
function change_div_sud()
{
	var nouv_top_sud=parseInt(document.getElementById('div_nord').style.height)+parseInt(document.getElementById('div_fenetre').style.height);
	document.getElementById('div_sud').offsetTop=parseInt(nouv_top_sud)+"px";
 
	var nouv_haut_sud=parseInt(document.getElementById('img_fond').style.height)-(parseInt(document.getElementById('div_nord').style.height)+parseInt(document.getElementById('div_fenetre').style.height));
	document.getElementById('div_sud').style.height=parseInt(nouv_haut_sud)+"px";
}

Le debugeur js de mozilla firefox me renvoit l'erreur suivante:

Citation:

Erreur*: setting a property that has only a getter

Pour la ligne suivante:

Citation:

var nouv_top_est=parseInt(document.getElementById('div_nord').style.height);
document.getElementById('div_est').offsetTop=parseInt(nouv_top_est)+"px";

Qu'est ce qui est en cause?

Si vous avez une meilleure idée pour le calcul des positions et des tailles je suis preneur...

24/03/2009, 12h23
RomainVALERI

Tu veux simuler un dialogue avec l'utilisateur, dans un div qui sert de boite de dialogue, tout en grisant le fond de la page, c'est ça ou j'ai mal compris ?
Parce que si c'est le cas ca m'a l'air de partir en usine à gaz un petit peu quand meme si tu me permets... ^^ (surtout : pourquoi 4 div en fond au lieu d'un seul en arrière-plan ? :?)
Il y a des solutions plus simples pour implémenter ce genre de choses...
Dis-moi si j'ai bien compris ou pas du tout. :aie:
24/03/2009, 13h01
calitom

C'est pour faire un truc sur le meme principe que ca:
http://www.defusion.org.uk/demos/060...bmit=Load+demo
24/03/2009, 13h50
RomainVALERI

OK au temps pour moi je n'avais pas bien saisi ton besoin ^^ oublie ma remarque...
(d'ailleurs en passant c'est bien réalisé cette fonctionnalité, c'est chouette :))

J'ai réussi à faire en sorte que ca marche lors du redimensionnement du div div_fenetre. Dans la boucle de la fonction de redimensionnement je fais appel aux fonctions: change_div_ouest() et change_div_sud() car le redimensionnement se fait par le coin inferieur droit...

Mais je n'arrive pas à modifier mes 4 div lors du déplacement du div fenetre...

Le div est draggable avec la fonction de scriptaculous...

Voici la déclaration de mon div draggable pouvez vous me dire si quelque chose cloche car je ne vois pas pourquoi ca ne marche pas...
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 var dragDim = $("div_fenetre").getDimensions(); mydrag = new Draggable("div_fenetre", {snap: function (x, y) { var xy = [x, y]; if(x < minLeft) { xy[0] = minLeft; } if(x + dragDim.width > maxLeft) { xy[0] = maxLeft - dragDim.width; } if(y < minTop) { xy[1] = minTop; } if(y + dragDim.height > maxTop) { xy[1] = maxTop - dragDim.height; } return xy; },change: function () { change_div_nord(); change_div_est(); change_div_ouest(); change_div_sud(); } });
Merci pour votre aide...