I am working on a page with a panel that moves down to become the footer when a tab or any of the menu tabs are clicked and returns to the 'header' when the same tab or the portfolio tab is clicked. My problem is: I don't know how to make this jquery function dynamic based on the size of the users screen. I currently have static values for testing purposes. Any help would be appreciated. Thank you for your time. I have included the code below.
$(function() {
var open = false;
$("#footerSlideButton").click(function() {
if(open === false) {
$('#footerSlideContent').animate({ height: '50px' });
$(this).css('backgroundPosition', 'bottom left');
$('#gallery').css('display','none');
open = true;
} else
{
$("#footerSlideContent").animate({ height: '632px' });
$(this).css('backgroundPosition', 'top left');
$('#gallery').css('display','inline');
open = false;
}
});
$("#1,#2,#3").click(function() {
if(open === false) {
$('#footerSlideContent').animate({ height: '50px' });
$(this).css('backgroundPosition', 'bottom left');
$('#gallery').css('display','none');
open = true;
} else
{
open = false;
}
});
$("#portfolio").click(function() {
if(open === true) {
$('#footerSlideContent').animate({ height: '632px' });
$(this).css('backgroundPosition', 'bottom left');
$('#gallery').css('display','inline');
open = false;
} else
{
open = true;
}
});
});