SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to keep the selected tab active when the user comes back to page?

    Hi all

    I have a standard tabbing section to divide content into separate tabs, similar to the jQuery tabs.
    My problem, how can I keep the active tab open when a user comes back to the page without them needing to re-select the tab.

    Is this a cookie issue?
    How can I modify the code below?

    Code JavaScript:
    $(document).ready(function() {
     
        //Default Action
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
     
        //On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active content
            return false;
        });
     
    });

    For Reference:
    HTML Code:
    <ul class="tabs">
    <li><a href="#welcome">welcome</a></li>
    <li><a href="#one">tab 01</a></li>
    <li><a href="#two">tab 02</a></li>
    </ul>
    
    <section class="tab_container">
    <article id="welcome" class="tab_content"><p>content</p></article>
    <article id="one" class="tab_content"><p>content</p></article>
    <article id="two" class="tab_content"><p>content</p></article>
    </section>
    Many thanks.
    Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    SitePoint Enthusiast aufshebung's Avatar
    Join Date
    May 2012
    Location
    Santa Fe, NM
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right now, the tabs are already linked to their respective content with a fragment identifier (href="#welcome"). When a tab is clicked, you're currently cancelling the default action by returning false from the event listener.

    If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then, rather than load the first page, you can check to see if there's a fragment identifier, and load the appropriate content if there is.

    I reworked your code because I can't help myself from messing with things, but the only two real changes I made are:

    1. Allow the default action when the tab is clicked.
    2. When the page is loaded, check for a fragment identifier to see which page should be loaded.


    (Also: In your original code, the "active" class was added to <li> elements. In my rewrite, it gets added to the <a> instead. Just a heads up.)

    Here's the updated jQuery code:

    Code javascript:
    $(document).ready(function() {
        var $tabs = $('.tabs'),
            $tabsA = $tabs.find('a'),
            $tabsC = $('.tab_content'),
            start = window.location.hash || '#welcome';
     
        function deactivate() {
            $tabsA.removeClass('active');
            $tabsC.hide();
        }
        function activate(href) {
            $tabsA.filter('[href=' + href + ']').addClass('active');
            $(href).fadeIn();
        }
     
        function clicked(e) {
            var href = $(e.target).attr('href');
            deactivate();
            activate(href);
        }
     
        deactivate();
        activate(start);
        $tabs.on('click', 'a', clicked);
    });

    I don't like messing with cookies if I don't have to, but this technique isn't perfect: Because the user is actually following the link, the browser will try to scroll down so that the content displays at the top of the window.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    My problem, how can I keep the active tab open when a user comes back to the page without them needing to re-select the tab.
    I suggest that you first look at how to achieve this without scripting, for that is the most reliable technique in which this type of presentation is achieved.
    For example: http://css-tricks.com/id-your-body-f...d-specificity/ and video tutorial
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm with Paul, there are better (and easier?) ways without js (for peeps without Javascript enabled).

    Otherwise, what aufshebung did would work. However, that won't work if the user clicks the backbutton because document.ready() doesn't get (re)executed on back/forward. For that, you'll need to look into a solution like Ben Almans BBQ combined with aufshebung solution.

    By the way, how do you guys highlight javascript code?
    I've tried [javascript ], [JavaScript ] , and [js ]

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by OMGCarlos View Post
    By the way, how do you guys highlight javascript code?
    I've tried [javascript ], [JavaScript ] , and [js ]
    There's a Go Advanced button at the bottom of the message when you're replying, and in the toolbar of that screen there is a Syntax dropdown.

    [highlight="javascript"] is the tag that's used.

    For example:

    Code javascript:
    (function (window, document, undefined) {
        // ...
    }(this, this.document));

    I just use the handwritten version of the highlight tag most of the time, instead of heading off to advanced.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Aufshebung

    I understand what your saying though have a couple of issues with what you suggest.
    1. I don't want the address bar to reflect what tab is active, I'd like to keep the URL clean just referencing the one page with the detection/cookie code in the background, if possible. I also have a FB like button on a number of sites which treats these as different pages if I remove the default action.
    2. The reason I've added active to <li> is because I need more control over the styling and need to style both the <li> & <a> to get the desired effect.

    Thanks Paul

    I'm already using this CSS technique on some main navigation's and works well, not to concerned about the styling at present.
    I really need to keep the tab open once somebody clicks back in the browser or links back to that same page, maybe a 24hr cookie?

    Hope this makes sense.
    Appreciate your suggestions and feedback.

    Barry
    The more you learn.... the more you learn there is more to learn.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    I'm already using this CSS technique on some main navigation's and works well.
    I really need to keep the tab open once somebody clicks back in the browser or links back to that same page, maybe a 24hr cookie?
    Does the tab on the current page change based on the previous page? If yes, then a cookie is useful to recording that state-based information.
    If instead though the tab on current page (such as the about page) is always the same tab, then it should be that page that determines the active tab.

    It doesn't have to be done based on the URL. With the navigation and the CSS being already in place, you can just manually set the body identifier on the about page:

    Code html4strict:
    <body id="about">

    and your job is done.

    Don't make the task more complex than it needs to be to get the job done well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does the tab on the current page change based on the previous page?
    Not at present, but this will be my next step, to link directly to a tab from another page.

    I still think your getting the wrong idea of what is needed Paul.

    Ok, example.
    I have 3 pages: home, about, company.
    Home and about have no tabs but the company page has 3 tabs as above.

    Say for example, I'm currently on the company page and viewing the second tab, I then follow a link from this tab to the home page.
    But when I click back in the browser, the tabs have reset to the welcome tab, I would like the second tab I was just viewing to still be in active.

    making sense?
    Cheers, Barry
    The more you learn.... the more you learn there is more to learn.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Say for example, I'm currently on the company page and viewing the second tab, I then follow a link from this tab to the home page.
    But when I click back in the browser, the tabs have reset to the welcome tab, I would like the second tab I was just viewing to still be in active.
    Yes that makes sense, so you will want then to record the the state of that menu structure in to a cookie for that page, so that it can be recreated later on.
    That could be as simple as recording which menus are currently open, so that when you return back to the page you can start when them all closed, and then open the ones that are retrieved from the cookie.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes Paul
    so that it can be recreated later on
    Recreated and remembered, just so the user doesn't have to keep clicking back to the tab they where currently looking at.

    How can we set this up with the code we already have a above?

    Thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    How can we set this up with the code we already have a above?
    The way that this sort of thing is done, is whenever the user changes a part of the menu structure, you loop through the menu for the open items and update the cookie with that information.

    When the page loads, you start with closed menu items, then get the cookie and use that info to open up the required menu items.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, though no idea how to code this?
    I need what we have above to work like http://jqueryui.com/demos/tabs/cookie.html

    Any suggestions?
    The more you learn.... the more you learn there is more to learn.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Thanks, though no idea how to code this?
    Which parts do you need more information on, in order to code it yourself?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How to add the cookie information to the code in my first post, without using all the jQuery cookie plugins etc.

    Barry
    The more you learn.... the more you learn there is more to learn.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    How to add the cookie information to the code in my first post, without using all the jQuery cookie plugins etc.
    Here are the cookie handling functions that seem to work the best, to create, read, and erase cookies.
    Background info on these can be found at the quirksmode page on cookies
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul, I'll see if I can get this working and get back with any issues.

    thanks again.
    The more you learn.... the more you learn there is more to learn.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    This just turned up today.

    CSS only tabbed pages with persist and other features
    "The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded."
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool!
    Still having the issue with the address bar, though very impressive.

    I've also been looking a the Cookie handlers, just don't know how to integrate this into my code?
    Could you offer any examples Paul?

    Thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Cool!
    Still having the issue with the address bar, though very impressive.

    I've also been looking a the Cookie handlers, just don't know how to integrate this into my code?
    Could you offer any examples Paul?
    Sure thing. If you want to record that the welcome tab is open you could set a cookie for that with:

    Code javascript:
    createCookie('homepageTabs', 'welcome');

    When the page first loads you might want to see if there is any cookie information about the homepage tabs, so that you can then do stuff based on that info.

    Code javascript:
    var activeTab = readCookie('homepageTabs');
    if (activeTab) {
        // show the tab, which from earlier would be the welcome tab
    }

    Since you're using jQuery though, were you aware that jQueryUI tabs uses the same technique already, to automatically remember which tab is currently open?
    http://jqueryui.com/demos/tabs/#cookie

    The "View source" link on that page shows you how that's achieved using the tabs plugin that goes with jQueryUI.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks.
    I was trying to avoid loading more JS files, I might use the jQuery UI.

    Again, I'll have a play around and see what I come up with
    The more you learn.... the more you learn there is more to learn.


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
  •