[JS] (redimensionnement d'éléments) lock de sélection

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] (redimensionnement d'éléments) lock de sélection

Agould

Bonjour tout le monde,

J'essaie de donner un comportement de frame à des composants html : je voudrais par exemple pouvoir redimensionner une DIV en saisissant sa bordure inférieure et en l'étirant.

Voici mon code pour le moment (je me doute qu'il est loin d'être parfait et c'est pour ça que je vous le soumets) :

HTML

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/scriptaculous.js"></script>
<script type="text/javascript" src="./xtd.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
#xtd_ctn_test1 {
display:block;
width: 500px;
height: 300px;
margin: 0 auto;
overflow: auto;
background: rgb(204,204,255);
}
#xtd_bar_test1 {
display: block;
width: 500px;
height: 5px;
margin: 0 auto;
background: grey;
cursor: s-resize;
}
#xtd_ctn_test2 {
display:block;
width: 500px;
height: 300px;
margin: 0 auto;
overflow: auto;
background: rgb(255,204,204);
}
#xtd_bar_test2 {
display: block;
width: 500px;
height: 5px;
margin: 0 auto;
background: grey;
cursor: s-resize;
}
</style>
</head>
<body>
<div id="ctr">
<div id="xtd_ctn_test1">
<p>
Quam ob rem circumspecta cautela observatum est deinceps et cum edita montium petere coeperint grassatores, loci iniquitati milites cedunt. ubi autem in planitie potuerint reperiri, quod contingit adsidue, nec exsertare lacertos nec crispare permissi tela, quae vehunt bina vel terna, pecudum ritu inertium trucidantur.
</p>
<p>
empore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.
</p>
<p>
Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
</p>
<p>
Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.
</p>
<p>
Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.
</p>
</div>
<div id="xtd_bar_test1">
</div>
</div>
<br /><br /><br /><br /><br />
<div id="xtd_ctn_test2">
<p>
Quam ob rem circumspecta cautela observatum est deinceps et cum edita montium petere coeperint grassatores, loci iniquitati milites cedunt. ubi autem in planitie potuerint reperiri, quod contingit adsidue, nec exsertare lacertos nec crispare permissi tela, quae vehunt bina vel terna, pecudum ritu inertium trucidantur.
</p>
<p>
empore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem.
</p>
<p>
Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
</p>
<p>
Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.
</p>
<p>
Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.
</p>
</div>
<div id="xtd_bar_test2">
</div>
</body>
</html>

JAVASCRIPT

Code :

// VARIABLES GLOBALES
var xtd_lastY = 0; // position (verticale) de la souris
var xtd_extendables = []; // objet sur lequel agir
var xtd_minHeight = 40; // hauteur minimum
var xtd_maxHeight; // hauteur maximum
xtd_maxHeight = document.viewport.getHeight() - 100;
// METHODES
function xtd_listenResize(e) { // lance d'écoute des mouvements de souris une fois l'objet sélectionné
if (!e) var e = window.event;
// récupère l'objet d'où vient l'évènement
var xtd_bar = Event.element(e);
// pointe sur l'objet à redimensionner
xtd_extendables.push('xtd_ctn_'+xtd_bar.id.substr(8,xtd_bar.id.length-8));
// récupère la position (verticale) de la souris
xtd_lastY = Event.pointerY(e);
xtd_bar.focus();
document.observe('mousemove', xtd_doResize);
document.observe('mouseup', xtd_endResize);
xtd_bar.observe('blur', xtd_endResize);
}
function xtd_doResize(e) { // redimensionne l'objet à chaque déplacement de souris
if (!e) var e = window.event;
// récupère l'objet à redimensionner
var xtd_main = xtd_extendables[0];
// calcul de la nouvelle taille de l'objet
var xtd_newHeight = $(xtd_main).getHeight() + Event.pointerY(e) - xtd_lastY;
if (xtd_newHeight < xtd_minHeight)
xtd_newHeight = xtd_minHeight;
if (xtd_newHeight > xtd_maxHeight)
xtd_newHeight = xtd_maxHeight;
// mise à jour de la position (verticale) de la souris
xtd_lastY = Event.pointerY(e);
// mise à jour de la taille de l'objet
$(xtd_main).style.height = xtd_newHeight+'px';
}
function xtd_endResize(e) { // arrête l'écoute des mouvements de souris
// réinitialise l'objet à dimensionner
xtd_extendables.pop();
document.stopObserving('mousemove', xtd_doResize);
document.stopObserving('mouseup', xtd_endResize);
}
function xtd_init() { // ajoute les écouteurs d'évènements aux barres d'extension
// parcours de l'ensemble des éléments du document
var allTags = document.getElementsByTagName('*');
for (var i=0; i<allTags.length; i++) {
var xtd_extend = new RegExp('^xtd_bar_[a-zA-Z0-9_-]+', 'g');
// sélection des éléments respectant la nomenclature de redimensionnement
if ( xtd_extend.test(allTags[i].id) ) {
$(allTags[i].id).observe('mousedown', xtd_listenResize);
}
}
}
// LANCEMENT DU SCRIPT AU CHARGEMENT DU DOCUMENT
document.observe('dom:loaded', xtd_init);

Le mécanisme me semble un peu lourd (parcours de l'ensemble des éléments du document + obligation d'ajouter une div simulant la bordure) et lorsque j'utilise le script dans un vrai contexte, les comportements sont abhérents (élément qui s'étire à la place d'un autre, élément qui s'étire sans suivre la souris, etc.).

Pourriez-vous me donner quelques petits conseils ?

Merci

Message édité par Agould le 20-03-2008 à 09:44:45

Publicité

Agould

Les comportements hasardeux du script se limitent à priori à un mauvais calcul de la nouvelle taille de l'élément à redimensionner.

Code :

var xtd_newHeight = $(xtd_main).getHeight() + Event.pointerY(e) - xtd_lastY;

La valeur de xtd_newHeight augmente quelque soit les valeurs de Event.pointerY(e) et xtd_lastY... ayant assez peu d'expérience en javascript, je n'arrive pas pour le moment à déceler la cause du problème.

Affaire à suivre...

Agould

Epilogue de cette aventure passionnante :

Tout se passait bien dans le javascript (qui est toujours aussi lourdingue mais fonctionne).
-> le problème venait du fait que les padding et border n'étaient pas gérés -_-

Toujours est-il que si une solution plus élégante existe, je suis ouvert à toute suggestion.

Merci :jap:

Agould

Bonjour, c'est encore moi (décidément pour peu de choses on rencontre bien des problèmes).

Maintenant que mon script fonctionne tant bien que mal, j'aimerai empêcher la sélection de texte lors du redimensionnement. (Cette pratique n'est à priori pas trop intrusive puisque les gens qui bloque le javascript ne pourront pas redimensionner l'élément et la problématique ne se posera donc pas.)

Les peu de pistes que j'ai trouvées sont :

bloque tout le temps la sélection

Code :

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: James Nisbet (morBandit) :: http://www.bandit.co.nz/ */
window.onload = function() {
document.onselectstart = function() {return false;} // ie
document.onmousedown = function() {return false;} // mozilla
}
/* You can attach the events to any element. In the following example
I'll disable selecting text in an element with the id 'content'. */
window.onload = function() {
var element = document.getElementById('content');
element.onselectstart = function () { return false; } // ie
element.onmousedown = function () { return false; } // mozilla
}

J'étais aussi tombé sur une solution spécifique à Mozilla que je ne parviens pas à retrouver.

Quoiqu'il en soit, existe-t-il une solution cross browser pour ce comportement ?

Merci

FORUM HardWare.fr

Programmation

HTML/CSS

[JS] (redimensionnement d'éléments) lock de sélection

Sujets relatifs
Positionement elements	[Résolu][HTML/CSS] Selecteur d'elements pere-fils + table
[RESOLU] [newbie]Netbeans-"throws IOException" dans elements d'une GUI	[PHP + Apache] Protéger le listage d'un dossier mais pas les élements
Publipostage WORD, automatisation et sélection	Dans un formulaire, peut on changer la couleur de la selection?
Redimensionnement étrange sous IE7	Redimensionnement de combo
z-index et les éléments style input, liens ,etc	problème de selection de date dans ma requête oracle
Plus de sujets relatifs à : [JS] (redimensionnement d'éléments) lock de sélection

Page générée en 0.134 secondes