// Iniciar cuando se termine de cargar la pagina.
$(document).ready(function(){
// Variables para saber el estado de los slide's
var estadoSlideLeft = true;
var estadoSlideBottom = true;
// Variables con los elementos de la pagina.
var contenido = $("#contenido");
var slideLeft = $("#slideLeft");
var slideBottom = $("#slideBottom");
var togglerSlideLeft = $("#togglerSlideLeft");
var togglerSlideBottom = $("#togglerSlideBottom");
var render = $("#render");
// Variables con la medida reservada del slideBottom
var slideBottomHeight = 150;
var slideBottomWidth = 0;
// Variables para las medidas
var windowHeight;
var togglerHeight;
var renderHeight;
// Calcular y aplicar medidas actuales al iniciar.
calcularMedidas();
aplicarMedidas();
// Calcular y aplicar medidas actuales al cambiar el tamaño.
$(window).resize(function(){
calcularMedidas();
aplicarMedidas();
});
// Agregar evento click del toggler la función.
togglerSlideLeft.click( displaySlideLeft );
togglerSlideBottom.click( displaySlideBottom );
// Función para calculas las medidas
function calcularMedidas(){
windowHeight = document.documentElement.clientHeight;
togglerHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
renderHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
slideBottomHeight = (slideBottomHeight - 21);
}
// Función para aplicar las medidas
function aplicarMedidas(){
slideBottom.css( "height", slideBottomHeight + 'px' );
render.css( "height", renderHeight + "px" );
togglerSlideLeft.css( "height", togglerHeight +"px" );
}
// Función para mostrar/ocultar el slideLeft
function displaySlideLeft(){
if( estadoSlideLeft ){
slideLeft.hide();
contenido.css("margin-left", "0");
togglerSlideLeft.addClass("off");
estadoSlideLeft = false;
}else{
slideLeft.show();
contenido.css( "margin-left", slideLeft.width()+'px' );
togglerSlideLeft.removeClass("off");
estadoSlideLeft = true;
}
}
// Función para mostrar/ocultar el slideBottom
function displaySlideBottom(){
if( estadoSlideBottom ){
slideBottomWidth = contenido.height() + parseInt(slideBottomHeight) - 6;
slideLeft.css("height", slideBottomWidth + 'px' );
togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
contenido.css("height", slideBottomWidth + 'px' );
render.css( "height", slideBottomWidth + "px" );
togglerSlideBottom.addClass("offBottom");
estadoSlideBottom = false;
}else{
slideBottomWidth = contenido.height() - parseInt(slideBottomHeight) + 6;
slideLeft.css("height", slideBottomWidth + 'px' );
togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
contenido.css("height", slideBottomWidth + 'px' );
togglerSlideBottom.removeClass("offBottom");
estadoSlideBottom = true;
}
}
});
Mostrar Temas
