Salut,
Peut-on détecter le redimensionnement d'un élément ?
J'ai essayé onresize mais sans succès, il semblerait que seul l'objet window a un onresize... (---> pourquoi l’auto-complétion le propose pour les éléments dans ce cas ?)
Merci.
Version imprimable
Salut,
Peut-on détecter le redimensionnement d'un élément ?
J'ai essayé onresize mais sans succès, il semblerait que seul l'objet window a un onresize... (---> pourquoi l’auto-complétion le propose pour les éléments dans ce cas ?)
Merci.
Salut,
Faudrait nous en dire plus, que veux-tu faire exactement, et dans quel contexte ?
Pour plusieurs choses notamment pour mon mini éditeur :
1- le nombre de lignes que j'affiche dépend de la taille de l’élément qui contient ces lignes...
Au départ c'est bon, une fonction init() calcule le nombre de ligne à mettre dans le DOM en fonction du clientHeight...
Mais il faudrait que ce nombre s'adapte en cas de changement de taille...
2- détecter les retours à la ligne...
Au pire utiliser un timer ? bof ou bien ?
J'ai trouvé ça : https://github.com/sdecima/javascrip...element-resize
Mais j'aimerais bien le faire moi-même...
------------
EDIT : Dans le lien ci-dessus il dit que les solutions qu'il a trouvé utilisent un timer mais ensuite il semble qu'il est trouvé mieux :
Then I came across this great post on Back Alley Coder about using overflow and underflow events scroll events to do event-based element resize detection; and it works great without consuming resources at all (just like any other browser originated event).
Il cite plusieurs articles...
Ah mais il y a un truc natif maintenant apparemment : Resize Observer
---> https://www.chromestatus.com/feature/5705346022637568
---> https://wicg.github.io/ResizeObserver
- https://developers.google.com/web/up...resizeobserver
Je ne connais pas mais ça doit être encore mieux, non ?
Est-ce dans le contexte de page css adaptatives qui utilisent les media query ?
Non c'est un truc tout simple en fait : dans une div container je mets des lignes de text (une div par ligne) mais le nombre que je met dans le DOM est limité à ce qu'on peut voir + 1 (ce qu'on peut mettre dans le clientHeight du container + 1) mais le text peut contenir plus de lignes, par exemple 7000 lignes mais j'en met seulement 30 à la fois dans le DOM, les autres lignes sont affichées en fonction de la position d'une scrollbar...
Oui c'est compliqué quand même, au début je mettais toutes les lignes dans le DOM mais ça provoque d'énorme ralentissement...
J'en parlais ici : Comment les éditeurs gèrent-ils les documents de grande taille ?
J'ai toujours pas compris ce qui changeait de taille ni pourquoi, dans quelles circonstances ?Citation:
Envoyé par Beginner.
Salut,
Ce qui est susceptible de changer de taille c'est la div (éditeur) qui contient les lignes de texte (une div par ligne). La raison pour laquelle j'ai besoin de détecter un changement de taille c'est simplement parce que le nombre de lignes dépend de cette taille (plus elle est grande plus il doit y avoir de lignes) et aussi en cas de retour à la ligne : l'endroit où se font les retours dépend de la taille du container...
Après les causes de changement de taille :
- Cela peut être un changement de taille de la fenêtre ---> ça c'est bon il y a onresize...
- Cela peut-être un redimensionnent effectuer par l'utilisateur (par exemple quand on ajuste la taille des différent panels de la fenêtre)...
- où simplement si un autre panel s'ouvre dans la page...
Bref des tas raisons sont possibles...
Mais bon ça va j'ai plusieurs idées : je peux par exemple lancer (à tous les panels) une fonction de rafraichissement chaque fois qu'un de ces cas apparait...
Mais en fait avant je voulais être sûr qu'il n'y avait pas un truc simple comme un onresize pour les éléments...
Merci.
Oui c'est ce que je pensais également et c'est pour cela que je te demandais à quelle occasion ces éléments peuvent changer de taille. En fait si tu n'as que ces 3 évènements, il est assez facile de lancer ta fonction de redimensionnement à chaque fois qu'ils apparaissent puisqu'ils sont faciles à surveiller.Citation:
Envoyé par Beginner.
C'est la méthode la plus économe en ressources. Sinon tu pourrais mettre un écouteur sur chaque bloc avec un setTimeout et comparer les dimensions précédentes avec les dimensions actuelles toutes les 1/2 secondes par exemple. Mais si les évènements sont faciles à écouter la première méthode est à la fois plus facile et plus économe en ressources (autant éviter les setTimout ou setInterval si possible).
Oui j'avais aussi pensé à un timer mais dans le lien au message #4 il en parle, il dit que c'est ce qui est utilisé en général mais ensuite il dit qu'il a trouvé mieux, je n'ai pas encore analysé la solution...
Si tu peux surveiller assez facilement les évènements qui sont susceptibles de faire changer les dimensions de tes blocs, ne t'embête pas à chercher d'autres solutions.
Les lib externes te feront soit un setTimeout (à éviter autant que possible), soit elles s'appuient sur des fonctionnalités dont on est pas certain de la fiabilité à long terme (nécessite une surveillance pour les mises à jour, etc). Quant aux nouvelles fonctionnalités non déployées sur tous les navigateurs, autant les oublier.
Bref ça prend pas mal de temps d'analyser tous ces paramètres pour savoir ce qui est plus ou moins acceptable. On évite donc ces lib qui au passage alourdissent un peu plus le code javascript, tant que l'on peut surveiller assez facilement les évènements déclencheurs car on aura ainsi un code à la fois plus optimisé en ressources et plus robuste (pas besoin de suivre les éventuelles mises à jour des lib externes).
Oui je pense que tu as raison, je vais faire comme ça...
Je préfère savoir ce que je fais.
Merci.