Puis-je détecter les événements de redimensionnement du navigateur?

Question

Je travaille sur la construction d'un simple éditeur d'objets à 4 volets et le dimensionnement de la toile est un peu problématique. J'ai appris que je ne devrais pas dimensionner la toile à l'intérieur de CSS et devrait plutôt définir la largeur explicite de pixel et la taille. J'ai essayé de tout configurer de sorte que tout redimensionne à la volée lorsque le navigateur est redimensionné, donc j'ai essentiellement une table 5x5 avec les lignes 1,3 et 5 comme une hauteur de 5px et les colonnes 1,3 et cinq avec un largeur de 5px. Les quatre cellules qui restent sont toutes de taille égale.

J'ai placé un div à l'intérieur de chacune des cellules de table trouvées et ai donné à la div un fond et une bordure en utilisant CSS, avec un remplissage de 0px. Je ne spécifie pas de largeur ou de hauteur (mais je l'ai essayé avec 100% aussi).

Je place une toile à l'intérieur de chaque div et ne spécifie pas les dimensions avant que tout ne soit disposé. Par la suite, j'ai lu la largeur et la hauteur de l'une des cellules du tableau et défini la taille de chaque toile en fonction de cela. Cela fonctionne bien sauf que j'ai un étrange écart de 3px entre le fond de chaque toile et la bordure de celle-ci contenant div. Pour la table, j'ai spécifié padding: 0px; border-spacing: 0px; et effondrement de la frontière: effondrement; et pour les cellules td, ont spécifié padding: 0px;

L'écart est le problème # 1. Le deuxième problème est que parce que chaque toile a sa largeur et sa hauteur définies, tous les autres composants à l'écran se redimensionnent automatiquement avec une modification de la taille de la fenêtre, mais les éléments de la toile restent fixes. Puis-je en quelque sorte détecter un événement de redimensionnement de fenêtre et régénérer les éléments de canevas? Idéalement, comme un redimensionnement alors qu'il est visible est plutôt lent, je voudrais masquer ou supprimer les éléments quand le redimensionnement commence et reconstruire et les montrer quand le redimensionnement est terminé. ???

Answer 1

$(window).resize(function() { 
    // handle accordingly 
}); 

Answer 2

Essayez resize^jQuery:

$(window).resize(function(){ 
    // regenerate canvas 
});