Discussion :

[calitom]

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 :

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

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 :

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

Erreur*: setting a property that has only a getter

Pour la ligne suivante:

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

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

[calitom]

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

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

[calitom]

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 :

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