0

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);

Edited by turpentyne

2
Contributors
1
Reply
9
Views
4 Years
Discussion Span
Last Post by iamthwee
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.