Grow your CSS skills. Land your dream job.

CSS Tricks DocTemplate – back button doesn’t work

  • # January 15, 2013 at 1:04 pm

    Hi, I’m trying to use the CSS Tricks DocTemplate found [here](http://css-tricks.com/examples/DocTemplate/ “http://css-tricks.com/examples/DocTemplate/”) but the back button doesn’t work. The hash is updated in the url everytime you click a link however nothing happens when you click back. Would anyone know how to fix this problem? Thanks, Michael

    Heres the js for it:
    $(function() {

    var $el = $(),
    $mainContent = $(“#main-content”);

    // Used for fading out the content while leaving whiteness/main content area along
    $mainContent.wrapInner(“

    “);

    // add in AJAX spinning graphic (hidden by CSS)
    $mainContent.append(‘‘);

    var $fadeWrapper = $(“#fade-wrapper”),
    $allNav = $(“#main-nav a”),
    $allListItems = $(“#main-nav li”),
    url = ”,
    liClass = ”,
    hash = window.location.hash,
    $ajaxLoader = $(“#ajax-loader”);

    // remove ID, which is used only for nav highlighting in non-JS version
    $(“body”).attr(“id”, “”);

    // If, when the page loads, it has a #hash value in the URL
    if (hash) {
    hash = hash.substring(1);
    liClass = hash.substring(0,hash.length-4);
    url = hash + ” #inside-content”;
    $fadeWrapper.load(url);
    $(“.” + liClass).addClass(“active”);
    } else {
    // No hash tag present, so make the first item in the nav the active nav
    $(“#main-nav li:first”).addClass(“active”);
    }

    $allNav.click(function(e) {

    $el = $(this);

    // Only proceed with the AJAX nav if the click is the non-current page
    if (!$el.parent().hasClass(“active”)) {

    // Scroll the page up (mostly so they can see the spinner graphic begin)
    $(window).scrollTop(0);

    url = $el.attr(“href”) + ” #inside-content”;

    $fadeWrapper.animate({ opacity: 0.1 });
    $ajaxLoader.fadeIn(400, function() {

    $fadeWrapper.load(url, function() {

    window.location.hash = $el.attr(“href”);

    $fadeWrapper.animate({ opacity: 1 });
    $ajaxLoader.fadeOut();

    });

    $allListItems.removeClass(“active”);
    $el.parent().addClass(“active”);

    });

    }

    // Make sure the links don’t reload the page
    e.preventDefault();

    });

    });

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".