Spruce interactive

Noise

Variable Height Tabs with jQuery Tools Scrollable

Posted: July 12th, 2012

Author: Ben Heller

 Details

We’re big fans of jQuery Tools–whether it’s their Scrollable, Tabs, Flowplayer, or Tooltips, all their products are incredibly well built and thoroughly documented. They call themselves “The missing UI library for the Web”, and though it sounds like an overstatement, in this case the self-flattery is well earned. We’re in the process of building a new website for Cureatr Inc., a HIPAA secure mobile messaging network for physicians, and are using a Scrollable area inside a Tabbed area. In this case, we need each tab to be a variable height based on the content, but the Scrollable container div requires a height value in CSS. Now, we could hardcode the height on the Scrollable area inside each tab, but this is a WordPress site and we want our clients to be able to update the content at their leisure. So, we came up with a solution.

We bound the onClick action on the .tabs ul to a function that calculates the max height of all children elements inside our .scrollable div and then assigns this as the height of the .scrollable area when flipping between tabs.  We added this to the same function in which we initialize the tabs() and scrollable(). It looks like this:

$(function() {  
    // Setup ul.tabs to work as tabs for each article directly under div.panes
    $("ul.tabs").tabs("div.panes > article");

  // Dynamically Size the Homepage Tabs on Click
  $("ul.tabs").bind("onClick", function() {
    var max = Math.max.apply(Math, $(".scrollable").children().map(
      function(){
        return $(this).height();
      }
    ).get());
    $(".scrollable").height(max);   
  });

   // Initialize scrollable
    $(".scrollable").scrollable();
});

But that’s not all! We need to properly size the first tab on page load, not just on click. So, let’s add the same snippit to our $(document).ready function:
  // Dynamically Size the Homepage Tabs on Load
  var max = Math.max.apply(Math, $(".scrollable").children().map(
      function(){
        return $(this).height();
      }
    ).get());
  $(".scrollable").height(max);

And there you have it folks, dynamic height Tabs with jQuery Tools Scrollable.

Talk to Us

Wise men have said, "All good things must come to an end", and so it was with Spruce. We began our first project in 2006, and completed our last in Fall 2013. It's been a wonderful experience, but now it's time to begin the next adventure.

Though...we wouldn't want to leave you hanging, now would we? Here are our top recommendations for world-class branding, design, and web development:

  • Kristina (KJ) Parish and Beam Collective:
    KJ provided the artistic vision that allowed Spruce to succeed, and we still think she's the greatest designer in the entire world. She's started a new collective with some talented developers, and is covering much the same territory as Spruce--design and development all under one roof, with a caliber of service and professionalism seldom seen in this business or any other. If you like what you see on the Spruce site, then definitely get in touch with KJ at kj@beamcollective.com
  • Permanent Art & Design
    Permanent is a nationally recognized design & branding firm out of Minneapolis, MN. They've been a long term collaborator and strategic partner over the past couple years, and we'd recommend them for medium to large sized businesses/organizations who are serious about putting their best foot forward. In addition to design, Permanent offers strategy and marketing services, plus in-house and networked developers. For more information contact Joseph Belk joseph@permanentadg.com
  • Nate Thompson
    A freelancer, Nate reminds us of ourselves back in the day. Smart, communicative, and skilled, Nate is our recommendation for small to medium sized businesses/organizations who have sites built on Wordpress or other open source content management solutions. With a background in both design and development, he's a one-stop shop for most web-related tasks. You can get in touch at nate.a.thompson@gmail.com
  • Kevin DeBernardi
    Designer turned developer, Kevin is embarking on a freelance web career after working as the in-house designer at the Museum of the City of New York. He's adept at translating his design ideas into custom PHP code, and is constantly expanding his technical palette. Kevin's a good choice for projects that don't quite fit into the Wordpress mold, and that would benefit from a consistency of presence and vision from design through execution. Kevin can be reached at kevin@analoglifestyle.com