SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Saving active tab in a cookie

    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:

    Code:
    $('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
    Code:
    $.cookie('active_tab', rel);
    after (this)on.click.
    - Use jquery to point the browser to the active tab?

    I'm a bit lost.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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?
    Here you go. Thanks for the compliment and the help you might give.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    No problem

    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. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Ah ok.
    Some wonderful videos there, by the way.

    Have you thought about using 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. #7
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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. #9
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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. #11
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, great, got it working!

    This is my code:

    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:

    Code:
     $("#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. #12
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •