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 ?

**Rojofrai** · 08/06/2020, 11h38

Re bonjour,
En intégrant les 4 lignes de code suivantes dans le <head> de la page :

Code HTML :

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

1
2
3
4
<script type="text/javascript">
$(document).ready(function(){$('#content p').resizeDiv();});
$(window).resize(function(){$('#content p').resizeDiv();});
</script>

Cela fonctionne très bien, mais je serais encore plus contant si je pouvais intégrer dans mon plugin ‘resizeDiv’ une ligne équivalente à $(window).resize(function(){$('#content p').resizeDiv();}); pour faire le même travail.
Je vous avoue que je suis de la vieille école, j’ai fais un peu d’informatique il y a 50 ans, lorsque j’étais étudiant et le moindre programme fortran se faisait en utilisant carte ou bande perforée. Actuellement j’ai un peu plus de mal, car la manipulation se fait sur des objets.
Merci pour votre patience
A+
Rojofrai

**ma5t3r** · 08/06/2020, 12h05

Mais pour réactiver le plugin lors d’un changement de taille de la fenêtre du navigateur, ...

Je crois que tu es sur la mauvaise piste. CSS fait ça très bien.
Si ton CSS est cohérent, changer les dimensions de la fenêtre du navigateur aura un effet sur la mise en page de manière automatique.

**Rojofrai** · 08/06/2020, 15h48

Cher ma5t3r
Avec bootstrap, le css fait le travail correctement mais les pages peuvent être très moches. Quand un article habille la photo alignée sur sa gauche, on peut la définir comme étant de taille fixe ou avec des dimensions proportionnelles à la largeur de la <div> article qui l’accueille. Quand la grille change de forme lors du redimensionnement de l’écran, le visuel à l’écran peut devenir très moche :
-avec une image de taille fixe, le texte présent glisse et saute de ligne en ligne, sauf lorsqu’un mot est trop long, on se trouve avec un saut de ligne et une rupture du texte. Avec les conditions Medias Queries on peut améliorer en faisant un passage de l’image à 100%.
-avec une image de taille proportionnelle, l’image se positionne avec une marge supérieure ou inférieure de valeur quelconque car non alignée avec le texte. L’image peut aussi devenir microscopique. Sous certaines conditions Medias Queries, on peut rattraper cela.
Comme je l’ai signalé au paravent, je suis un fainéant et je ne veux pas me torturer les méninges lors du dimensionnement des images, il faut que cela se fasse automatiquement. Quand j’introduis un nouvel article dans joomla, je fais insérer image et ma fonction ‘resize’ actuelle génère la balise image suivante :

Code HTML :

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

<img height="159" style="margin: 0px 5px 0px 0px; float: left;" alt="" src="css/champion.jpg" longdesc="H 139">

Je récupère cette balise en prenant soin de remplacer la valeur height="159" par height="139" qui est la hauteur par défaut et minimum de l’image : cette valeur est affichée dans longdesc="H 139" et correspond à la hauteur minimum d’une image de surface égale au tiers de la surface de l’article. Après avoir placé cette nouvelle balise image dans l’article, le système régénérera la même balise que précédemment, c’est à dire:

Code HTML :

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

<img height="159" style="margin: 0px 5px 0px 0px; float: left;" alt="" src="css/champion.jpg" longdesc="H 139">

Ceci est lié au fait que le système calcule la hauteur de l’image affichée en fonction de la hauteur du texte et en cas de panne du script ou si la <div> devient trop large, l’image est affichée en utilisant sa hauteur minimale.
La fonction resize actuelle fait moins de 60 lignes et fonctionne correctement, mais avec cette période de confinement/déconfinement, j’ai décidé de réviser mes scripts et c'est pour cela que je me remue les méninges.
A+
Rojofrai

**ma5t3r** · 08/06/2020, 16h48

Premièrement l'attribut longdesc est déprécié et ne doit plus être utilisé.
Il servait à la base à stocker une url pointant vers une description longue d'une image.

J'imagine que tu récupères cette valeur dans ton script pour avoir la valeur de référence.
Si c'est la cas, il vaut mieux utiliser les attributs de données data-*

Bref, peut-être que le code suivant fonctionne (jamais essayé):

Code :

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

1
2
3
4
 
$(window).on("load resize", function() {
        $("#element").monPlugin();
});

ou alors celui-là :

Code :

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

1
2
3
4
5
6
7
 
$(document).ready(function() {
        $("#element").monPlugin();
});
$(window).resize(function() {
        $("#element").monPlugin();
});

**Rojofrai** · 08/06/2020, 18h24

Salut ma5t3r,
La ligne de code

Code :

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

$(window).on("load resize", function(){$('#content p').resizeDiv();});

fonctionne parfaitement.
Je vais finir de mettre au point tout le script de ce plugin.
Si cela vous intéresse, je peux vous envoyer une copie dès qu'il est finalisé et aussi l'adresse du site web sur lequel il est installé.
Encore merci
Cordialement
Rojofrai

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

jQuery

Discussions similaires

Partager

Partager