The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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]( “”) 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


    // add in AJAX spinning graphic (hidden by CSS)

    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”;
    $(“.” + 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”);

    $ {

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

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





    // Make sure the links don’t reload the page



Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed