Creare un Footer Mac/PC/iPhone/iPad compatibile con jQuery

Mai avuto problemi con i footer? Volete tenere i vostri contatti alla base della pagina indifferentemente dal dispositivo, dal browser e sistema operativo?

Con questo codice e grazie a jQuery ora si può. Rimarrà alla base della vostra pagina ma badate bene, questo codice non tiene il footer sempre visibile bensì lo tiene alla base della pagina nel caso il testo sia poco e scrolla se il testo sarà molto. Il vantaggio? Quando la pagina sarà scarna il piedino con i vostri dati non si alzerà a metà pagina o in cima attaccandosi fastidiosamente al testo ma rimarrà ben impostata alla base della pagina. Se volete una barra sempre visibile allora cercate altri articoli sul web o aspettate che ne parli qui, perché mi sa che presto servirà.

A voi il codice:

<script type="text/javascript">
$(document).ready(function() { 
	positionFooter();
	function positionFooter(){
		var padding_top = $("#footer").css("padding-top").replace("px", "");
		var page_height = $(document.body).height() - padding_top;
		var window_height = $(window).height();
		var difference = window_height - page_height;
		if (difference < 0)
			difference = 0;
			else
			difference-=30

		$("#footer").css({
			padding: difference + "px 0 0 0"
		})
	}
	$(window).resize(function(){positionFooter()})
});
$(document).load(function(){positionFooter()});
</script>

Per i meno esperti per ottenere il risultato ottenuto andrà creato un div o uno span con classe “footer”:

<div class="footer"><p align="center"><a href="https://portapipe.wordpress.com/">Portapipe.wordpress.com</a></p></div>

Con i css poi ve lo personalizzate come preferite.

Ah, dimenticavo! Mantiene anche la posizione in base al ridimensionamento della finestra! Con iPad, ad esempio, se lo ruotate la scritta rimarrà sempre alla base della pagina.

Divertitevi!

Annunci

, , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: