I'm working on my organization's website, which has a history section with individual pages for each date. Currently, when a user clicks on a date like '5th September 1991', it takes them to a new page. I want to change this so that when they click a date, the content for that date loads within the same page, allowing users to click a 'next day' button to load another date's information without reloading the entire page. I've done some searching online but haven't found a clear answer. Do I need to use JavaScript for this, or could I do it with PHP instead?
4 Answers
It sounds like what you're looking for is using iframes to load content without navigating away from the main page. This approach allows you to keep a consistent layout while swapping out the content inside the iframe when a date button is clicked. You can find more about this on [W3Schools](https://www.w3schools.com/html/html_iframe.asp).
Your approach really depends on what you're aiming for. If you want a consistent layout across all pages, you might want to consider using PHP includes to share a header/footer or using JavaScript to dynamically change content within an iframe. If you're focusing on loading speed and avoiding full-page reloads, AJAX is your friend! It can load only the new content without refreshing the entire page. Also, there are methods like prefetching that can improve performance significantly.
That's a solid breakdown! Just make sure whatever method you choose aligns with how you want the user experience to flow.
Just a thought, but the question seems to diverge from the title. You mention iframes, yet your main concern is about maintaining page structure with JS fetch or SPA routing.
This sounds like a more complex web app scenario. Maybe you should look into Progressive Web Apps (PWA) or even setting up a system with slides for each date.
I think an iframe is a good choice if you want to keep things simple. But just keep in mind, if you want to dive deeper, there are more robust methods that require querying data and rendering it based on user actions, which can be a bit more complex than using an iframe.