Gérer un évènement

Version imprimable

Gérer un évènement

Bonjour,

Voilà mon problème: j'ai créé un objet page(un div) et je souhaiterais lui ajouter une gestion d'évènement window.onresize pour que quand on redimensionne la fenêtre du navigateur la page(le div) se recentre automatiquement.

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var Page = Class.create(Composant,{
  initialize: function(element_parent,name,largeur,hauteur,couleur_fond,couleur_page) {
    this.element_parent = element_parent;
    this.name = name;
    this.largeur = largeur + "px";
    this.hauteur = hauteur + "px";
    this.couleur_fond = couleur_fond;
    this.couleur_page = couleur_page;
    this.position = position;
    this.page = document.createElement('div');
    this.page.style.width = this.largeur;
    this.page.style.height = this.hauteur;
    this.element_parent.appendChild(this.page);
    this.positionne(this.position);
    window.onresize = this.centre();
    this.centre();
 
  },
    centre: function () {
    this.position = position;
    this.page.style.position = "absolute";
    this.page.style.left = $("body").offsetWidth / 2 - this.page.offsetWidth / 2 + "px";
  }
});

Tel quel, cela ne fonctionne pas. Quelqu'un peut-il m'aider ?

Merci.

22/03/2012, 14h59
SpaceFrog

Class.create... ???

Tu ne confondrais pas Java et Javascript ?
22/03/2012, 15h18
Loceka

Citation:

Envoyé par SpaceFrog

Class.create... ???

Tu ne confondrais pas Java et Javascript ?

:nono:
Y'a pas de ça en Java non plus.
22/03/2012, 15h29
BaBeuH
@SpaceFrog, le "Class.create" provient probablement d'une librairie JavaScript (prototype.js par exemple ?) pour générer des objets émulant le fonctionnement de classe.

Sinon, Kelt_pkr, concernant ton problème, je pense qu'il s'agit dans la façon dont tu attaches ta fonction "centre" à l'événement "resize".

1) Ce n'est pas une bonne pratique d'utiliser

Code:

window.on<event>

car cela écrase les fonctions attachées précédemment au même évènement (si un autre script a attaché une autre fonction à l'évènement resize, une seule fonction sera appelée...). Il faut utiliser pour cela un "gestionnaire d'événement" qui permet d'ajouter une fonction à un événement sans écraser l'existant (si tu utilises prototype.js, regarde du coté de Event.observe), sinon il faut jongler avec les fonctions "attachEvent" et "addEventListener" selon les navigateurs.

2) Lorsque tu attaches une fonction à un événement, il faut comme son nom l'indique attacher une fonction.

Code:

window.onresize = this.centre();

this.centre() provoque l'exécution de la fonction, mais ne retourne pas de fonction or c'est ce qui est attendu.
Il y a plusieurs solutions possibles (en utilisant prototype.js pour la gestion d'événement) :

Code:

Event.observe(window, 'resize', this.centre);

tu attaches ainsi véritablement une fonction à l'événement onresize, toutefois je ne suis pas certain que cela fonctionne à cause du contexte d'exécution (this ne correspondra peut-être pas à ta "classe").
La solution qui devrait fonctionner pourrait être la suivante :
Code:

1 2 var self = this; Event.observe(window, 'resize', self.centre);
ou une variante :
Code:

1 2 3 4 var self = this; Event.observe(window, 'resize', function(event){ self.centre(); });
A+
22/03/2012, 16h20
Kelt_pkr

"Tout à fait Thierry"

Déjà Merci pour vôtre intérêt. Effectivement j'utilise "prototype.js" je ne l'avais pas précisé désolé.

Je vais suivre tes conseils BaBeuh et je vous tiens au courant.
22/03/2012, 16h37
Kelt_pkr

Super ! ! !

Merci beaucoup Babeuh, j'avais déja pour un autre développement utilisé cette façon de faire, mais je pensait que c'était de la bidouille et que je me ferais assassiner par un expert en javascript :aie:.

C'est impeccable je passe juste pour un Guignol :oops: ça me va ! :D

Non sérieusement encore merci, j'ai bien fait de soumettre ce petit problème sur le Forum.
22/03/2012, 16h59
BaBeuH

Je ne sais pas si cette façon de faire (passer par une variable supplémentaire pour garder la référence à l'objet courant) est la meilleure, mais comme il est difficile de trouver de "véritables" bests practices sur le net (à travers un nombre incalculable de bout de code de javascript datant d'une dizaine d'années), c'est une méthode que j'utilise pour ma part assez couramment.

Sinon, tu peux même encore faire différemment toujours en utilisant prototype :

Code:

Event.observe(window, 'resize',self.centre.bind(self));

cf la doc prototype :
http://prototypejs.org/api/function/bind

A+