Pour utiliser ce script vous devez inclure dans vos page le fichiers redim.js que vous trouverez en téléchargement plus bas.
Pour l'inclure, ajouter cette ligne dans le fichier html au niveau du <head> :

<script type="text/javascript" src="votre_dossier/redim.js"></script>



Les blocs doivent être en position: absolute :

<div style="position: absolute;"><div>


ou

.mon_div{
position: absolute;
}



Pour initialiser vos blocs ajouter ce bout de code en fin de page html :

<script type="text/javascript">
// <![CDATA[
//positionnement des divs
positionne('id_de_votrebloc_1', '10px', '100px'); // 10 et 100 correspondent à la position X et Y de votre bloc 1
positionne('id_de_votrebloc_2', '200px', '100px'); // 200 et 100 correspondent à la position X et Y de votre bloc 2
positionne('id_de_votrebloc_3', '400px', '100px'); // 400 et 100 correspondent à la position X et Y de votre bloc 3
isClicked = false;
// ]]>
</script>



Maintenant, dans le fichier redim.js vous pouvez modifier quelques valeurs :
  • minWidth : qui correspond à la valeur minimale que peut prendre le bloc en largeur (en pixel) ;
  • minHeight : qui correspond à la valeur minimale que peut prendre le bloc en hauteur (en pixel) ;
  • thePadding : qui correspond à la valeur en pixel à partir de laquelle le redimensionnement est possible à partir des bords du bloc ;


Voici un petit exemple.
L'exemple contenant les fichiers (notamment redim.js) au format ZIP.