Comment détecter le changement de dimension d'un DIV ?

Question

Comment détecter le changement de dimension d'un DIV ?

Demandé el 27 de Juin, 2011: Quand la question a-t-elle été
26076 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai l'exemple html suivant, il y a un DIV qui a une largeur de 100%. Il contient quelques éléments. Lors du redimensionnement de la fenêtre, les éléments internes peuvent être repositionnés, et la dimension de la division peut changer. Je me demande s'il est possible d'accrocher l'événement de changement de dimension de la division et comment le faire. Je lie actuellement la fonction de rappel à l'événement de redimensionnement de jQuery sur la division cible, mais aucun journal de console n'est affiché, voir ci-dessous :

Before Resize enter image description here

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

Demandé el 27 de Juin, 2011 par William Choi

11 votes

Cela ne fonctionnera pas car vous liez l'événement de redimensionnement à l'élément div spécifié. Mais l'événement de redimensionnement sera déclenché pour la fenêtre et non pour votre élément.

Commenté el 27 de Juin, 2011 par Fatih

0 votes

Vous pourriez utiliser setInterval ici comme une solution possible. Vous pouvez toujours lier clearInterval à un clic de bouton pour arrêter la boucle une fois que votre travail est terminé.

Commenté el 24 de Novembre, 2016 par Utilisateur non enregistré

10 votes

Depuis 2020, ResizeObserver fonctionne dans tous les principaux navigateurs (Chrome, Safari, Firefox, Edge) sauf IE. caniuse.com/#feat=resizeobserver

Commenté el 4 de Mai, 2020 par Dan

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

296voto

MArc Points 948

Il existe une méthode très efficace pour déterminer si la taille d'un élément a été modifiée.

http://marcj.github.io/css-element-queries/

Cette bibliothèque possède une classe ResizeSensor qui peut être utilisé pour la détection du redimensionnement.
Il utilise une approche basée sur les événements, ce qui lui permet d'être très rapide et de ne pas gaspiller le temps du processeur.

Exemple :

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Veuillez ne pas utiliser le Plugin jQuery onresize car il utilise setTimeout() en combinaison avec la lecture du DOM clientHeight / clientWidth dans une boucle pour vérifier les changements.
C'est incroyablement lent et imprécis puisqu'il provoque mise en page .

Divulgation : Je suis directement associé à cette bibliothèque.

Répondu el 17 de Octobre, 2013 par MArc (948 Points )

1 votes

Allez-vous ajouter la prise en charge d'IE11 pour votre bibliothèque ResizeSensor.js ?

Commenté el 16 de Février, 2014 par jake

1 votes

@jake, je n'ai pas encore trouvé de solution basée sur les événements pour IE11. Vous pouvez voir plus d'informations ici github.com/marcj/css-element-queries/issues/7

Commenté el 16 de Février, 2014 par MArc

8 votes

@jake, le support d'IE11 est maintenant implémenté.

Commenté el 8 de Septembre, 2014 par MArc

Afficher 35 autres commentaires

Answer 3

30voto

Alessandro Vendruscolo Points 3326

Vous devez lier le resize sur l'événement window et non sur un élément html générique.

Vous pourriez alors utiliser ceci :

$(window).resize(function() {
    ...
});

et dans la fonction de rappel, vous pouvez vérifier la nouvelle largeur de votre div en appelant

$('.a-selector').width();

Donc, la réponse à votre question est pas de vous ne pouvez pas lier le resize à un div.

Répondu el 27 de Juin, 2011 par Alessandro Vendruscolo (3326 Points )

155 votes

Cette réponse n'est pas suffisante. des changements de taille peuvent se produire sans qu'il y ait un quelconque redimensionnement de la fenêtre. du tout.

Commenté el 16 de Mars, 2014 par vsync

9 votes

Par exemple, lorsque vous avez un élément de séparation ou que vous ajoutez simplement du texte ou un autre contenu à un élément.

Commenté el 3 de Mai, 2014 par Günter Zöchbauer

0 votes

@anu pas vrai, vous pouvez avoir une modification du DOM via javascript qui fait que le CSS s'applique à la nouvelle structure résultant en une mise en page différente - taille de chaque conteneur.

Commenté el 17 de Janvier, 2018 par Antoniossss

Answer 4

11voto

Bharat Patil Points 622

Jetez un coup d'œil à ceci http://benalman.com/code/projects/jquery-resize/examples/resize/

Il contient plusieurs exemples. Essayez de redimensionner votre fenêtre et voyez comment les éléments à l'intérieur des éléments conteneurs s'ajustent.

Exemple avec js fiddle pour expliquer comment le faire fonctionner.
Jetez un coup d'œil à ce violon http://jsfiddle.net/sgsqJ/4/

Dans cet événement resize() est lié à un élément ayant la classe "test" et aussi à l'objet fenêtre et dans le callback de redimensionnement de l'objet fenêtre, $('.test').resize() est appelé.

par exemple

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});

Répondu el 27 de Juin, 2011 par Bharat Patil (622 Points )

0 votes

Intéressant. Ce jsfiddle fait systématiquement planter Chrome lorsque l'inspecteur est ouvert et que je clique sur le lien "Ajouter plus de texte". Firefox envoie des erreurs "too much recursion".

Commenté el 22 de Septembre, 2013 par JoeCoder

3 votes

N'utilisez pas le plugin de redimensionnement de jQuery. Il est très lent et n'est pas précis non plus. Consultez ma réponse pour obtenir une meilleure solution.

Commenté el 17 de Octobre, 2013 par MArc

24 votes

Cela ne détecte PAS directement les changements de dimension. C'est juste un sous-produit d'un écouteur d'événement de redimensionnement. Un changement de dimension peut se produire de nombreuses autres façons.

Commenté el 16 de Mars, 2014 par vsync

Afficher 1 autres commentaires

Answer 5

9voto

Pointy Points 172438

Seul l'objet fenêtre génère un événement "resize". La seule façon que je connaisse pour faire ce que vous voulez faire est d'exécuter un minuteur d'intervalle qui vérifie périodiquement la taille.

Répondu el 27 de Juin, 2011 par Pointy (172438 Points )

Answer 6

-1voto

rbtbar Points 1

Seulement Window.onResize existe dans la spécification, mais vous pouvez toujours utiliser l'option IFrame pour générer de nouveaux Window dans votre DIV.

Veuillez vérifier ceci réponse . Il y a un nouveau petit plugin jquery qui est portable et facile à utiliser. Vous pouvez toujours consulter le code source pour voir comment c'est fait.

<!-- (1) include plugin script in a page -->
<script src="/src/jquery-element-onresize.js"></script>

// (2) use the detectResizing plugin to monitor changes to the element's size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });

// (3) write a function to react on changes:
function monitoredElement_onResize() {    
    // logic here...
}

Répondu el 10 de Septembre, 2014 par rbtbar (1 Points )

0 votes

Cette solution est très inefficace si vous avez des divs redimensionnables.

Commenté el 12 de Novembre, 2015 par suricactus

Comment détecter le changement de dimension d'un DIV ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment détecter le changement de dimension d'un DIV ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: