So I am working on this project and the general goal is to click on a team member have them slide in from the side (secretly load their individual team page on top of that slideout so we switch URLs for SEO purposes etc.) and then have them click in the dead space to the left to go back to previous page where they were.
In general I have much of it working the issue is that when the space to the left is clicked the following code is triggered (placed in the of the page) it is triggered via a link `javascript:delayBack():
<script>
function delayBack() {
setTimeout( function() { history.back(1); }, 600 );
</script>
This allows time for the slideout to slide back and then go to the main team page (their previous page); however, that page seems to still be stuck where the previous animation on that page last was which is with the slideout (a paired down version with minimal text) showing on the screen. I have tried adding this code to force the page to reload when the back button is clicked to get to the page:
<script>
(function () {
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
})();
</script>
It works to reload the page but it is so delayed that the user sees the slideout then flickers back to the page without it. Any thoughts or insights into the whole process would be appreciate and yes I know it would be much easier to not have to switch URLs and just do all the content etc. on the main team page for each individual team member but that is sadly not the goal.
Thank you in advance!
Here is my public share link: LINK
(how to access public share link)