Télécharger le zip
Salut,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'utilisationvar 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
merci Ralecul et pour l'explication sur le spanet pour ta version qui est bien plus qu'intéressante.personnellement, je préfère néamoins _ ne pas obliger à mettre un IDappel(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 tousplutô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. @+
>>Je sais que tu es un pro IE...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 etje ne suis pas politiquement correct.Cordialement. @+
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"));@+ RaleculPS : 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 !
>>En DOM-2 on peut mettre deux fonctions sur un même evenementavec 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 çaje suis d'un autre temps, je ne m'intéresse guère àce genre de subtilité, aucun inconvénient, alors...
>>En DOM-2 on peut mettre deux fonctions sur un même evenementavec 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-JavaScriptEt 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
je viens de percuter...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.@+
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 w3celse if (quoi.attachEvent)//code pour IEAinsi 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 largeurelement.style.height=parseInt(element.style.height)+ver-yparelement.style.width = parseInt(width) + hor - x; // nouvelle largeurelement.style.height = parseInt(height) + ver - yavec 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
Salut,et si tu utilises l'excellent Prototype, tu fais :Event.observe(element, eventName, handler[, useCapture = false])@see : http://www.prototypejs.org/api/event/observeCe qui est beaucoup plus portable et moins contraignant que de faire le test soi meme:)
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.@+
j'ajouterais pour comparer des choses comparables,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])@+
Se souvenir du profil
Mot de passe oublié ? / Activation de compteCréer un compte