11548 sujets

JavaScript, DOM et API Web HTML5

Avec un collègue nous sommes parfois pas d'accord au niveau JS sur certaines manières de faire.

J'explique le contexte :
- Imaginons un script de popin, cette popin doit pouvoir se repositionner lorsqu'on redimensionne le navigateur.
- Jusqu'ici cas peuvent être pris en compte :
- la popin est positionnée à coup de "top:50%; margin-top:-largeurPopin/2; position:fixed" (idem pour la position:horizontale) dans ce cas pas de problème ça se passe très bien.
- Si le haut de la popin arrive en haut du navigateur il ne faut plus passer par un margin-top + top:50% mais passer par un top:XXpx. La détection de ce "moment fatidique" doit être faite sur l'évènement resize. Sauf que cette évènement n'est exécuté qu'une fois que l'utilisateur à fini le redimensionnement sous IE6/7 (ptet 8) et non au fur et à mesure comme c'est le cas pour les autres navigateurs.
Pour pallier à ce problème, lors de l'ouverture de cette popin, je lance un setInterval toutes les 20ms, et la fonction associée va détecter s'il y a eu un changement de hauteur ou de largeur du viewport, et à ce moment là elle va éxecuter le reste du code nécessaire au traitement évoqué plus haut.
- lors de la fermeture de la popin je fais un clearInterval évidement

Mon collègue trouve que l'utilisation d'un setInterval est dégueulasse dans ce cas.

J'aimerai bien avoir vos avis éclairés sur le sujet Smiley smile
Merci
Modifié par Gatsu35 (26 May 2011 - 12:03)
Bonjour,

ce que tu dis m'étonnes, j'ai plusieurs fois utilisé " MooTools " avec l'événement
"window.addEvent('resize', function() { foo(); }) ; et je n'ai jamais eu aucun soucis d'attendre la fin du redimensionnement du navigateur pas l'utilisateur ( je viens de tester à nouveau ).

Es-tu sûr qu'il n'y a pas un autre évenement sur IE à catcher ?
Peut-être regarder les sources des frameworks existant pour voir s'il n'y a pas quelque chose de spécifique à ajouter pour IE.

( je trouve aussi le setInterval très sale )
Modérateur
Salut,

Comme n3k0, je privilégierais la consultation des codes sources de divers frameworks afin de voir si rien ne peut remplacer le setInterval car, dans la mesure du possible, c'est effectivement à éviter.

Néanmoins, je me rappelle d'un projet (avec Mootools aussi... une certaine "bmma") où il avait été nécessaire de passer par ce setInterval car IE6, contrairement aux autres navigateurs, "freezait" lors du redimensionnement, ce qui rendait la consultation du document peu sûre.

Le passage par ce setInterval avait alors permis à IE6 de ne pas s'emballer.
En effet, j'ai pas testé IE6, mais bon... Même les agences web qui font le plus de zêle ne dev plus pour IE6 et mettent pas mal de côté IE7... c'est abhérent de continuer à prendre en compte IE6.

Développer sous IE6 peut-être ( j'étais encore avec une version originale de IE6 il y a deux semaines, mais je vérifie quasi jamais IE ) mais utiliser des tricks du genre, juste pour un navigateur qui est la deuxième plus grosse plaie du WEB ( juste après Facebook, on s'entend bien ) ... c'est bête.
Modérateur
Bonjour n3k0,

Ce qui est abhérent, c'est plutôt le fait que certaines grandes structures roulent encore sur IE6, et les utilisateurs autorisés à installer Firefox par exemple doivent demander une autorisation spéciale et avoir d'excellentes raisons. J'ai vécu l'expérience il n'y a pas si longtemps. En conséquence, sans être zêlé, il faut parfois s'assurer que le site ou l'application Web reste fonctionnel sur IE6. Par contre, pour ce qui est de l'esthétisme (coins arrondis, transparence, etc.) là vaut mieux laisser aller, sauf si le client insiste et qu'il est prêt à débourser pour cette compatibilité.
Modifié par Tony Monast (26 May 2011 - 16:10)
On revient au débat initial et comme je le répète, IE6 et IE7 en mode natif sont moisi du genou pour gérer en mode "continu" le resize, il ne le fait que sur l'étape final ce qui est moche pour utilisateur.
Bon en prenant l'exemple d'un mec qui voulais détecter le resize d'un div, la seule solution possible est le setTimeout ou setInterval Smiley lol

https://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.js

On peut continuer longtemps comme ça, parfois il faut obéir à la réalité, on est pas dans le monde bisounours, tant que IE6 et 7 existeront, nous serons obligés d'avoir recours à des méthodes "moches". Qui ne sont pas si moches que ça. D'après vous comment fonctionnent les effets ? Smiley smile
Tony Monast a écrit :
Bonjour n3k0,

Ce qui est abhérent, c'est plutôt le fait que certaines grandes structures roulent encore sur IE6, et les utilisateurs autorisés à installer Firefox par exemple doivent demander une autorisation spéciale et avoir d'excellentes raisons. J'ai vécu l'expérience il n'y a pas si longtemps. En conséquence, sans être zêlé, il faut parfois s'assurer que le site ou l'application Web reste fonctionnel sur IE6. Par contre, pour ce qui est de l'esthétisme (coins arrondis, transparence, etc.) là vaut mieux laisser aller, sauf si le client insiste et qu'il est prêt à débourser pour cette compatibilité.


Ces grandes structures ont habituellement des restrictions quant aux sites possibles de visiter depuis leurs locaux, donc ils pourront rarement voir ton site marchand/perso(etc... exemple quoi) depuis leur lieux de travail.

Et quand on fait un site pour ce genre de structure, c'est souvent un intranet, le fait que IE6 soit obligatoire rentre en compte pour tout ce qui est design et outils techniques utilisés, on n'y fait rarement des pop-in resizable, qui est plus un effet d'esthétisme qu'autre chose.

-----------

Pour Gatsu,

IE 7 ça passe ( et chez moi comme je te dise la fenêtre n'attend pas la fin du resize pour redimensionner ce que je veux ), IE6, non, c'est fou de continuer réellement à prendre en compte le rendu sur ce navigateur, sauf pour les sites avec une audience à la Youtube, Dailymotion, Facebook ou des Intranets ou IE6 est forcé dans l'entreprise, mais comme je l'ai dit avant, ça se gère avec le client de suite, l'impossibilité de faire ce qu'ils peuvent voir habituellement depuis chez eux.

Après s'il allonge la monnaie, oui faire des choses sales ou utiliser plein de petites astuces pour que le client puisse se palucher, ça se fait... mais peu de clients sont opé pour ça Smiley cligne .
Modifié par n3k0 (27 May 2011 - 11:55)
jb_gfx a écrit :
C'est vrai que les utilisateurs passent leur temps à redimensionner la fenêtre de leur navigateur...

Je fais ça tout le te temps…
Moi aussi, ce que je veux dire c'est que tu redimensionnes une fois quand tu arrives sur le site ou la page, tu fais pas ça en continue. Qu'est ce que ça peut bien faire que sous IE6 la popin se replace que quand on relâche le bouton de la souris. C'est vraiment se prendre la tête pour pas grand chose.
Modifié par jb_gfx (27 May 2011 - 22:07)
jb_gfx a écrit :
Moi aussi, ce que je dire c'est que te redimensionne une fois quand tu arrives sur le site ou la page, tu fais pas ça en continue. Qu'est ce que ça peut bien faire que sous IE6 la popin se replace que quand on relâche la souris. C'est vraiment se prendre la tête pour pas grand chose.

Quand tu développes tu dois prendre en compte la plupart des besoins utilisateurs, dont le dimensionnement de la fenêtre qui entrain un rafraichissement du positionnement de la popup.

Ca ne prend rien à coder et ça éviter les problèmes merdiques que je rencontre sur la plupart des sites web.
Quand tu développes tu dois aussi prendre en code la pérennité et la maintenance du code. C'est pas en ajoutant une couche de code dégueulasse pour un cas super particulier qui touche 1% (parts de IE6 à l'heure actuelle) des utilisateurs que tu peux faire ça.
Modifié par jb_gfx (27 May 2011 - 22:08)
Modérateur
@jb_gfx: Oué, enfin, quand on développe pour un client et que son exigence est vraiment d'avoir IE6 tout en faisant pioupiou, c'est toujours bon de connaître ce genre de tips. On peut, certes, s'arranger pour tenter de le convaincre que ça va lui apporter peu pour très cher, m'enfin, en agence, on n'a pas toujours le choix. Après, ce qui compte, à mon sens, c'est surtout de s'arranger pour que le code, dit dégueulasse, n'intervienne que lorsque nécessaire. Dans ce cas, ça reste pérenne et tout à fait maintenable.

Note: En même temps, Gatsu, tu sais très bien que ce genre de chose n'est là que pour traiter les exceptions donc parler de problèmes merdiques comme si c'était vitale, je trouve çà un peu fort ; de plus en plus rares sont ceux qui, aujourd'hui, naviguent sur IE6, à moins d'y être vraiment contraint.

Note bis : IE6, c'est pour les poneÿs. Smiley smile
Modifié par koala64 (27 May 2011 - 23:51)
jb_gfx a écrit :
Quand tu développes tu dois aussi prendre en code la pérennité et la maintenance du code. C'est pas en ajoutant une couche de code dégueulasse pour un cas super particulier qui touche 1% (parts de IE6 à l'heure actuelle) des utilisateurs que tu peux faire ça.

Ce n'est pas du code dégueulasse, mais du code réfléchis, avec juste un "if/else" pour IE6 only.
Modérateur
n3k0 a écrit :


Ces grandes structures ont habituellement des restrictions quant aux sites possibles de visiter depuis leurs locaux, donc ils pourront rarement voir ton site marchand/perso(etc... exemple quoi) depuis leur lieux de travail.

Et quand on fait un site pour ce genre de structure, c'est souvent un intranet, le fait que IE6 soit obligatoire rentre en compte pour tout ce qui est design et outils techniques utilisés, on n'y fait rarement des pop-in resizable, qui est plus un effet d'esthétisme qu'autre chose.


Dans mon cas, c'était le site public de cette grande structure avec notre CMS maison. Comme les employés de cette structure allaient se rendre sur le site pour le consulter et/ou le gérer, il fallait quand même qu'il reste utilisable et visuellement correct sur IE6.