Saving active tab in a cookie

JavaScript
1

Hi there,

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.

The tabscript:

$('ul.tabs').each(function(){
    var $active, $content, $links = $(this).find('a');

    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active.attr('href'));

    $links.not($active).each(function () {
        $($(this).attr('href')).hide();
    });

    $(this).on('click', 'a', function(e){
        $active.removeClass('active');
        $content.hide();

        $active = $(this);
        $content = $($(this).attr('href'));

        $active.addClass('active');
        $content.show();

        e.preventDefault();
    });
});

I guess…

  • I need this plugin.
  • Add this
$.cookie('active_tab', rel);

after (this)on.click.

  • Use jquery to point the browser to the active tab?

I’m a bit lost.

2

Hi there toiletseat (nice name by the way),

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?

3

Here you go. Thanks for the compliment and the help you might give.

4

No problem :slight_smile:

So, just to understand what you are trying to do:

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

Is that correct?

5

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.

6

Ah ok.
Some wonderful videos there, by the way.

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.

Otherwise, if you really want to use cookies I can code you up a demo for that, too.
BTW, you were right. You would have to use a plugin as this functionality isn’t included in jQuery core.

7

Well, Localstorage really does look interesting! I’d be happy to go with that.

So, if I try to break this down:

  • I should be able to change the value of say this ‘activetab’ localStorage, depending on the active tab.
    Something like: localStorage.setItem(‘activetab’, ‘1/2/3/4’);

  • I should make an if that detects if localStorage activetab has a certain value, it should adress the browser there?

8

Exactly!

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.

Does that make sense?

9

So practically, something like this?

if (localStorage('active', '1')) {
    window.location.assign("#tab2");
}

else if (localStorage(‘active’, ‘2’)) {
window.location.assign(“#tab3”);
}
else if (localStorage(‘active’, ‘3’)) {
window.location.assign(“#tab4”);
}

$("#nav2").click(function(){ localStorage( 'active', '1' ); });
$("#nav3").click(function(){ localStorage( 'active', '2' ); });
$("#nav4").click(function(){ localStorage( 'active', '3' ); });
10

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.

11

Ok, great, got it working!

This is my code:

    if (localStorage.getItem("active") == "1") {
        window.location.animate.assign("#tab2");
    }
    else if (localStorage.getItem("active") == "2") {
        window.location.animate.assign("#tab3");
    }
    else if (localStorage.getItem("active") == "3") {
        window.location.animate.assign("#tab4");
    }
    else if (localStorage.getItem("active") == "#") {
        window.location.animate.assign("#");
    }

And then for each nav:

 $("#nav2").click(function(){

        localStorage.setItem("active", 1);
        });

New problem: the style of my ‘buttons’ is based on .click… Thus not working when backspacing.
Next goal: binding my styling to the being active of a tab. Hargl.

12

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?

13

Hi there,
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.