searching for a sort of "reverse" AJAX-IE: is this possible?

Question

Hi folks, I have a web-app that is a sort of calendar application and there are several tabs across the top. I currently have those tabs open to new pages so the users back button still works as expected.

I recently integrated a "help" box that is a div that is within the header and remains constant through all pages. Within that help box, the user can click a button and step-by-step instructions guide the user through functionality of the site.

The problem is whenever the user needs to click the tabs to get to a new page (per the step-by-step guide) that box resets itself and the user would need to reclick the button to continue on with the instructions.

I was considering making the tabs AJAX based, but that would break the back button, and I think that would be worse for the user experience.

Is there some way to have the help box be handled with session data or something like that to have it maintain it's state as new pages are served?

The help box is currently a div in the header and is using jQuery for some fade effects, etc:

<div class="helpbox">
     <h2 class="title2a adjust"><a class="nodecoration" href="javascript:animatedcollapse.toggle('collapse1')">Quick Start</a></h2>
     <div id="collapse1" class="helpbox2">

              <ul id="helpbo">
                  <li class="helpchange"><a href="#">Add Items</a></li>
                  <li class="helpchange"><a href="#">Create Timeline</a></li>
                  <li class="helpchange"><a href="#">Set Reminder</a></li>
                  <li class="helpchange"><a href="#">Detailed Help Topics</a></li>
              </ul>
              <hr class="ninetypercent"></hr>

              <div class="instructions helpitems" id="animators">
                <div class="container"><ul>
                <li>Make sure the <b>Monthly</b> tab is highlighted on the top right of the screen.</li>
                <li>Click on the day that you want to add an event.</li>
                <li>You can create a main event-which you can apply a timeline to, or you can create a simple to-do item.</li>
                <li>Fill in the details.  If you are creating a main event, you can add a timeline.  If you don't know how to do that, read the <b>Create Timeline</b> help link above.</li>
                <li>Click <b>Save</b> when you're done.</li>
                <li>Your event or to-do will now show up in your calendar.</li>

                  </ul></div>

                  <div class="container"><ul>
                  <li>Click on the <b>Admin</b> tab on the top right of the screen.</li>
                  <li>In the main display, next to <b>Manage</b> click <b>Add Timeline</b></li>
                  <li>A new blank timeline template will appear.</li>
                  <li>Give a descriptive title of your timeline. You can always go back and edit things later if you need to.</li>
                  <li>The first column, <b>Days From Event</b>, is the number of days before or after the main event that you want the to-do item to happen.  It must be a number-negative numbers for the days before the event and positive number for days after the event.</li>
                  <li>Fill in the <b>Days From Event</b>, the <b>Title</b> and <b>Description</b> of each to-do item you want to create.</li>
                  <li>Click <b>Add More To-Do Items</b> to add another item.  Add as many items as you need.</li>
                  <li>If you have added <b>Team Members</b>, you can assign tasks to members in the <b>assigned to</b> column.</li>
                  <li>When you have finished your new timeline, click <b>Save Timeline</b>.</li>
                  <li>Your new timeline is now ready to be applied to your main events</li>
                  </ul></div>

                  <div class="container"><ul>
                  <li>You can set a reminder for a main event or a to-do item.</li>
                  <li>Make sure the <b>Monthly</b> tab is selected on the top right of the screen.</li>
                  <li>First, <b>Create or Select</b> the event that you want to set a reminder for.</li>
                  <li>If you have selected an existing event, click <b>Edit Event</b>.</li>
                  <li><b>Click</b> the <b>Checkbox</b> next to the word <b>Reminder</b>. </li>
                  <li>Set the date and time you'd like your reminder, and you'll get an email reminder then.</li>

                  </ul></div>

                  <div class="container"><ul>
                                    <li>For more detailed help on specific features, please click on the <b>Help</b> tab at the top right of the screen.</li>
                                    <li>There, you will find several <b>Tutorial Videos</b> That can walk you through more of the complex features.</li>

                  </ul></div>


              </div>
            <div class="closebutton">
                 <a href="javascript:animatedcollapse.toggle('collapse1')">close</a>
            </div>


      </div>
</div>

Answer 1

Three possible solutions off the top of my head:

• The help box could be a frame so other navigation doesn't affect it
• The help box state could be saved/restored with an onLoad/unload handler or link-clicked handler (yes, watch the back button)
• Clicking the help box could make a request to the server that would set a session variable causing it to remain open for future page loads