Vuoi imparare jQuery ma non sai da dove iniziare? – Le dimensioni

jQuery
Una parte fondamentale per la gestione e la creazione delle interfacce utente di un sito o di un’applicazione web è la conoscenza di come manipolare le dimensioni e la posizione dei vari elementi presenti nella pagina. jQuery fornisce un’interfaccia semplice ma potente che ci permette di creare complesse animazioni utilizzando poche righe di codice. In questa lezione studieremo i metodi necessari per gestire le dimensioni dei nostri elementi.

Potrebbe venire da chiedersi perché soffermarsi sullo studio di questi concetti: il motivo è che essi intervengono in molte applicazioni pratiche. Ad esempio, in molte applicazioni è necessario valutare se un elemento si trova all’interno di un contenitore e impedirgli la fuoriuscita, come delle finestre all’interno di un’applicazione: calcolando opportunamente le relazioni tra la dimensione dell’oggetto esterno e la dimensione di quello interno è possibile realizzare tale effetto. Oppure ancora è possibile realizzare semplici menu dropdown adattabili.

Ovviamente questi sono solo alcuni esempi, i possibili usi sono tantissimi. Vediamo ora come recuperare queste informazioni tramite jQuery.

Come jQuery gestisce le dimensioni

jQuery offre tre tipi di funzioni per gestire l’altezza e la larghezza degli elementi:

  • width/height: recuperano rispettivamente la larghezza e l’altezza dell’elemento, padding e bordi esclusi.
  • innerWidth/innerHeight: recuperano rispettivamente la larghezza e l’altezza dell’elemento, padding incluso
  • outerWidth/outerHeight: recuperano rispettivamente la larghezza e l’altezza dell’elemento, padding e bordi inclusi

Possiamo subito testare le funzioni con il seguente markup di prova:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="screen.css" />
  <title>jQuery: dimensioni | Your Inspiration Web</title>
</head>
<body>
<h1>Il modulo Dimensions di jQuery</h1>
<div id="box">

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="dimensioni.js"></script>
</body>
</html>

a cui applichiamo il seguente codice CSS:

body {
	font: 62.5%/1.4 Georgia, serif;
	text-align: center;
}

#box {
	border: 10px solid #036;
	background-color: #369;
	height: 100px;
	margin: 0 auto;
	padding: 10px;
	width: 100px;
}

Possiamo utilizzare le funzioni sopra esposte per ricavare le dimensioni di questo #box:

$(document).ready(function(){
	/* conservo l'elemento in una variabile, in modo da richiederlo una sola volta */
	var $box = $('#box');

	//larghezza
	console.log("Larghezza iniziale #box: ", $box.width(), "px");
	console.log("Larghezza interna iniziale  #box: ", $box.innerWidth(), "px");
	console.log("Larghezza esterna iniziale #box: ", $box.outerWidth(), "px");

	//altezza
	console.log("Altezza iniziale #box: ", $box.height(), "px");
	console.log("Altezza interna iniziale #box: ", $box.innerHeight(), "px");
	console.log("Altezza esterna iniziale #box: ", $box.outerHeight(), "px");
});

Nota: per eseguire il codice è necessario che la console javascript del tuo browser sia attiva.

  1. attivare la console in Google Chrome: Visualizza > Opzioni per sviluppatori > Console JavaScript
  2. attivare la console in Opera: Strumenti > Avanzante > Strumenti per gli sviluppatori
  3. attivare la console in Firefox: Strumenti > Console degli errori
  4. attivare la console in Safari: Preferenze > Avanzate > “Mostra menu Sviluppo” > “Sviluppo” > Mostra console errori

Avendo impostato la larghezza del #box a 100 pixel, questo sarà il valore restituito da “width”. La funzione “innerWidth” invece restituisce 120 pixel, poiché vengono aggiunti 10 pixel di padding ad entrambi i lati, infine la funzione “outerWidth” restituisce 140 pixel, poiché ai precedenti vengono aggiunti anche i 10 pixel di bordo ad entrambi i lati.

Abbiamo visto come recuperare le dimensioni di un oggetto, ma le funzioni “width” e “height” permettono anche di impostare larghezza ed altezza degli elementi:

$(document).ready(function(){
	/* conservo l'elemento in una variabile, in modo da richiederlo una sola
	 * volta */
	var $box = $('#box');
	...
	$box.width('200px');
	$box.height('50px');
	console.log("Larghezza finale #box: ", $box.width(), "px");
	console.log("Larghezza interna finale  #box: ", $box.innerWidth(), "px");
	console.log("Larghezza esterna finale #box: ", $box.outerWidth(), "px");

	console.log("Altezza finale #box: ", $box.height(), "px");
	console.log("Altezza interna finale #box: ", $box.innerHeight(), "px");
	console.log("Altezza esterna finale #box: ", $box.outerHeight(), "px");
});

Eseguendo il codice nel browser vedrai che i valori di altezza e larghezza verranno modificati di conseguenza.(Esempio)

I parametri accettati dalle funzioni possono essere numerici, caso in cui vengono considerati come pixel, oppure stringhe (come nell’esempio), caso in cui possono essere utilizzate tutte le unità di misura CSS.

Due elementi particolari: window e document

Le funzioni innerWidth/innerHeight, outerWidth/outerHeight si possono applicare a tutti gli elementi tranne due: window e document. Questo perché non è possibile aggiungere padding e/o bordi a questi due elementi, dunque tali funzioni avrebbero poco senso.

dimensioni document e window, secondo jQuery

È importante capire la differenza tra le dimensioni di window e quelle di document per realizzare : le prime si riferiscono alla parte di finestra visibile del browser (quella compresa tra le barre degli strumenti superiore e inferiore e i limiti laterali della finestra); le dimensioni del document invece si riferiscono all’altezza e alla larghezza del documento html. Nella maggior parte dei casi l’altezza del document è maggiore di quella dell’oggetto window (questo avviene in tutti i casi in cui è necessario scrollare verso il basso per leggere una pagina web) mentre la larghezze spesso corrispondono, poiché si cerca sempre di evitare la comparsa delle scrollbar orizzontali.

Testiamo queste considerazioni con un esempio: prendiamo una pagina con molto testo, abbastanza da far comparire la barra di scorrimento verticale, e utilizziamo il seguente codice per recuperare le dimensioni di window e document:

	$(document).ready(function() {
		var $document = $(document);
		var $window = $(window);

		console.log("Larghezza document: ", $document.width(), "px");
		console.log("Larghezza window: ", $window.width(), "px");

		console.log("Altezza document: ", $document.height(), "px");
		console.log("Altezza window: ", $window.height(), "px");
});

Come puoi vedere, le larghezze di window e document in questa pagina sono equivalenti, mentre l’altezza varia. Se però aggiungiamo questa piccola regola CSS:

p {
	width:9999px;
}

aumentando la larghezza di tutti i paragrafi nelle pagina, puoi notare che le dimensioni di window e document sono tutte diverse.

Conclusioni

Anche se i concetti presentati in questo articolo possono sembrare molto semplici, essi sono parti fondamentali per la creazione di interazioni complesse tra applicazioni e utenti, perciò è bene studiarle in dettaglio.

Nella prossima lezione vedremo come recuperare la posizione di un elemento all’interno del documento, e vedremo come utilizzare queste nozioni praticamente.

Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

13 commenti

Trackback e pingback

  1. Tweets that mention Vuoi imparare jQuery ma non sai da dove iniziare? - Le dimensioni | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by nando pappalardo. nando pappalardo said: RT @YIW Vuoi imparare jQuery ma non…