Tag: div sempre al centro pagina

Div al centro che segue lo scrolling  

realizzato da , il 13 ott. 2010, categoria Javascript

Javascript
Aumenta font Riduci font Stampa articolo Invia articolo Condividi su Twitter

In un articolo di un pò di tempo fa, si è visto come centrare con CSS/Javascript un div al centro della pagina.
L’obiettivo di questo nuovo articolo è far si che il div venga visualizzato sempre al centro della finestra, anche qualora l’utente fa lo scrolling della pagina.
Il div in questione seguirà l’utente, restando effettivamente sempre al centro della pagina. Potremo utilizzare questa tecnica per inserire un messaggio o un immagine in evidenza nel nostro sito oppure un banner.

Realizzeremo una sola funzione che chiameremo appunto: centra().
Per rendere più efficiente il nostro codice Javascript utilizzeremo il framework JQuery così saremo quantomeno sicuri che il risultato finale sia adeguato per la maggior parte dei browser in circolazione. Comunque il suo uso sarà minimo e non richiede particolari conoscenze.
In fondo all’articolo è possibile provare o scaricare il codice completo.

Vediamo quindi il codice della funzione Javascript:

<script type='text/javascript'>
function centra(div){
	var DIVwidth = $(div).width();	
	var DIVheight = $(div).height();
	var SCREENwidth = $(document).width();
	var SCREENheight = $(window).height();	
	var SCREENscrolltop = $(window).scrollTop();
	$(div).animate({   
		top: (SCREENheight-DIVheight)/2+SCREENscrolltop+"px",
		left: (SCREENwidth-DIVwidth)/2+"px"
	},100,function(){
        centra(div);
    });	 
}
</script>

La funzione una volta richiamata calcola larghezza e altezza del div da centrare, quindi larghezza e altezza della finestra del browser e la quantità di scroll effettuato (scrollTop()).
Il div viene successivamente animato impostando i due nuovi valori per le proprietà top e left.
Dove top sarà dato da: (altezza finestra – altezza div)/2 + scroll
Mentre left sarà dato da: (larghezza finestra – larghezza div)/2
La funzione viene poi richiamata ad intervalli regolari(di default 100 ms) per ricalcolare il posizionamento.
Infine per invocare la funzione, su un ipotetico div con id=’box_centrale’, è necessaria la seguente sintassi:

<script type='text/javascript'>
centra('#box_centrale');
</script>

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.


Leave a Comment
Invia questo articolo Invia ad un amico (Send this to a friend)
 Stampa questo articolo (Print now)  Stampa questo articolo (Print now)
:, , , ,
Ti è piaciuto? Ti è piaciuto quest'articolo, guida o riflessione? Scoprine tanti altri nel menu articoli.




Torna sopra ↑


Spazio Pubblicitario

Archivio

ottobre: 2014
L M M G V S D
« ago    
 12345
6789101112
13141516171819
20212223242526
2728293031  
Fabio Donatantonio - Salerno - Città di Castello (PG) - fabio@donatantonio.net



About me

Fabio Donatantonio Fabio Donatantonio nasce a Salerno il 17 Settembre 1983.
Cresce coltivando due grandi passioni: la musica e l'informatica.
... [continua]

Bing

Tutti gli articoli per categoria

Html/Css [35]

· CSS: pseudo-classi e pseudo-elementi
· CSS: selettori speciali
· CSS: i selettori (parte II)
· CSS: i selettori (parte I)
· CSS: sintassi di una regola CSS
· CSS: introduzione ai fogli di stile
· Html: bordi, margini e spaziatura
· Html: dimensione degli elementi
· Html: i colori e gli sfondi
· Html: altri campi di input
· Html: checkbox e radio button
· Html: le select
· Html: ulteriori campi di testo
· Html: i bottoni
· Html: i form
· Html: unione di celle
· Html: le tabelle
· Html: immagini come link e mappe
· Html: allineamento delle immagini e altri attributi
· Html: le immagini
· Html: realizzare un menu (esercizio guidato)
· Html: i segnalibri
· Html: i collegamenti ipertestuali
· Html: annidamento, indentazione e commenti
· Html: le entità
· Html: separatori ed elenchi
· Html: stile per il testo
· Html: i tag di uso frequente
· Validazione del codice HTML
· Il tag HTML, HEAD e META
· I documenti HTML
· Html: concetti preliminari
· Regole di progettazione ipertestuale
· Tipologie di Ipertesto
· Ipertesti, ipermedia e multimedialità

Java [30]

· Esercizio 30 – Semplice gioco del TRIS
· Esercizio 29 – Simulazione banca (ArrayList)
· Esercizio 28 – Implementazione di un portafoglio
· Esercizio 27 – Simulazione Casinò
· Esercizio 26 – Ricerca e conteggio di parole
· Esercizio 25 – Generatore numeri primi
· Esercizio 24 – Generatore numeri di Fibonacci
· Esercizio 23 – Triangolo con asterischi
· Esercizio 22 – Tasso di cambio
· Esercizio 21 – Serratura
· Esercizio 20 – Simple Calendario
· Esercizio 19 – Ordine lessicografico
· Esercizio 18 – Stampa stringa in base ad input
· Esercizio 17 – Numeri in virgola mobile (ordinamento)
· Esercizio 16 – Nomi dei mesi
· Esercizio 15 – Stampa al contrario
· Esercizio 14 – Erogazione del resto
· Esercizio 13 – Calcola quadrato
· Esercizio 12 – Simulatore lancio dado
· Esercizio 11 – Contatore di monete
· Esercizio 10 – Cartoline con testo fisso
· Esercizio 9 – Popolazione scarafaggi
· Esercizio 8 – Voto medio studente
· Esercizio 7 – Distributore di bibite (simple version)
· Esercizio 6 – Gestione conto bancario (con interessi)
· Esercizio 5 – Classe Rectangle
· Esercizio 4 – Cliente e gestione Conto Bancario
· Esercizio 3 – Realizzazione di Classi (Punto – Rettangolo)
· Esercizio 2 – Menu di scelta (istruzione if)
· Esercizio 1 – Modifica di stringhe

JavaScript [33]

· tScroll (tabella con scroll) – Plugin jQuery
· Finestra news con effetto fade (news ticker) – v 2.0 news da file esterno
· toolTitle (simple toolTip) – Plugin jQuery
· Number_format Javascript
· Testo animato: macchina da scrivere
· Str_replace Javascript
· Maxlength textarea
· tZebra (tabella zebrata) – Plugin jQuery
· JQuery, il metodo .remove()
· JQuery, il metodo .text()
· JQuery, il metodo .html()
· JQuery, il metodo .val()
· Ricerca in tabella html
· News a scorrimento (news ticker)
· Finestra news con effetto fade (news ticker)
· Div al centro che segue lo scrolling
· Aggiungere righe a tabella in maniera dinamica
· Presentazione di diapositive con JQuery
· Presentazione di diapositive temporizzata
· Costruire un orologio con cicli di temporizzazione
· Gestione dei link con Javascript
· Form dinamico – Aggiunta elementi di input
· Controllo importo in Javascript e messaggio di errore
· Div con bordo lampeggiante
· Controllo data in Javascript e messaggio di errrore
· Formattare una data in Javascript
· Finestra popup sempre in primo paino
· Barra di caricamento in Javascript
· Stampare contenuto di un div con Javascript
· Attesa caricamento pagina in Javascript
· Div al centro della finestra del browser
· Ultimo giorno del mese
· Funzione Trim

Chat