I’ve made a site with 4 tabs with all kinds of content in them. Now, if a user clicks on an item an gets taken to that page, when he returns by hitting backspace, the same tab he was on should still be active. How do I achieve this? It’s only possible with cookies, but I’m not advanced enough to pull this off by myself.
I have a couple of ideas about how you could solve this problem, but it would be great if I could see the site in action to get a better picture about what you are trying to do.
Would that be possible?
Could you post a link?
The tabs are NIEUW, TOP, HOT, NOT
A user can click on these to filter the content of the page.
When a user navigates away from this page (for example to “kort”), but then presses the back button in their browser, you want the tab which was last selected to be displayed, whereas at the moment it always defaults to NIEUW
Well yes, it’s actually when a user navigates away from this page by clicking on a video, when they come back it should show the same tab they were looking at, because it would be weird for the user to have to navigate back to the tab. But in essence it’s the same, yes.
Have you thought about using [localstorage()](http://www.jquerysdk.com/api/jQuery.localStorage)?
This HTML5 based API provides the ability to persist named key/value pairs locally within a user’s browser.
Advantage: No plugin necessary. Easy to code.
Disadvantage: Only works in browsers that support HTML 5. Data only persists for the length of the active session.
This would be my preferred solution and a god time to employ progressive enhancement.
If this is something you could imagine using and you need a bit of help with the implementation. Let me know and I’ll code you up a demo.
BTW, you were right. You would have to use a plugin as this functionality isn’t included in jQuery core.
You would create a key value pair in local storage (as you suggest above) and initialize it with a default value.
Then when the user changes tab, you update the key value pair with the value of the current tab.
When the page loads, you will have a method to check if there is anything stored in this key value pair. If there is, it will set the focus to that tab.
Using this method, when a user navigates away from the page, then returns a little later, the browser will remember which tab they were looking at last.
At a glance that looks ok, but I’m just off out now, so I haven’t got time to check the exact syntax.
Why don’t you try it our and let us know how you get on.
I’ll pick this up when I’m back in a few hours.
I’m having a problem with my navigation.
When someone returns from a videopage, yes, the right tab is open. But the styling on my tabs isn’t up to date, yet the styling is based on the class .active (which is the class a tab has when he’s open)… so… wtf? Maybe at the end of my js I need something to check again for which tab is active? How do I solve this?
I can’t really visualize what you mean here.
Could you post me a new link to a page where I can see your problem?
You can add a class to an element in jQuery with addClass(), but I’m guessing you knew that.