I'm currently facing a challenge when it comes to managing the Browser's History. While plugins like History.js can be helpful for smaller tasks, I find myself struggling with more complex scenarios. Let me provide an example:
Imagine I have a multipart form that guides users through different sections. Each time they submit their information and move to the next page (essentially changing the view based on HTTP-POST variables), there are various animations and updates happening on the page:
- The main content transitions to the next form using slideUp/slideDown effects
- The progress bar animates to reflect the current state
- Additional information related to some of the input fields fades in below the progress bar
While this setup seems simple at first glance, I'm finding it challenging because each animation (especially the last two parts) is unique to the specific state, involving different elements and input sources. I'm unsure how to create a generic solution that doesn't require specifying each one separately.
Furthermore, I encounter difficulties when users navigate back using the browser's back button. I need to reverse all those animations and updates, which adds another layer of complexity. The content retrieval isn't problematic as it involves simply reloading the file via ajax-load:
- Upon submission, I use `pushstate` to store the input data as `stateObj`
- This allows me to trigger the content reload within the 'statechange' event listener
Despite these efforts, handling the rest of the functionality drives me crazy.