Hello,
I’m working on a site where multiple pages are nested within one page. The reason for it is that there will be an audio background and therefore the page cannot be refreshed.
The pages are in fact divs that are called upon via the hide/reveal function.
So far so good.
Now, there are navigation links on the homepage linking to various pages. Since the homepage cannot reload however, yet the user should be able to share the site’s various URLs, there has to be a change in the URL corresponding to each page.
I prefer not to use hashtags (aka sections on the page) but to add an ‘appendix’ (/page1, /page2) for each page.
I know that it can be done via custom code (and has been done for an award-winning Webflow site), via the history.pushstate function.
Here’s the read-only link to my test site: Webflow - Brand New Test Site
Here’s the code I’ve tried to implement based on the structure of my homepage for one of the links:
<script>
jQuery(document).ready(function(){
function processAjaxData(response, urlPath, filename){
document.title = response;
window.history.pushState(filename,response, urlPath);
}
jQuery( ".link1" ).on( "click", function(e) {
e.preventDefault();
processAjaxData('about', '/home/about', 'about');
}
</script>
Plus, I have added according id’s for my links: “link1”: etc.
What am I missing that it doesn’t work?
I know that Dave @cyberdave had huge success in calling in content form a different page using Ajax (https://webflow.com/website/ajax-content-load) so maybe he could help out?
In fact, an ideal solution would be to load the content of an entire extra page without refreshing the homepage using Ajax like Dave did for partial sections, while changing the URLs at the same time. He provided us with a cloneable page which is great but unfortunately no custom code.
I know I’m not alone on this and a lot has been talked about this on Webflow forums (like tabs having their own URLs and loading content form another page) but neither code has worked for me, plus there’s no solution offered for actually changing URLs without reload in Webflow.
I would really appreciate any help on that.
Thank you in advance,
