Discussion :

[Kelt_pkr]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SpaceFrog]

Class.create... ???

Tu ne confondrais pas Java et Javascript ?

[Loceka]

Class.create... ???

Tu ne confondrais pas Java et Javascript ?

Y'a pas de ça en Java non plus.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var self = this;
Event.observe(window, 'resize', self.centre);

ou une variante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var self = this;
Event.observe(window, 'resize', function(event){
   self.centre();
});

A+

[Kelt_pkr]

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.

[Kelt_pkr]

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 .

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

Non sérieusement encore merci, j'ai bien fait de soumettre ce petit problème sur le Forum.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

A+