Question

I’m trying to insert “innerShiv” into this Code:

$(function() {

    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() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                       $mainContent.hide().load(innerShiv(newHash + " #guts"), function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.css({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
   });
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');

});

This doesn’t work yet. Where to put the bracket correctly?

Sources:

http://css-tricks.com/6336-dynamic-page-replacing-content
http://jdbartlett.com/innershiv/

Thank you.

Answer 1

Your problems are mostly syntax issues like incorrect number of closing brackets etc. Try using an editor like Aptana which will highlight these sorts of things for you so you can debug before trying it in a browser. In the meantime I’ve corrected your code.

$(function() {

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() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                   $mainContent.hide().load(innerShiv(newHash + " #guts"), function() {
                $mainContent.fadeIn(200, function() {
                    $pageWrap.css({
                        height: baseHeight + $mainContent.height() + "px"
                    });
                });
});
                    $("nav a").removeClass("current");
                    $("nav a[href='"+newHash+"']").addClass("current");
                });
            };
    });


$(window).trigger('hashchange');

});