Hi,
I am creating a website with all the pages on a single HTML file. To make the website change page from the navigation I have used this jQuery code:
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("#navlist a").click(function(e){
var pageState = {};
e.preventDefault();
changePage(e.target.hash, 'fade');
$("#navlist").attr("className", e.target.hash.slice(1));
});
$(".menu a").click(function(e){
var pageState = {};
e.preventDefault();
changePage(e.target.hash, 'fade');
$(".menu a").attr("className", e.target.hash.slice(1));
});
$(".homenav a").click(function(e){
var pageState = {};
e.preventDefault();
changePage(e.target.hash, 'fade');
$(".homenav a").attr("className", e.target.hash.slice(1));
});
});
window.addEventListener("popstate", function(event) {
if(!event.state){
return;
}
// Transition back - but in reverse.
transition(
event.state.page,
event.state.transition,
!event.state.reverse
);
pageState = {
state: {
page: event.state.page,
transition: event.state.transition,
reverse: event.state.reverse
},
title: "",
url: event.state.page
};
}, false);
function changePage(page, type, reverse) {
// Store the transition with the state
if(pageState.url){
// Update the previous transition to be the NEXT transition
pageState.state.transition = type;
if(Modernizr.history)
window.history.replaceState(
pageState.state,
pageState.title,
pageState.url);
}
// Keep the state details for next time!
pageState = {
state: {
page: page,
transition: type,
reverse: reverse
},
title: "",
url: page
};
if(Modernizr.history)
window.history.pushState(pageState.state, pageState.title, pageState.url);
// Do the real transition
transition(page, type, reverse);
}
function transition(toPage, type, reverse){
var toPage = $(toPage);
var fromPage = $("#pages .current");
var reverse = reverse ? "reverse" : "";
if(toPage.hasClass("current") || toPage == fromPage) {
return;
};
toPage.find(".back").toggle(true);
if (!Modernizr.cssanimations) {
toPage.addClass("current");
fromPage.removeClass("current");
return;
}
toPage.addClass("current " + type + " in " + reverse);
toPage.bind("animationend webkitAnimationEnd", function(event){
fromPage.removeClass("current " + type + " out " + reverse);
toPage.removeClass(type + " in " + reverse);
$(this).unbind(event);
});
fromPage.addClass(type + " out " + reverse);
}
However, although this works when clicking navigation that it is text, it does not work for icons/pictures.
Please can anyone tell me how to amend the code to do so??
Thanks :)