Una delle domande che spesso si trova nei forum (argomento HTML) è
"Come posso rendere un DIV esteso al 100% in larghezza e altezza?" oppure
"Come posso ottenere un DIV che segua il ridimensionamento della pagina?". In poche parole si tratta di creare un contenitore che si riadatti ogni qual volta la finestra viene ridimensionata.
Andando indietro nel tempo il tutto si realizzava con una
table di altezza e larghezza 100%. Le tabelle tempo fa, avevano anch'esse valenza di impaginatori, mentre ad oggi, secondo gli standard del
W3C, dovrebbero essere utilizzate come contenitori di soli dati. Nonostante questo tante persone ne fanno un uso scorretto ancora oggi, ignorando gli effetti che i vari browser potrebbero provocare, e ignorando altresì un minimo di validazione del codice. Quindi, in realtà, senza rispettare gli standard, la tecnica a tabelle è ancora possibile, ma è comunque una tecnica deprecata e, per alcuni
DOCTYPE, anche irrealizzabile.
Prendiamo un semplice codice HTML come questo:
<html>
<head>
<title>Pagina con tabella 100%</title>
<style>
body
{
margin: 0 0 0 0;
}
table
{
width: 100%;
height: 100%;
background-color: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr>
<td>Allargata e allungata al massimo</td>
</tr>
</table>
</body>
</html>
Senza aver definito alcun
DOCTYPE, abbiamo il comportamento desiderato (IE e FireFox):
Ma quanto è corretto non seguire gli standard definiti dal consorzio ? Quanto possiamo permetterci di ignorare le regole di implementazione ? A mio parere, seguirli il più possibile ci dà la sicurezza di un'implementazione longeva e corretta, ed in più certificata.
Impostando il seguente
DOCTYPE (XHTML 1.0 Transitional, le cui specifiche sono
qui )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">otteniamo questo risultato:
Il comportamento non è più lo stesso perchè nell'esempio di doctype aggiunto all’HTML di prima, non è più possibile specificare l'altezza di una tabella in percentuale. A dirla tutta, usando qualunque tipo di
DOCTYPE XHTML non è più possibile considerare l'altezza in quel modo, perchè anche logicamente, non avrebbe senso (
leggete qui , e controllate cosa è possibile fare con le tabelle
qui ).
Come detto prima inoltre, le tabelle sarebbero da utilizzare per i dati e non per l'impaginazione. Ed ecco che sono invece utilizzati i
DIV. Trasformiamo il codice di prima nel seguente codice HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pagina con div</title>
<style>
div
{
background-color: silver;
}
body
{
margin: 0 0 0 0;
}
</style>
</head>
<body>
<div id="divEsteso">Allarga la finestra</div>
</body>
</html>
Ecco come appare la pagina:
Noterete che senza dichiarare la larghezza essa è già al 100%, poichè il
DIV è un elemento di blocco (
block, per saperne di più leggere
qui ) e quindi, se non sono state esplicitate le dimensioni, tiene tutto lo spazio orizzontale. Guardando attentamente il codice poi, noterete che ho aggiunto un
id="divEsteso" al DIV, in modo da poter accedere ad esso nell'esempio che seguirà.
Ma come facciamo a fare in modo che il nostro
divEsteso prenda le dimensioni della pagina ? Anche i miei colleghi esperti in materia dicono che non è possibile con semplici fogli di stile (e che un metodo ci sarebbe ma non è che un accrocchio che inoltre non dà i risultati sperati). Quindi l'unica possibilità è usare
Javascript e in tal caso meglio
jQuery, che ci viene in aiuto fornendoci la possibilità di ottenere l'effetto in maniera pulita e cross-browser.
Ma procediamo passo per passo. Innanzitutto c'è da scaricare l’ultima versione (o quella desiderata) da
qui . Una volta scaricato e messo nella cartella che più si adegua alle nostre esigenze (nell'esempio il file verrà posto nella stessa cartella in cui risiede il file HTML), basta includerlo con la seguente riga di codice, aggiunta nella sezione
<head> della pagina:
</head>
...
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
Se stiamo scrivendo una Web Application che fa uso di
Master Pages, è ovviamente possibile includere il
.js direttamente nella master per poi averlo sempre disponibile in ogni pagina content. Una volta incluso, è sufficiente creare un'area per lo script jquery da utilizzare per l'espansione del
DIV:
</head>
...
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
// al caricamento della pagina (document ready) eseguo gli script
$(document).ready(function (){
// accedo al div con id divEsteso (notare il #) e ne modifico le proprietà height e width
$("#divEsteso").width($(window).width())
$("#divEsteso").height($(window).height())
});
</script>
</head>
Prima di proseguire soffermiamoci un secondo su quanto scritto. Abbiamo detto che servono due aree di script, la prima per includere le librerie di jquery (
src="jquery-1.3.2.js") e la seconda per la nostra implementazione. Proprio qui incontriamo le prime keywords:
- $(oggetto) (che si può scrivere anche "jQuery(oggetto)")Indica quale oggetto (o elenco di oggetti) "wrappare" in
jQuery. In questo modo l'oggetto o gli oggetti inclusi fra parentesi, potranno usare i metodi e le proprietà del framework
jQuery.
La core è descritta
qui .
- .ready(fn)È l'evento ready della pagina. Al suo interno è definita una funzione che esegue delle attività, solo quando l'oggetto document è "pronto". Reference dell'evento
qui .
- $("#id")Oltre che passare l’oggetto vero e proprio, è possibile anche selezionarlo tramite l’id per accedere all’oggetto del DOM e per poter operare direttamente su di esso. Un altro metodo molto utilizzato per effettuare la selezione di uno o più oggetti è sfruttare la classe indicata nel tag HTML, ed in questo caso la sintassi è $(".nomeclasse”). Attenzione che, presupposto un HTML validato e corretto (well formed), tramite selettore #id otterremo un solo oggetto mentre tramite quello di classe potremmo ottenerne più di uno. Per maggiori informazioni sui "selettori", leggere
qui .
- .width() e .height()Sono i metodi che definiscono larghezza e altezza dell'oggetto acceduto. Maggiori informazioni su come si utilizzano (get o set)
qui e
qui .
Il risultato:
Come si è comportato il browser per ridimensionare il
DIV?
Quando il documento si è caricato completamente
($(document).ready(fn)) è partita una funzione
fn che si è occupata di usare il setter dei metodi width e height dell'oggetto passato, acceduto tramite il selettore dell'id
($("#divEsteso")). I valori di altezza e larghezza impostati tramite i setter sopra descritti sono proprio quelli della finestra del browser
($(window)) e sono stati letti dai getter degli stessi metodi width e height, ma della finestra.
Sembra tutto ok, ma se ridimensiono la pagina il
divEsteso sta fermo, era esteso al caricamento, ma cambiando la dimensione della finestra del browser non cambia nulla, ormai il
DIV tiene le sue, impostate all'inizio da
jQuery. Come fare per ottenere un contenitore che segua la forma della finestra ? Sempre tramite
jQuery, stiamo in ascolto dell'evento resize della nostra window. Aggiungeremo alle linee sopra anche queste:
$(window).resize(function () {
// ridimensiono il div anche al cambiamento della window
$("#divEsteso").width($(window).width())
$("#divEsteso").height($(window).height())
});
Per ulteriori informazioni sull'evento resize e su come rimanere in ascolto di eventi
jQuery, leggete
qui e
qui . In questo modo, anche ridimensionando la finestra il
DIV ci seguirà e rimarrà esteso.
Tutto il codice scritto è stato sviluppato inline, e quindi direttamente all'interno della pagina HTML, incluso in un tag <script>. Nulla vieta di creare un file .js che poi potrà essere riutilizzato all’interno di altre pagine così come viene incluso un normalissimo file
Javascript.
C'è però da segnalare una lieve differenza che Firefox ed Internet Explorer hanno nell'eseguire il codice che ho fornito. Mentre il secondo procede perfettamente a ridimensionare il
DIV ad ogni cambio della finestra, Firefox attende il rilascio del pulsante del mouse prima di riadattare i margini del DIV stesso. Il risultato finale è comunque il medesimo.