I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing the 'guts' section. The script also updates the URLs accordingly.
While this setup works smoothly on most desktop browsers, I've encountered issues on mobile devices. Despite the content fading in and out, the correct content doesn't load, and the URL fails to update.
As a beginner, I suspect there might be a syntax error causing the problem. Any assistance would be greatly appreciated. Thank you.
Visit Working Page:
My Implementation:
$(document).ready(function() {
var newHash = "",
$mainContent = $("#content-wrap"),
$el;
$("#menu a").click(function(event) {
event.preventDefault();
var _link = this.href;
$mainContent
.fadeOut(1000, function() {
$mainContent.hide().load(_link + " #guts", function() {
$mainContent.fadeIn(1000);
window.history.pushState(null, null, _link);
$(window).trigger("pathchange");
});
});
return false;
});
});