DONNER EN INTERACTIF DE NOUVELLES DIMENSIONS AUX ELÉMENTS [ DINDE ]

Commentaire de bultez le 02/09/2007 11:32:49

merci Ralecul et pour l'explication sur le span
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.             @+

Commentaire de ralecul le 02/09/2007 23:05:19

J'ai fait ce code un peu vite, du coup ya quelques erreurs...
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 !

Commentaire de ralecul le 03/09/2007 12:40:27

>>En DOM-2 on peut mettre deux fonctions sur un même evenement
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) :

<h1>
<span class="big">D</span>onner en
<span class="big">I</span>nteractif de
<span class="big">N</span>ouvelles
<span class="big">D</span>imensions aux
<span class="big">E</span>lements
</h1>

Reste plus qu'à faire un joli css avec ça !

@+ Ralecul

Commentaire de ralecul le 05/09/2007 18:39:06

Salut,

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

Commentaire de bultez le 18/09/2007 09:51:56

certes... mais dans ce cas pourquoi pas
un "générateur d'applications" quelconque ?
( je ne vais pas en citer, ils sont légions )
ce sera encore beaucoup plus simple.
@+