Grow your CSS skills. Land your dream job.

[SOLVED] Linking to UI Tabs, multiple tab sets, scrollTo

  • # August 17, 2009 at 1:44 pm

    Hello,

    I am using jQuery UI Tabs to build a tab interface for a web page that will have a bunch of content on it. Tabs rock, and the design went pretty smoothly with everything working as it should until I decided and I wanted to be able to link to the individual tabs’ content. I figured out quickly that I could use the hash tags from each of the tab sections appended to the url, but that scrolled the page to a place where the tabs themselves were not visible.

    I found this article that showed how to use the scrollTo and localScroll plugins to scroll the page to the top of the tabs and make them visible. I plugged that in, and it seemed to work well for a single set of tabs.

    The problem comes when I try to set up a second set of tabs. The page I’m creating has enough content that I am going to need 3-4 individual tabbed sections.

    I can’t seem to figure out how to scroll to the different tab sections with external links to each individual tab. I’ve tried 2 different things, neither of which has worked right:

    1) tried giving both tab sections the same class and using scrollTo/localScroll plugins.

    Using this method, if I linked to a tab in the first tab section it would work fine, but would not scroll to a link in the second section. The proper tab in the second section would open, but the page would only scroll to the first tab section.

    Link examples:
    1st tab section (works): http://www.easycareinc.com/Cool_Stuff/newvids2.aspx#rx
    2nd tab section (doesn’t): http://www.easycareinc.com/Cool_Stuff/newvids2.aspx#om
    (tab opens, but page does not scroll to 2nd section)

    Code for this method:

    Code:
    $(document).ready(

    function(){
    $(“.video-tabs”).tabs();

    if($(“.video-tabs”) && document.location.hash){
    $.scrollTo(“.video-tabs”);
    }
    $(“.video-tabs ul”).localScroll({
    target:”.video-tabs”,
    duration:0,
    hash:true });

    });

    Code:

    ( content omitted to save sapce)
    ( content omitted to save sapce)

    etc….

    ( content omitted to save sapce)
    ( content omitted to save sapce)

    etc…



    Since that didn’t work properly, I giving each tab section its own class, and modifying the jquery code accordingly. Using this method, the page scrolls to the second set of tabs for all links.

    Example links:
    1st tab section (doesn’t work): http://www.easycareinc.com/Cool_Stuff/newvids1.aspx#glue-on
    (tab opens, but scrolls to 2nd section instead of 1st)
    2nd tab section (works): http://www.easycareinc.com/Cool_Stuff/newvids1.aspx#omg2

    Code for this method:

    Code:
    $(document).ready(

    function(){
    $(“.video-tabs1″).tabs();
    $(“.video-tabs2″).tabs();

    if($(“.video-tabs1″) && document.location.hash){
    $.scrollTo(“.video-tabs1″);
    }
    $(“.video-tabs1 ul”).localScroll({
    target:”.video-tabs1″,
    duration:0,
    hash:true });

    if($(“.video-tabs2″) && document.location.hash){
    $.scrollTo(“.video-tabs2″);
    }
    $(“.video-tabs2 ul”).localScroll({
    target:”.video-tabs2″,
    duration:0,
    hash:true });

    });


    I’m a jQuery n00b, so I’m sure I’m just missing something fundamental in the scrollTo and localScroll calls. :oops: Can anyone point me in the right direction and save my butt? Thanks! :D

    # August 18, 2009 at 11:18 am

    OK, so I’ve been trying to wrap my head around this, and I think I may have come up with a simple solution, but I’m not enough of a jQuery ninja to pull it off. In fact I know just about enough to get me in trouble…

    Here’s my idea: the scrollTo plugin allows you to specify a simple window x-pixel value to scroll to. Each tab has a unique hash tag appended to the url for its unique link. Why not just say, "if any one of this group of hash tags is in the url, scroll to this x-pixel value", and "if any one of this other group of has tags is in the url, scroll to that value", and so on.

    Maybe something like this?

    Code:
    if($(url has ‘#glove’, ‘#glue-on’, ‘#edge’, ‘#easyboot’, ‘#edge’){
    $.scrollTo(250);
    }
    if($(url has ‘#grip’, ‘#bare’, ‘#boa’, ‘#om’, ‘#omg2′){
    $.scrollTo(930);
    }

    I know that’s not right, but you get the idea. Anybody know the proper way to write this? I can’t see why it wouldn’t work…My humblest thanks! :D

    # August 19, 2009 at 11:40 am

    Got it figured out! I emailed the creator of the scrollTo and localScroll plugins, Ariel Flesler ( http://flesler.blogspot.com ), and he was awesome enough to get back to me really quickly with this simple little bit:

    Code:
    $.localScroll.hash({
    axis:’xy’, // only if you need vertical AND horizontal
    offset:{ top:-200, left:0 }
    });

    Does exactly what I need. Gets the has tag from the url, scrolls to a spot above the element so the tabs are visible. Viola. now if I hadn’t spent all day yesterday banging my head against the wall with this… :roll:

    I didn’t modify it, even though I don’t need y scrolling. It works, so I’m not going to mess with it.
    Example link with function:
    http://www.easycareinc.com/Cool_Stuff/newvids5.aspx#glue-on

    Without:
    http://www.easycareinc.com/Cool_Stuff/newvids4.aspx#glue-on

    Sweet! I can move on!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".