jQuery: Resize di un DIV pari all’altezza della finestra
Se stai cercando un codice leggero e veloce per ridimensionare l’altezza dei tuoi elementi HTML dello stesso tanto dell’altezza attuale della finestra del browser, questo è il posto giusto! Spiegherò con poche righe di codice come permettere il resize dell’altezza di uno più elementi in maniera dinamica in base all’altezza della finestra.
Esempio e chiarimenti
Un esempio di quello che vi voglio trovare lo possiamo vedere sullo Store Apple nella pagina dedicata all’iPhone 5s. Il nostro codice avrà quindi la funzione di ridimensionare l’altezza di uno o più elementi in base all’altezza attuale della finestra, controllerà infatti l’altezza al primo caricamento della pagina e in seguito a ogni ridimensionamento della finestra, cambiando di conseguenza i valori degli elementi.
Il codice HTML
Il codice HTML è semplice e facile:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery: Resize di un DIV dell'altezza della finestra</title> <script src="include/js/jquery-1.11.0.min.js"></script> </head> <body> <section> <article class="art1" id="article"> <img src="logo-jquery.png"> </article> <article class="art2" id="article"> art2 </article> <article class="art3" id="article"> art3 </article> <article class="art4" id="article"> art4 </article> </section> </body> </html> |
Avremo quindi una semplice pagina con una SECTION che raggrupperà tutti gli elementi da a cui ridimensionare l’altezza, dentro di essa avremmo vari ARTICLE che subiranno il resize, dentro di essi potremmo mettere qualsiasi cosa. In questo esempio ho deciso di centrare verticalmente il contenuto degli elementi.
Style CSS
Anche il CSS in questo caso è semplice, ma fondamentale:
<style type="text/css"> body{ margin:0; padding:0; } section{ margin:0 auto; padding:0; display:block; } article{ margin:0 auto; padding:0px; text-align:center; display:block; } .art1{ background-color: darkred; } .art2{ background-color: gray; } .art3{ background-color: darkgreen; } .art4{ background-color: orange; } </style> |
Il BODY avrà margin e padding uguale a 0, questo per riuscire a riempire l’intera pagina con i nostri elementi. La SECTION e gli ARTICLE saranno centrati orizzontalmente tramite “margin:0 auto;”. Infine per ogni ARTICLE (.art1, .art2. etc…) daremo uno sfondo di un colore diverso, per renderci conto del ridimensionamento. Il width è di norma al 100% in modo tale da ricoprire tutta la pagina in maniera orizzontale.
jQuery .css() .load() e .resize()
Per il codice jQuery saranno fondamentali le funzioni .load e .resize, verrà posizionato subito prima della chiusura del tag BODY, ecco quindi come utilizzarle:
<script > function Ridimensiona(){ var height = $(window).height() + 'px'; $('article').css({minHeight: height, lineHeight: height}); } Ridimensiona(); $( window ).load( function(){ Ridimensiona(); }); $( window ).resize( function(){ Ridimensiona(); }); </ script> |
Il codice si apre subito con la dichiarazione della funzione Ridimensiona() che come dice il nome, ogni volta richiamata, ridimensionerà gli elementi scelti. Con $(window).height() + ‘px’; salveremo in una variabile l’altezza attuale della finestra seguita da “px” per il CSS. Con la funziona .css() aggiorneremo il css della pagina: reimposteremo l’altezza degli ARTICLE in base al valore delle varibili dichiarate in precedenza, mentre con lineHeight allineeremo verticalmente il contenuto.
Subito dopo abbiamo i vari richiami di questa funzione. Il primo semplicemente prepara la pagina per essere ridimensionata, il secondo avviene tramite $( window ).load() che avvierà la funzione quando tutti gli elementi della finestra (window) saranno caricati. L’ultimo richiamo, $( window ).resize() avverrà ogni qualvolta la finestra verrà ridimensionata.
In questo modo avremmo i nostri elementi sempre aggiornati all’altezza attuale della nostra finestra del browser.
Fatemi sapere se vi è stato utile. A presto!
