Nuovo appuntamento con un semplice ma altrettanto utile Tutorial jQuery per inserire il footer nel posto giusto senza aver problemi di vederlo salire a suo piacimento grazie a Sticky Footer jQuery. Vi è mai capitato di litigare con il footer del sito su cui state lavorando, che non vuole saperne di stare sul fondo del layout che avete disegnato con tanta cura? jQuery ci viene incontro con uno script sintetico e facile da utilizzare.
In linea generale, utilizzare il Css Sticky footer può essereun buon modo per sistemare un footer bizzoso. Se il problema persiste, possiamo appunto risolverlo con l’intervento di jQuery.
Assicuratevi innanzitutto che l’id #footer sia l’ultimo elemento visibile nel <body> della vostra pagina, con il seguente Html:
<div id="footer">Sticky Footer</div>
Quindi nel Css, che sia in linea o esterno, scriviamo:
#footer { height: 100px; }
Una volta caricata la pagina, viene controllato se il contenuto sia più corto dell’altezza della finestra. In questo caso, c’è uno spazio bianco al di sotto del contenuto prima della fine della pagina, affinchè il footer possa essere riposizionato alla base di essa. Se così non fosse, il footer può mantenere la sua normale posizione statica. Inseriamo dunque il seguente javascript nell’<head>:
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
Se anche questo metodo non dovesse funzionare (sono possibili conflitti con altri plugin come MooTools o Prototype), proviamone un altro a prova di bomba. Inserite nell’<head> il seguente codice:
<script type="text/javascript">// <![CDATA[
$(function(){
$("#footer").positionFooter(true);
});
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function($){
$.fn.positionFooter = function(center){
var element = this;
var originalPosition = $(element).offset();
var originalTopPosition = originalPosition.top;
positionTheFooter();
$(window).bind("resize", function(){
positionTheFooter();
});
function positionTheFooter(){
var elementPosition = $(element).offset();
var elementPaddingTop = $(element).css("padding-top");
var elementPaddingBottom = $(element).css("padding-bottom");
var elementPaddingleft = $(element).css("padding-left");
var elementPaddingRight = $(element).css("padding-right");
var elementHeight = $(element).height();
var elementWidth = $(element).width();
var windowHeight = $(window).height();
var windowWidth = $(window).width();
elementPaddingTop = elementPaddingTop.replace(/px/,"");
elementPaddingBottom = elementPaddingBottom.replace(/px/,"");
elementPaddingleft = elementPaddingleft.replace(/px/,"");
elementPaddingRight = elementPaddingRight.replace(/px/,"");
var newPosition = (parseInt(windowHeight) - (parseInt(elementHeight) + (parseInt(elementPaddingTop) + parseInt(elementPaddingBottom))));
var currentPosition = elementPosition.top - (parseInt(elementHeight) + (parseInt(elementPaddingTop) + parseInt(elementPaddingBottom)));
if(originalTopPosition < windowHeight){
$(element).css({
"position" : "absolute",
"top" : newPosition
});
if(center == true){
$(element).css({
"left" : windowWidth / 2 - (((elementWidth + parseInt(elementPaddingleft) + parseInt(elementPaddingRight)) / 2))
});
}
}
if(newPosition <= originalTopPosition){
$(element).css({
"position" : "absolute",
"top" : originalTopPosition
});
if(center == true){
$(element).css({
"left" : windowWidth / 2 - (((elementWidth + parseInt(elementPaddingleft) + parseInt(elementPaddingRight)) / 2))
});
}
}
};
};
})(jQuery);
// ]]></script>
Richiamate l’id nel <body>:
<div id="footer">Lorem ipsum</div>
Nella seguente riga, stabilite se posizionare il contenuto del footer a destra (right), sinistra (left) o centro (center). Al momento si trova a destra (right).
if(center == true){
$(element).css({
"right" : windowWidth / 2 - (((elementWidth + parseInt(elementPaddingleft) + parseInt(elementPaddingRight)) / 2))
});
Alla prossima!
