Réactiver le plugin dès la modification de la fenêtre du navigateur
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:
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
Reactiver un plugin lors de la modification de la fenêtre du navigateur
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
Réactualisation du plugin sur modification de la taille de page window
Re bonjour,
En intégrant les 4 lignes de code suivantes dans le <head> de la page :
Code:
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
problème avec css et bootstrap
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:
<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:
<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
