Redimensionner avec jQuery
Résolu
Fetide68
Messages postés
745
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
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 ?
Désolé si je blablate, mais j'aimerais aussi coomprendre la solution et le raisonnement.
Merci d'avance.
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 fenetre windows - Guide
- Illustrator je ne peux plus redimensionner - Forum Illustrator
- Comment redimensionner une image - Guide
- Redimensionner photo instagram - Guide
- Redimensionner image photoshop - Forum Photoshop
1 réponse
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) :
Bonne journée,
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,