I'm trying to work in a script to fade out a div, load content and fade the div back in. But when the navigation links are clicked, the div fades out, then is completely removed from the DOM??
Here's the html:
<head>
<link rel="stylesheet" href="css/styles_default.css" type="text/css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/MyFontsWebfontsKit.css">
<script type="text/javascript" language="javascript" src="js/jquery-2.0.0.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='js/modernizr.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
</head>
<body>
<!-- the beginning background, logo and "menu" link: this disappears to reveal full site //////////////////////////////////////// -->
<div id="full-size-background">
<div id="starting_point">
<img id="start_logo" src="images/logo.png">
<a href="#" id="starting_point_link">MENU</a>
<div id="rotated_text">adsfasdfasdf</div>
</div>
</div>
<!-- MAIN SITE content below //////////////////////////////////////////////////////////////////////////////////////////////////// -->
<?php include 'inc/header5.php'; ?>
<div id="page-wrap">
<section id="main-content">
<div id="main_center_box">
<!-- here's where content should load, but the main_center_box div completely disappears -->
<?php include 'inc/include_at_start.php'; ?>
<?php include 'inc/footer.php'; ?>
</div>
</section>
</div>
<a id="walsh_link" href="http://www.thewalshgroup.ca/" target="_blank">POWERED BY THE WALSH GROUP </a>
<script type="text/javascript" language="javascript" src="js/functions4.js"></script>
</body>
</html>
the dynamic page script: for this:
$(function() {
if(Modernizr.history){
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});
function loadContent(href){
$mainContent
.find("#main_center_box")
.fadeOut(600, function() {
$mainContent.hide().load(href + " #main_center_box", function() {
$mainContent.fadeIn(500, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
console.log(href);
$("nav a[href$="+href+"]").addClass("current");
});
});
}
$(window).bind('popstate', function(){
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(_link);
});
} // otherwise, history is not supported, so nothing fancy here.
});
and the functions.js, if it's relevant to the problem:
$(document).ready(function() {
// code for random backgorund image on page load
$("#full-size-background").css("background-image", "url(images/backgrounds/" + Math.floor(Math.random()*3) + ".jpg)");
// starting point fade when "menu" clicked
$("#starting_point_link").on("click", function(){
$('#starting_point, .places-slideshow,#full-size-background').stop().animate({ opacity: 0 }, 1400, function() {
$('#starting_point').css({display:"none"});
$('#main_center_box').css({zIndex:"1"});
$('.header_content, #main_center_box').css({display:"block"}).stop().animate({ opacity: 1 }, 800, function() {
// $(' #main_center_box').load('include_at_start.php');
$('#main_center_box2').stop().animate({ opacity: 1 }, 700, function() { /* animation complete */ });
$('.places-slideshow').stop().animate({ opacity: 1 }, 2100, function() { /* animation complete */ });
});
$("#starting_point_link").attr('class','visited');
$("#full-size-background,.header_content").css('opacity','0').css("background-image", "url(images/BG1a.jpg)");
$('#full-size-background').stop().animate({ opacity: 1 }, 700, function() { /* animation complete */ });
$('.header_content').stop().animate({ opacity: 1 }, 800, function() { /* animation complete */ });
});
});
// function for navigation clicks
// researching deeplinking solutions
// end resesarching deeplinking solutions
$('.slider .slide:eq(0)').addClass('active').fadeIn(200);
$('.slider-nav li a').click(function() {
var index = $(this).parent().index('li');
$('.slider .slide.active').removeClass('active').fadeOut(200, function() {
$('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
});
return false;
});
$('.slide').click(function() {
if($(this).hasClass('active')){
$(this).removeClass('active').fadeOut(200, function() {
if($(this).is(':last-child')){
$('.slider .slide:first-child').addClass('active').fadeIn(200);
}else{
$(this).next().addClass('active').fadeIn(200);
}
});
}
});
// 'scroll to' code
$('.portfolio_links').live('click', function(){
var whichTag = $(this).attr('id');
val = whichTag.split("_");
thisTag = "#position_"+val[1];
$('html, body').animate({scrollTop: $(thisTag).offset().top - 100}, 2000);
});
}); // document ready ending brackets
// the form label controls
(function($) {
function toggleLabel() {
var input = $(this);
setTimeout(function() {
var def = input.attr('title');
if (!input.val() || (input.val() == def)) {
input.prev('span').css('visibility', '');
if (def) {
var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
dummy.remove();
}
} else {
input.prev('span').css('visibility', 'hidden');
}
}, 0);
};
function resetField() {
var def = $(this).attr('title');
if (!$(this).val() || ($(this).val() == def)) {
$(this).val(def);
$(this).prev('span').css('visibility', '');
}
};
$('input, textarea').live('keydown', toggleLabel);
$('input, textarea').live('paste', toggleLabel);
$('select').live('change', toggleLabel);
$('input, textarea').live('focusin', function() {
$(this).prev('span').css('color', '#000');
});
$('input, textarea').live('focusout', function() {
$(this).prev('span').css('color', '#fff');
});
$(function() {
$('input, textarea').each(function() { toggleLabel.call(this); });
});
})(jQuery);