Redimensionner avec jQuery

Résolu/Fermé

Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 - 6 août 2016 à 18:36
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 8 août 2016 à 10:41

Bonjour,

J'ai créé et utilisé le script ci-dessous suivant pour dimensionner les éléments en largeur et en hauteur avec jquery au chargement de la page...

Ma page est constituée d'une balise <header> en haut (width css 100%) et hauteur auto. Le menu (balise <nav>) est à gauche avec une largeur à 200px et la page (<main>) occupe le reste de la page.

Seulement, lorsque j'aimerais que le script s 'exécute aussi lorsque je redimensionne la page.

Autre problème, je ne peux utiliser "$(document).ready(function()" qu'une seule fois par page/document. Comme cette fonction est appelée sur toutes les pages, j'ai donc mis ces lignes après la balise <footer>.

Mais si j'affiche la page "accueil.php" et que cette page nécessite une foncion spécifique à utiliser quand "$(document).ready(function()", je suis obligé d'afficher cette fonction sur toutes les pages et non seulement lorsque j'affiche "accueil.php".

Est-il possible d'exécuter cette fonction qui redimensionne les éléments sur un autre événement que "$(document).ready(function()" ? Dois-je l'écrire deux fois (on load et on ready) ou existe-t-il une formule plus rapide ?


<script type="text/javascript">
$(document).ready(function(){
	var hauteurHeader = $('header').height();
	var hauteurPage = $(window).height();
	hauteur = hauteurPage - hauteurHeader;
		
	var largeurMenu = $('nav').width();
	var largeurPage = $(window).width()-20;
	largeur = largeurPage-largeurMenu;
		
	$('nav').height(hauteur);
	$('main').width(largeur);
	$('main').height(hauteur);
});
</script>

Désolé si je blablate, mais j'aimerais aussi coomprendre la solution et le raisonnement.

Merci d'avance.

A voir également:

Redimensionner avec jQuery
Redimensionner tableau excel dans word - Guide
Redimensionner fenetre windows - Guide
Redimensionner une photo jpg - Guide
Redimensionner plusieurs images en même temps word - Forum Word
Redimensionner photo gratuit - Télécharger - Photo & Graphisme

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
8 août 2016 à 10:41

Salut,

Une solution possible serait d'encapsuler le code qui défini les dimensions des éléments dans une fonction afin de pouvoir appeler celle-ci lors du chargement et du redimensionnement de la page.

Tu peux utiliser la fonction addEventListener pour exécuter une ou plusieurs fonctions en fonction des événements déclenchés (load ou resize) :

<script>
function setDimension() {
    var hauteurHeader = $('header').height();
    var hauteurPage = $(window).height();
    hauteur = hauteurPage - hauteurHeader;
    
    var largeurMenu = $('nav').width();
    var largeurPage = $(window).width()-20;
    largeur = largeurPage-largeurMenu;
		
    $('nav').height(hauteur);
    $('main').width(largeur);
    $('main').height(hauteur);
}

window.addEventListener('load', setDimension);
window.addEventListener('resize', setDimension);
</script>

Bonne journée,

Discussions similaires

comment réduire photo pour cassolette coeur

redimensionner automatiquement une image inséré dans word

Redimensionner pour fond d'écran

Poignées de redimensionnement illustrator CS4

Excel - redimensionner barres de défilement