Redimensionner une fenêtre donne toujours un peu effet user-frendly sympa pour un site web.
Nous allons voir pas à pas comment l’intégrer à vos pages (avec une petite aide de script.aculo.us).

Mise en place des divs

Cette étape c’est la plus simple.

Dans le head, il faut juste charger les librairies script.aculo.us.

<script src="./lib/prototype.js" type="text/javascript"></script>
<script src="./src/effects.js" type="text/javascript"></script>
<script src="./src/dragdrop.js" type="text/javascript"></script>

On va ajouter nos fonctions sympa pour l’effet drag and drop.

<script language="javascript" type="text/javascript">

	function cache ( id ) {
		id.style.border = '1px dashed #000000';
	}

	function affiche ( id ) {
		id.style.border = '1px solid #000000';
	}
</script>

Là on prépare notre CSS :

<style type="text/css">
	#boiteDimToMove {
		border: 1px solid #000000;
		width: 120px;
		height: 120px;
		float: left;
		background:#FF00FF;
	}

	#boiteDim {
		border: 1px solid #000000;
		width: 10px;
		height: 10px;
		margin-left: 109px;
		margin-top: 109px;
		float: left;
		background:#FF0000;
	}
</style>

Maintenant on créer nos divs (dans le body)

<div id="boiteDimToMove" onmouseup="affiche(this)" onmousedown="cache(this)">
	<div id="boiteDim" onmouseup="affiche(this)" onmousedown="cache(this)" >
	</div>
</div>

Et on affecte à nos div la fonction draggable (sinon sans ça, nous pourrions pas déplacer nos divs).

<script type="text/javascript">
	new Draggable('boiteDim');
	new Draggable('boiteDimToMove');
</script>

Voila ce que ça va donner au final : sur ce lien

Bon tout est prêt, on va pouvoir s’attaquer au plu dur :p

---

Agrandir une fenêtre

Dans cette exemple c’est la petite div rouge qui va définir la taille de la plus grosse.

Mais comment on va procéder roul ?

C’est pas compliqué, quand l’utilisateur va déplacer la div rouge, au moment de relâcher le bouton de la souris, le javascript va récupérer la position de la souris et va élargir la fenêtre (le div rose) jusqu’à cette position.

En traduction html ce la va donné :

	<div id="boiteDimToMove" onmouseup="affiche(this)" onmousedown="cache(this)">
		<div id="boiteDim" onmouseup="UpdateDiv(event,this)" onmousedown="cache(this)" >
		</div>
	</div>

---

envent : c’est les évènements utilisateur comme des clics de souris ou des entrées clavier.
Nous, ce qui va nous intéresser, c’est la position du curseur.

function UpdateDiv(e,boiteDim){
    var iPosY = e.pageY; // position ordonnée du curseur
    var iPosX = e.pageX;  // position abscisse du curseur
    alert('iPosY : '+iPosY+"\n"+'iPosX : '+iPosX)
    affiche(boiteDim);
}

Voila ce que cela doit afficher :

Le code source est ici

---

dimessionner notre div

Pour modifier la taille de la fenêtre, on va toucher au style.
pour récupérer le style en javascript il faut utiliser :
document.getElementById(ID).style

Après pour définir les attributs, il faut tout simplement utiliser le .
document.getElementById(‘boite’).style.width correspond à la propriété width du style du div boite

Voila ce que la va donner :

function UpdateDiv(e,boiteDim){
    var iPosY = e.pageY; // position ordonnée du curseur
    var iPosX = e.pageX;  // position abscisse du curseur
    var oStyleToMove = document.getElementById(boiteDim.id+'ToMove').style;
    // oStyleToMove le style de la div boiteDimToMove

    oStyleToMove.width = iPosX; // on élargi la div
    oStyleToMove.height = iPosY; // on allonge la div
    cache(boiteDim);
}

Le code source est ici

---

Ça fonctionne seulement si on bouge pas la fenêtre (div rose) !

Oui en effet ce script ne prend pas en compte de l’emplacement de la fenêtre, pour son redimensionnement.
Nous allons corriger cela. Pour connaitre la dimension de la fenêtre nous allons soustraire la position de la fenêtre à celle du curseur. (pas besoin d’être fort en math ^^)

Pour récupérer la position de la fenêtre nous allons concentrer sur son style (plus précisément à la propriété top et left).
oStyleToMove.top
oStyleToMove.left

on va afficher ces variables :

alert('Y : '+oStyleToMove.top+"\n X : "+oStyleToMove.left);

---

On voit que le nombre est du type XXpx. On ne peut pas faire de calcul avec ce type de chaine.
On va donc supprimer ces px avec l’aide d’une expression régulière.

    // on enlève le px au coordonnée de la fenêtre
    var oExp =new RegExp("px", "g");
    var sTop = oStyleToMove.top.replace(oExp,'');
    var sLeft = oStyleToMove.left.replace(oExp,'');

On a plus qu’à faire la soustraction :

    var iPosY = e.pageY - sTop; // position ordonnée de la fenêtre
    var iPosX = e.pageX - sLeft;  // position abscisse de la fenêtre

Le code source :
c’est là

---

Et voila, maintenant nos utilisateurs peuvent redimensionner leur fenêtre en quelque clics

Pour aller plus loin

Je me suis aperçus que le petit cadre rouge n’est pas exactement coller en bas à droite.

Pour réajuster le tir, on va mettre à zero le style left et top (qui est utilisé par script.aculo.us.)

voici la correction :

 var oStyle = boiteDim.style;
    oStyle.marginLeft=iPosX- boiteDim.offsetHeight;
    oStyle.marginTop=iPosY- boiteDim.offsetWidth;
    oStyle.left=0;
    oStyle.top=0

Ce qui va donner au final ce code.

---

Compatibilité avec Internet Explorer

Internet Explorer nous facile vraiment pas le vie. nous allons voir comment rendre ce script compatible avec
IE.

Pour récupérer la position du curseur cela change :

var Xposition = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.clientX ;
var Yposition = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.clientY ;

et pour la position de la petite div

  if (navigator.appName.substring(0,3) == "Net")
    {
    	oStyle.marginLeft=iPosX - boiteDim.offsetHeight;
    }else
    {
    	oStyle.marginLeft=iPosX;
    }
 

Voila la version final compatible Internet Explorer

1. Fred Says:
   mars 27th, 2009 at 15 h 03 min

   Bonjour,
   Je viens de tester ce tuto.
   C’est génial, c’est exactement ce que je recherchais.
   Une question tout de même.
   Je souhaite enregistrer les coordonnées des divs après chaque modification.
   Peux-tu me confirmer que je dois enregistrer les paramètres suivants :
   - iPosY
   - iPosX
   - oStyle.marginLeft
   - oStyle.marginTop
   Ce qui me permettra de retrouver les divs en place tel que le souhaite un visiteur.
   Merci.
   Fred.

2. Fred Says:
   mars 27th, 2009 at 15 h 53 min

   Je pense avoir trouvé.
   Pour les coordonnées je dois prendre ceci :
   sTop –> margin-top
   sLeft –> margin-left
   iPosY –> height
   iPosX –> width
   Merci pour ce tuto vraiment génial.
   Fred.

3. roul Says:
   mars 28th, 2009 at 15 h 25 min

   Salut,

   Oui, c’est bien ses coordonnées qu’il faut conserver
   Bon courage, pour ton dev.

   Roul

Name (required)

Mail (will not be published) (required)

Website