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

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.

Condividi Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on Tumblr

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

Licenza

Creative Commons License
This Web Site by Fabio Donatantonio is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.
Fabio Donatantonio - Salerno - Città di Castello (PG) - fabio@donatantonio.net



Chiudi tra 5 secondi...