DONNER EN INTERACTIF DE NOUVELLES DIMENSIONS AUX ELÉMENTS [ DINDE ]
ralecul
Messages postés
111
Date d'inscription
dimanche 23 mars 2003
Statut
Membre
Dernière intervention
1 août 2008
-
1 sept. 2007 à 19:25
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 18 sept. 2007 à 10:21
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 18 sept. 2007 à 10:21
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/43942-donner-en-interactif-de-nouvelles-dimensions-aux-elements-dinde
https://codes-sources.commentcamarche.net/source/43942-donner-en-interactif-de-nouvelles-dimensions-aux-elements-dinde
18 sept. 2007 à 10:21
qu'avec DINDE on utilise : new DINDE(élément)
je dirais que c'est bien moins lourd et plus simple que
Event.observe(element, eventName, handler[, useCapture = false])
@+
18 sept. 2007 à 09:51
un "générateur d'applications" quelconque ?
( je ne vais pas en citer, ils sont légions )
ce sera encore beaucoup plus simple.
@+
18 sept. 2007 à 09:32
et si tu utilises l'excellent Prototype, tu fais :
Event.observe(element, eventName, handler[, useCapture = false])
@see : http://www.prototypejs.org/api/event/observe
Ce qui est beaucoup plus portable et moins contraignant que de faire le test soi meme
:)
5 sept. 2007 à 18:39
Il reste encore deux petits "bug" :
->Le test avec la variable IE est une mauvaise idée.
Il vaut mieux faire :
if (quoi.addEventListener)
//code pour les navigateurs respectant w3c
else if (quoi.attachEvent)
//code pour IE
Ainsi si IE se décide un jour à implémenter les méthodes DOM-2 et plus ses méthodes propriétaires le script fonctionnera encore sous IE.
(à appliquer également pour les autres trucs propriétaires event, + position souris, pour les solutions voir le code de ma version)
->Bug du dimensionnement un peu rapide :
Il faut récupérer width et height lors du click (appel à la fonction Appui)
Et ensuite dans la fonction Taille il faut remplacer :
element.style.width= parseInt(element.style.width) +hor-x; // nouvelle largeur
element.style.height=parseInt(element.style.height)+ver-y
par
element.style.width = parseInt(width) + hor - x; // nouvelle largeur
element.style.height = parseInt(height) + ver - y
avec width et height des variables menbres de DINDE mises à jour lors de l'appel à Appui (là encore, solution dans le code de ma version).
Ralecul
4 sept. 2007 à 05:04
tu tentais de me dire :
si, sur les évènements des éléments gérés par ce script,
des function existent déjà, celui-ci va les écraser.
et... tu as raison.
que pour traiter ça "normalement", il faudrait utiliser
attachEvent et/ou addEventListener
et oui.
je vais d'ailleurs faire des modifs dans ce sens
dès que possible.
@+
3 sept. 2007 à 12:40
avec ce que tu appelles DOM-1 aussi.
-> Un peu court comme réponse, non ?
Je te conseille de jetter un coup d'oeil à cet article sur la gestion des evenements :
http://css.alsacreations.com/Tutoriels-JavaScript/La-gestion-des-evenements-en-JavaScript
Et si tu fais un essai :
objet.onmousedown = function1;
objet.onmousedown = function2;
Tu verras que seule function2 est éxécutée !
Bien sur on peut faire :
objet.onmousedown = function(e) { function1(e); function2(e); }
Mais ce cas de figure n'est possible que si tu "controles" les deux scripts.
Si tu utilises sur la même page un script de correction de :hover de IE6 et ton script de redimensionnement il peut y avoir un problème.
En effet, si tu appliques ces deux scripts sur le même élément alors (en DOM-0) seul le dernier appliqué sera pris en compte.
J'espère avoir été plus clair sur la différence entre le DOM level 0 et DOM level 2.
Pour ce qui est des balises font, je vais te proposer une solution (plus constructif comme remarque) :
Donner en
Interactif de
Nouvelles
Dimensions aux
Elements
Reste plus qu'à faire un joli css avec ça !
@+ Ralecul
3 sept. 2007 à 05:07
avec ce que tu appelles DOM-1 aussi.
>>j'aurais ajouté la fonction $()
normalement j'use aussi d'un racourci , mais ici le but n'était
pas celui là. ça aurait "compliqué" inutilement. à mon avis.
>>comment on peut utiliser des css et en même temps des
>>balises font et center, c'est d'un autre temps tout ça
je suis d'un autre temps, je ne m'intéresse guère à
ce genre de subtilité, aucun inconvénient, alors...
2 sept. 2007 à 23:05
Dans la fonction resize(e) :
if (!e)
e = window.event;
->ces deux lignes sont inutiles !
Sinon pour ce qui est la gestion des evenements il y a une grosse différence entre :
1. ???.onmousedown=function(...) { ... }
2. ???.addEventListener("evenement", fonction, false);
La méthode 1 est DOM-0 alors que la 2 est DOM-2.
En DOM-2 on peut (entre autre) mettre deux fonctions sur un même evenement :
objet.addEventListener("mousedown", function1, false);
objet.addEventListener("mousedown", function2, false);
Alors qu'en DOM-0 seule la dernière fonction est appliquée (écrasement)
On peut donc améliorer la fonction attachEvent() de ma classe en remplacant :
if (window.attachEvent)
{
_elt.onmousedown = press;
_elt.onmousemove = resize;
_elt.onmouseup = release;
_elt.onmouseout = release;
}
par :
if (_elt.attachEvent)
{
_elt.attachEvent("onmousedown", press);
_elt.attachEvent("onmousemove", resize);
_elt.attachEvent("onmouseup", release);
_elt.attachEvent("onmouseout", release);
}
Pour l'appel : (document.getElementById('d1')) à la place de appel('d1')
Je suis tout à fait d'accord, c'est juste que si j'avais posté la source à ta place j'aurais ajouté la fonction $().
Ainsi l'appel au constructeur serait un peu moins "moche"... -> f1 = new Resizable($("d1"));
@+ Ralecul
PS : au fait, ma version ne comporte pas le bug du redimensionnement trop rapide.
Et juste pour info ya pas mal d'erreurs dans ta page html (check W3C validator).
Sinon je comprend pas comment on peut utiliser des css et en même temps des balises font et center, c'est d'un autre temps tout ça !
2 sept. 2007 à 11:47
très très loin d'être un pro ! ( surtout de IE )
IE a des lacunes. Les autres navigateurs aussi.
Ce qui me gène c'est la critique sytématique d'IE,
généralemenbt totalement injustifiée.
############################################################
## ET je réagirais de la même manière pour un
## éreintement débile/puéril... envers FF !
############################################################
il est de bon ton, politiquement correct... de chercher à
casser tout ce qui vient de MicroSoft. c'est ridicule et
je ne suis pas politiquement correct.
Cordialement. @+
2 sept. 2007 à 11:32
et pour ta version qui est bien plus qu'intéressante.
personnellement, je préfère néamoins
_ ne pas obliger à mettre un ID
appel(document.getElementById('d1')) à la place de appel('d1')
déjà j'utilise plutôt les name [ vers php oblige ]
donc appel(document.formulaire.elément) par exemple.
_ utiliser directement
???.onmousedown=function(...) { ... } pour tous
plutôt que
???.onmousedown = fonction; pour IE et
???.addEventListener("evenement", fonction, false); pour les autres.
mais chacun ses goûts... et les vaches seront bien gardées.
Cordialement. @+
1 sept. 2007 à 19:25
Ton problème pour les span n'en est pas un : il s'agit encore d'un bug (fonctionnalités? :-) de IE...
La balise span est utilisée pour créer des propriétes css à un endroit précis, un passage en rouge dans un paragraphe par exemple.
Le dimensionnement d'un span n'a donc aucun sens, mais IE ne respecte rien comme toujours et applique tout de même ton style...
[Je sais que tu es un pro IE donc c'est pour celà que j'y vais avec des pincettes...]
Sinon pour ce qui est du code je l'ai remanié à ma sauce OO (avec différence private/public) :
Pour tester il suffit de remplacer :
var f1=new DINDE(document.getElementById('d1')); // exemples d'utilisation
var f2=new DINDE(document.getElementById('s1'));
var f3=new DINDE(document.getElementById('i1'));
var f4=new DINDE(document.getElementById('l1'));
par :
var f1 = new Resizable("d1");
var f2 = new Resizable("s1");
var f3 = new Resizable("i1");
var f4 = new Resizable("l1");
puis de rajouter ma version de ta classe dans le fichier JS :
(les commentaires sont en option dans ma version, m'enfin ya pas 2000 lignes non plus !)
function Resizable(id)
{
var _moving = false;
var _elt = document.getElementById(id);
var _x = 0;
var _y = 0;
var _width = 0;
var _height = 0;
var _pos;
attachEvent();
function attachEvent()
{
if (window.attachEvent)
{
_elt.onmousedown = press;
_elt.onmousemove = resize;
_elt.onmouseup = release;
_elt.onmouseout = release;
}
else
{
_elt.addEventListener("mousedown", press, false);
_elt.addEventListener("mousemove", resize, false);
_elt.addEventListener("mouseup", release, false);
_elt.addEventListener("mouseout", release, false);
}
}
function press(e)
{
_width = _elt.style.width ? parseInt(_elt.style.width) : _elt.offsetWidth;
_height = _elt.style.height ? parseInt(_elt.style.height) : _elt.offsetHeight;
_moving = true;
_pos = getPos(e);
return false;
}
function release(e)
{
_moving = false;
}
function resize(e)
{
if (!e)
e = window.event;
if (_moving)
{
pos = getPos(e);
_elt.style.width = Math.round(_width + pos.x - _pos.x)+'px';
_elt.style.height = Math.round(_height + pos.y - _pos.y)+'px';
}
return false;
}
function getPos(e)
{
var x, y;
if (!e)
e = window.event;
if (e.pageX)
{
x = e.pageX;
y = e.pageY;
}
else if (e.clientX) //IE
{
x = e.clientX;
y = e.clientY;
}
if (e.preventDefault)
e.preventDefault();
return new Point(x, y);
}
function Point(x, y)
{
this.x = x;
this.y = y;
}
}
@+ Ralecul