jQuery dynamic page breaks other Javascript

Question

I'm using the dynamic page/replacing content technique outlined in this article:

http://css-tricks.com/rethinking-dynamic-page-replacing-content/

However, I'm having trouble with getting other scripts to work. The provided code seems to break all other Javascript (specifically, things like lightbox and some code used for resizing)

Here's the code I'm using from the article.

I have some code that only runs on resize, and that works when the browser is resized. But for some reason the code that should be ran when the site is done loading does not work.

$(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("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(href + " #guts", function() {
                    $mainContent.fadeIn(200, 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.


});

what does it say in the console? do you have Modernizr installed? Are you using Chrome? — chiliNUT, Dec 31 '13 at 21:41

score 2 · Answer 1 · answered Dec 31 '13 at 21:56

We need more information about the other libraries you are loading and what part of the page loading process they are being inserted (<head>, inside <body>, after <body>, inline text, CDN, etc).

But jQuery is not the only API that uses the $ as a shorthand and you may very well have mixed the wrong one in there without doing a no-conflict prevention. I've done that for you here:

(function (window, document, $) {
    if (Modernizr.history === false) return false;
    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el;

    function loadContent(href) {
        $("#guts")
            .fadeOut(200, function () {
            $mainContent.hide()
                .load(href + " #guts", function () {
                $mainContent.fadeIn(200, function () {
                    $pageWrap.animate({
                        height: baseHeight + $mainContent.height() + "px"
                    });
                });
                $("nav a").removeClass("current");
                console.log(href);
                $("nav a[href$=" + href + "]").addClass("current");
            });
        });
    }
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    $("nav").on("click", "a", function () {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });
    window.onpopstate = function () {
        _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
        loadContent(_link);
    };
})(this, this.document, jQuery, undefined);

I also got carried away and replaced your deprecated function calls (.delegate(), .bind()) with the current supported standards (.on() and straight javascript).

A handful of other optimizations/corrections as well. Cheers :)

cactus1 · Answer 2 · 2013-12-31T21:56:47.427

1

I'm pretty sure the dollar sign function overrides the onload handler for the document, which is why your onload function's not running. Move your code into that function and it should run when the page is loaded.

Like, if your code right now is

document.onload=function() {/*stuff here*/};

$(function() {
     /* copy and pasted code here */
});

change it to

$(function() {

     /*your stuff here*/

     /*copy and pasted code here*/
});

Or if you want to keep your peas and carrots separate:

$(function() {
     /*your stuff here*/
});

$(function() {
     /*copy and pasted code here*/
});

edited Dec 31 '13 at 21:56

answered Dec 31 '13 at 21:45

cactus1

629
5
8

not true. the "dollar sign function" is an alias for the `$(document).ready(function ()`, which do not override each other, but are executed sequentially.http://stackoverflow.com/questions/5263385/jquery-multiple-document-ready – chiliNUT Dec 31 '13 at 21:50
If he has his code in the document.onload handler however, this would cause it to break. http://api.jquery.com/ready/ – cactus1 Dec 31 '13 at 21:52
no one uses that anymore, so I didn't think of that. Make your answer mention the difference between `.ready` and `.on( "ready"` so I can take back my downvote. – chiliNUT Dec 31 '13 at 21:54

jQuery dynamic page breaks other Javascript

2 Answers2