These codes consist of two parts - the first part operates only on the #logo page.
$('#logo').on('click', function() {
// Retrieve home information
$.get('ajax.php', {page: 'home'}, function(data) {
result = $.parseJSON(data);
// Reset background
$('#content-area').backstretch(result.background);
// Reset navigation
$('.current_page_item_green').removeClass('current_page_item_green');
$('.current_page_item').removeClass('current_page_item');
$('.nav-link').each(function() {
$(this).removeClass('green');
});
// Fade out the footer
$('#footer-row').fadeIn();
// Reset copy
$('#subnav').html('');
$('#home-copy').html(result.copy);
// Reset sizes and colors
$('#home-logo').animate({height: 200}, 0);
$('#home-copy').animate({height: 200, backgroundColor: '#004329', color: 'white', paddingTop: 0}, 0);
});});
The second part handles the left pages.
$(document).on('click', '.nav-link-ajax', function() { handleAjax($(this));});function handleAjax(eBtn) {
// Get the page we want
getPage = eBtn.attr('href');
// Make AJAX call
$.get('ajax.php', {page: getPage}, function(data) {
result = $.parseJSON(data);
// Fill in new page
$('#subnav').html(result.subnav);
$('#home-copy').html(result.copy);
// Calculate document height and adjust content boxes accordingly
docHeight = [$(document).height()-($(document).height()*.15)]-200;
// Change height of content boxes
$('#home-logo').animate({height: docHeight}, 0);
$('#home-copy').animate({height: docHeight, backgroundColor: 'white', color: 'gray', paddingTop: 0}, 0);
// Fade out the footer
$('#footer-row').fadeOut();
// Change background
$('#content-area').backstretch(result.background);
// Clear old nav
$('.current_page_item_green').removeClass('current_page_item_green');
$('.current_page_item').removeClass('current_page_item');
// Update navigation
if (result.nav_color == 'green') {
// Add green
$('.nav-link').each(function() {
$(this).addClass('green');
});
$(result.current_page_item).addClass('current_page_item_green');
} else {
$('.nav-link').each(function() {
$(this).removeClass('green');
});
$(result.current_page_item).addClass('current_page_item');
}
});}
Upon returning to the logo page after visiting other webpages, there are extra spaces on the bottom and right side. It appears that the background size of the logo page is following the background of the previously visited webpage. How can I resolve this issue? Thank you.