So, I'm incredibly green with php, ajax, and anything javascript. I've put this site together through various tutorials and hackneyed methods of making things work. However, I've hit a pretty big snag with two problems revolving around URLs.
I have no idea how to properly bind something using the back button to the action that happens when a post is clicked.
Sub-urls go straight to the post content (single.php), instead of the index template with the content pulled up.
Now, here is my code. I'm sure there are a million things wrong with it.
(function($) {
$(function($) {
$(".post-link").click(function loadContent(){
$(this).parent().addClass('fullscreen');
$('.close').toggleClass('closeactive').removeClass('close');
$(".back, .next").show();
$('body').addClass('noscroll');
});
$(document).ready(function(){
$.ajaxSetup({cache:false});
$(".post-link").click(function(e){
var post_link = $(this).attr("href");
$(this).siblings('#single-post-container').html("content loading");
$(this).siblings('#single-post-container').load(post_link);
window.history.pushState('object', 'New Title', post_link);
e.preventDefault();
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
$(this).parent().removeClass('fullscreen');
};
return false;
});
});
});
Basically, what's happening is a lot of css and an ajax call. I'm not entirely sure I'm going about it right, but it functions pretty well. You can see it implemented on my site www.andbloom.com. Any help would be greatly appreciated!