Réactiver le plugin dès la modification de la fenêtre du navigateur

**Rojofrai** · 05/06/2020, 18h07

Bonjour,
Le 01/06/2020 j’ai fait une demande quant au paramétrage d’un plugin jquery. Suite à la réponse de ‘ma5t3r’, j’ai pu développer un plugin qui est dès à présent opérationnel.
Sur les mêmes bases, j’ai développé un nouveau plugin pour redimensionner les images des pages web (sous bootstap) en fonction des dimensions de l’article qui les contient. Ce plugin est opérationnel, mais fait le job demandé que lorsque la page est appelée ou qu’elle est rafraîchie. Je voudrais ajouter à ce plugin une fonction du style ‘$(window).bin()’qui permet de recalculer automatiquement les dimensions des images dès que les ‘div’ voient leurs dimensions modifiées, mais je ne sais où l’intégrer.

Code HTML :

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
25
26
27
<!DOCTYPE html> 
<html> 
<head> 
<title>Resize Div</title> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
	<style> p{border: 2px solid green; font-size: 20px; text-align: center;} </style> 
</head> 
<body> 
<div id="content"> <p></p> </div>
	<script>
        (function($) {
                $.fn.resizeDiv = function(options) {   
                        var options = $.extend({
        //definition des options par defaut
                        }, options);            
                $(this).each(function() {
        //début traitement pour l'élément visé      
                var LargeurDiv = $(this).width();
                $(this).html(LargeurDiv+' px');
        //fin traitement pour l'élément visé         
                        });             
                };
        })(jQuery);
        </script>
	<script>$('#content p').resizeDiv();</script> 
</body> 
</html>

Avec le plugin ci dessus, la page affiche la largeur de la ‘div’ à l’ouverture de la page ou lors du rafraîchissement. Je voudrais que la valeur de cette largeur change automatiquement lorsque la taille de la fenêtre du navigateur est modifiée.
Merci

**ma5t3r** · 05/06/2020, 20h01

Salut,
tu peux utiliser la méthode resize de jQuery

Code :

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

1
2
3
4
 
$(window).resize(function() {
  //je fais un traitement spécifique lors du resize
});

**ma5t3r** · 05/06/2020, 20h08

Petit rappel,
il faut éviter de mettre des balises <script></script> dans ton HTML.

Il est préférable de positionner le script JS juste au dessus de la balise fermante </body>

Le mieux est de créer tes plugins et/ou ton code JS dans un fichier à part et de l'inclure au bas de ta page HTML

Code HTML :

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

<script type="text/javascript" src="monfichier.js"></script>

**Toufik83** · 07/06/2020, 05h28

Bonjour,

Envoyé par ma5t3r

Il est préférable de positionner le script JS juste au dessus de la balise fermante </body>

Bien expliqué ma5t3r, sauf qu'avec jQuery il existe la méthode $(document).ready() qui est l'équivalente de DOMContentLoaded de javascript pur et qui sera prise en considération lorsque la page est prête (chargement du html et css+ affichage complet du document), ceci dit qu'on peut mettre le code jQuery dans la balise <head> sans soucis :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="UTF-8" />
   <script src="jquery...."></script>
   <script>
         $(document).ready(function(){
              /*le code jquery ici ...*/
         });
   </script>
</head>
<body></body>
</html>

**Rojofrai** · 08/06/2020, 09h22

Bonjour,
J’ai lu avec intérêt vos remarques et je vais les appliquer. Mais pour réactiver le plugin lors d’un changement de taille de la fenêtre du navigateur, je n’ai pas réussit à créer et intégrer une ligne de code à base de $(window).resize(function(){ }); qui puisse faire ce job.
En fouillant la toile, j’ai trouvais une solution qui ne me plais pas car un peu barbare, car elle est basée sur le rechargement de la page, voici la ligne de code avec le commentaire :
$(window).bind('resize', function(e){ this.location.reload(false);});.
// 'false' recharge la page depuis le cache // 'true' recharge la page depuis le serveur.
Est-il possible de faire autrement ? ? ?
Merci et A+
Rojofrai

**ma5t3r** · 08/06/2020, 09h47

Je ne comprends pas ce qui peut te gêner.

Code :

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

1
2
3
4
 
$(window).resize(function() {
  alert('implémentation du code ici');
});

Si on est dans une simple gestion du responsive, ton CSS fera le job, je ne vois pas ce que JS pourra faire de mieux à ce niveau.

Dans quel cas veux-tu gérer le resize de ton navigateur ?

Réactiver le plugin dès la modification de la fenêtre du navigateur [Plugin]

jQuery

Vue hybride

Discussions similaires

Partager

Partager