tutorial jquery

Durante la realizzazione del nuovo layout di Space Web Design ho riscontrato alcuni problemi più o meno complessi da risolvere, in questo tutorial ti spiegherò come ho centrato una scritta all’interno di un <div> utilizzando le position e jQuery.

Prima di iniziare dai un’occhiata al risultato finale.

Il Markup iniziale

Per prima cosa includiamo jQuery all’interno della pagina in modo da poter eseguire il codice che vedremo tra qualche paragrafo.

Nel <body> del documento trovi un contenitore dove ho inserito l’immagine che farà da sfondo al titolo che troviamo subito dopo nel markup.

Posizioni e Larghezze con CSS

Il secondo passo da effettuare è la scrittura di qualche riga di CSS per dare stile al documento e per preparare il titolo ad essere spostato.

In questa porzione di codice presta particolare attenzione alle position e ai loro rispettivi valori.

Il posizionamento assoluto rimuove dal flusso del documento il titolo e lo posizionerà in base al primo antenato (anchestor) che avrà una posizione differente da static. Nel codice sopra il primo antenato con posizione differente da static è l’elemento .titleContainer (il contenitore).

Se non dovesse esistere nessun antenato con posizione differente da static l’elemento in posizione assoluta prenderà come riferimento l’elemento radice <html>.

Sottrazione e divisioni con jQuery

Il terzo ed ultimo passo è lo script jQuery che ci permetterà di posizionare centralmente il nostro titolo con precisione nanometrica.

Ho diviso in due funzioni distinte le due operazioni in modo da renderle il codice più leggibile. La funzione alignTop() come si può evincere già dal nome serve a posizionare verticalmente il nostro titolo.

Per prima cosa estrapolo l’altezza del contenitore e del titolo in seguito nell’operazione finale dividerò entrambi i valori per due sottraendoli l’uno all’altro.

Perché dividere per due anche il titolo?

Le coordinate (0,0) di un elemento sono l’angolo superiore sinistro, dividendo a metà la sua altezza queste coordinate cambiano in (0,50) se l’elemento in questione è alto 100px.

La seconda funzione alignLeft() estrapola la larghezza dei due elementi, divide a metà il valore e sottrae la larghezza del titolo a quella del contenitore per avere un perfetto posizionamento centrale.

L’ultima parte del codice chiama le due funzioni nel momento in cui il documento è pronto.

Problematiche e possibili soluzioni

Se il layout alla quale vuoi applicare questo codice è responsive devi sapere che una volta caricata la pagina i valori top e left dell’elemento rimangono invariati, per ovviare a questo problema e centrare l’elemento anche quando la finestra viene allargata o ristretta inserisci questo piccola porzione di codice

Una seconda problematica, potrebbe essere il caricamento dell’immagine troppo lungo. Se al momento del caricamento del documento l’immagine non riempie il contenitore non si ha l’altezza per poter posizionare verticalmente l’elemento. Per ovviare a questo problema basterà utilizzare questa piccola porzione di codice

In pratica prima di attivare le funzioni per il posizionamento verticale ed orizzontale il codice aspetterà l’avvenuto caricamento dell’immagine.

Guarda la demo del tutorial

Conclusioni

Cosa ne pensi? Lo userai in qualche tuo progetto? Fammi sapere