Home › Forums › JavaScript › CSS Tricks DocTemplate – back button doesn’t work
- This topic is empty.
-
AuthorPosts
-
January 15, 2013 at 1:04 pm #42010
michaeloneill
MemberHi, I’m trying to use the CSS Tricks DocTemplate found [here](https://css-tricks.com/examples/DocTemplate/ “https://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();});
});
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.