Hola a todos.
En este artículo explicaré cómo fijar el pie de página en un sitio de publicación de SharePoint 2010 mediante el uso de jQuery cuando el contenido sea inferior al área de visualización del navegador.
Escenario
Supongamos que tenemos un sitio de publicación de SharePoint 2010, con un diseño que incluye un pie de página (atractivo o no) con opciones, texto, iconos,… y todo lo que se nos ocurra. En caso de que, en alguna de las páginas, el contenido no logre rellenar el área de visualización del navegador, ese pie, en el que tanto hemos trabajado para que se integre en el diseño, se verá inmediatamente después del contenido, dejando un espacio desaprovechado entre él y el pie del navegador.
Solución (jQuery)
En un principio pensé en gestionarlo por mi mismo, pero… dado que SharePoint 2010 hace su propio “resize” de elementos dentro de la página, tuve que buscar información acerca de qué elementos podía tratar. Además, hay que tener en cuenta la Ribbon que es un elemento que puede aparecer o no.
Por lo tanto, he añadido a mi masterpage el siguiente script.
<script type="text/javascript">
jQuery(document).ready(function () {
// on resize
jQuery(window).resize(function (e) {
fixFooterPosition();
});
// on load
fixFooterPosition();
});
function fixFooterPosition()
{
var ribbonH = jQuery("#s4-ribbonrow").height();
var headerH = jQuery("#divHeader").height();
var footerH = jQuery("#divFooter").height();
var windowHeight = jQuery(window).height();
var h = windowHeight - headerH - footerH - ribbonH;
var bodyContainer = jQuery("#s4-bodyContainer");
if (h >= bodyContainer.height())
{
bodyContainer.height(h);
}
else
{
// reseteo de la propiedad height para que se auto ajuste
bodyContainer.css("height","auto");
}
}
</script>
Explicación del script
- Obtener alto de los elementos del área de trabajo: Lo que hago es sumar el tamaño de los elementos que componen el espacio de trabajo de SharePoint, exceptuando el bloque de contenido #s4-bodyContainer de la página. En mi caso, la cinta #s4-ribbonrow, la cabecera de mi sitio #divHeader y el pie de página #divFooter.
- Obtener alto del área de visualización del navegador: Además, obtengo el ato del área de contenido del navegador windowHeight
- Cálculo del alto que debería tener el bloque de contenido de la página #s4-bodyContainer: Esta altura deberá ser igual (salvo algún ajuste) al alto del área de visualización del navegador, menos el alto de los elementos que componen el área de trabajo de la página #s4-ribbonrow, #divHeader, #divFooter
- Establecimiento del alto del bloque de contenido #s4-bodyContainer: Si el alto del bloque de contenido de la página es inferior al resultado de la operación anterior, querrá decir que el pie de la página se mostrará con un espacio entre él y el pie del área de visualización del navegador, luego tendremos que fijar ese algo con el resultado de la operación. En caso de que no sea así, se resetea el valor de la propiedad height para que se auto-ajuste
- Ejecución de la función de fijado del pie de página: Esta función se debe ejecutar en dos situaciónes
- En la carga de la página: Se deja la llamada a la función en la ejecución principal de $(document).ready()
- Cuando se redimensione el navegador: Se maneja el evento “resize” de la ventana del navegador para que siempre que suceda se ejecute la función.
