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);
Member Avatar for iamthwee

I've not had a chance to test this, but going on your description it looks like you're removing the class which will REMOVE the dom element. If you just want to fade it then bring it back it I suggest using either .hide() or .fade(). That way the dom element is still there.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.