Tutorial – Sistemiamo il CSSTip #6 con jQuery

13 aprile, 2009 - Tags: css tip, jquery, tutorial, webdesign

Come ha puntualizzato qualcuno (grazie Stefano!) leggendo il CSS Tip #6, può verificarsi il caso che l’elemento contenuto dall’elemento “contenitore” possa essere più alto di questo e di conseguenza ne esca al di fuori. Ovviamente dipende cosa si sta facendo, in alcuni casi si può volere di proposito che questo accada, in altri casi no.

Facendo riferimento al caso in cui questo non sia l’effetto desiderato, vi propongo un modo semplice per sistemare questa cosa con un paio di righe di jQuery. Considerando che la soluzione che vi sto per illustrare è dinamica, può tornare utile anche nel caso l’elemento contenuto non abbia sempre la stessa altezza, per esempio se al suo interno carica contenuti dinamici che cambiano di volta in volta, impedendo cosi di utilizzare un valore fisso di altezza per sistemare il tutto.

Software Richiesto

Tenicamente anche nessuno… html, css e javascript (e jQuery) si possono editare da un “blocco note”, tuttavia utilizzare editor appositi fa risparmiare tempo e energie. Io utilizzo Dreamweaver CS4 che è a pagamento (potete comunque provarlo gratis per 30 giorni), ma potete anche considerare Aptana che oltre ad essere freeware è maggiormente indicato per scripting.

Prerequisiti

Conoscenza di base di HTML e CSS e il tutorial “iniziamo con jQuery”

Argomenti Trattati

Manipolazione delle proprietà CSS di elementi HTML, aggiunta di contenuti a un documento HTML

1. Creiamo la situazione di partenza

Seguendo rispettivamente il CSS Tip #6 e il tuorial “iniziamo con jQuery” fino al passo 2 (compreso), creiamo la situazione iniziale del “problema” per questo tutorial. Se scaricate il file zip in fondo al tutorial, nella cartella “situazione_iniziale” trovate tutti i file gia pronti.

2. Variabili in jQuery

Nel file dei nostri script scriviamo all’interno della funzione principale la seguente riga di codice:

...
var altezza = $("#oggetto").height();
...

Con il termine “var” facciamo sapere al compilatore che stiamo per definire una variabile (se non sapete cos’è una variabile vi rimando alla definizione di Wikipedia); la parola che segue subito dopo è il nome che decidiamo di dare alla nostra variabile, nel nostro caso “altezza” (in generale è consigliabile usare nomi facili da ricordare o pertinenti a quello che si sta facendo per evitare di incasinarsi da soli!); dopo il simbolo “=” definiamo il valore della variabile, nel nostro caso invece di usare un valore fisso gli diciamo di andarsi a ricavare il valore di altezza del div con id “oggetto” usando il selettore jQuery per prendere quel specifico div ( $("#oggetto") ) e leggendone l’altezza ( .height() ), ricordatevi sempre di chiudere ogni riga di codice con il “;”.

3.  Impostiamo l’altezza del contenitore

Grazie alla prima riga di codice abbiamo anche le conoscenze necessarie per scrivere la seconda:

...
$("#contenitore").height(altezza + 20);
...

Selettore jQuery per div con id “contenitore”, e nella proprietà di height (altezza) gli passiamo come valori la variabile creata nella riga prima + 20 pixel, questa è un’aggiunta personale per fare in modo che il contenitore essendo un po’ più alto dell’oggetto contenuto crei un po di bordo, se questa cosa non vi servisse vi basta cancellare il “+ 20″.

4. La prova del 9 con la proprietà “.append”

Nel caso in cui l’altezza del div “oggetto” non sia specificata da CSS ma dipenda proprio dal ciò che c’è al suo interno (nel file zip da scaricare a fine tutorial vedete la cartella “altezza_variabile”), potreste volere usare queste altre due righe di codice per controllarne l’altezza effettiva:

$("body").append("<h3>L'altezza del div rosso e' " + altezza + "</h3>");
$("body").append("<h3>Il Div nero ora ha un'altezza di " +
 (altezza + 20) + "</h3>");

Con “.append” si aggancia un qualcosa all’elemento selezionato, nel nostro caso attacchiamo delle righe di testo formattate con h3 all’elemento body, il codice va inserito tra virgolette “” e usando l’operatore + gli diciamo di aggiungere la variabile “altezza” che abbiamo definito poco prima, quindi il testo risultante sarà la somma del primo pezzo di codice + il valore della variabile altezza + la seconda parte di codice. Nella seconda riga ripetiamo esattamente quello che accade nella prima, tranne che vogliamo vedere il risultato del valore di “altezza” sommato a 20 pixel, l’espressione “altezza + 20″ la mettiamo tra parentesi tonde per fare in modo che venga visualizzato il risultato di quella somma.

Se aprite ora la vostra pagina nel browser vedrete il div “contenitore” che si adatta all’altezza del div “oggetto” (con qualche pixel in più se avete lasciato il +20) e due righe di testo che vi mostreranno il valore dell’altezza di entrambi i div.

Conclusione

Metto a disposizione un file .zip da scaricare che contiene 3 cartelle, una con la situazione iniziale, una con la soluzione ma dove l’altezza del div “oggetto” è definita da CSS  e una con la soluzione ma senza altezza definita per il div “oggetto”. Ogni cartella contiene 4 file:

• - pagina.html – quella che dovrete lanciare per vedere funzionare il tutto e che contiene i due div “protagonisti”
• - stili.css – dove definisco gli aspetti dei due div
• - jquery.js – il file fondamentale per fare girare il nostro script
• - script.js – il file che contiene lo script ottenuto da questo tutorial

Articoli correlati:

• Tutorial: Animare oggetti con jQuery Nel primo tutorial che ho pubblicato tempo fa su jQuery, abbiamo accennata molto velocemente a una funzione che permetteva di animare da codice degli elementi Html, oggi rivedremo quella funzione con un po’ più di dettagli e ne analizzeremo altre...
• Galleria dinamica animata in jQuery – by nightdrops.com Se state smanettando anche voi con jQuery e volete un tutorial breve e veramente efficace su come realizzare una galleria dinamica animata, in stile slideshow, consultate il tutorial realizzato da Carlo Panzi su nightdrops.com (in inglese), per farvi un’idea del...
• iniziamo con jQuery In questi giorni sto seguendo parecchi lavori un po contemporaneamente, e sto iniziando a rendermi conto che in meno di un paio di mesi jQuery è gia diventato uno dei miei strumenti essenziali nel realizzare pagine web interattive. Ho chiaccherato...