Overflow Material Design Style Tabs

Making some overflowing tabs scroll into view on click.

by Jason

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div id="tabui">
    <ul id="tabs" class="tabs">
        <li>Aquaman</li>
        <li>Ares</li>
        <li>Bane</li>
        <li>Captain America</li>
        <li>Black Adam</li>
        <li>Cat Woman</li>
        <li>Cyborg</li>
        <li>Deathstroke</li>
        <li>Doomsday</li>
        <li>Flash</li>
    </ul>
    <div id="tabcontent">
        <div class="col s12">Aquaman is a fictional superhero appearing in American comic books published by DC Comics. Created by Paul Norris and Mort Weisinger, the character debuted in More Fun Comics #73 (November 1941).[1] Initially a backup feature in DC's anthology titles, Aquaman later starred in several volumes of a solo title. During the late 1950s and 1960s superhero-revival period known as the Silver Age, he was a founding member of the Justice League of America. In the 1990s Modern Age, Aquaman's character became more serious than in most previous interpretations, with storylines depicting the weight of his role as king of Atlantis.[2]</div>
        <div class="col s12">Ares is a fictional character appearing in DC Comics publications and related media. Based upon the Greek mythological figure of the same name, he is the Greek god of war and a major adversary of Wonder Woman. Ares first appeared in Wonder Woman #1, volume 1, published in the summer of 1942, written by Wonder Woman creator William Moulton Marston. In the very next issue,[1] he reappeared under his Roman name, Mars. He would retain this name until February 1987,[2] when comics writer/artist George Pérez restored the Greek name Ares as part of his reboot of the Wonder Woman mythos. As the narrative continuity of Wonder Woman comics have been adjusted by different writers throughout the years, various versions of Mars/Ares, with various personalities and physical appearances, have been presented, though most have been depicted wearing...

CSS

body {
    font-size:22px;
    padding:15px;
}
#tabui {
    padding:15px;
    box-shadow:0px 5px 10px rgba(0, 0, 0, .8);
    background:#ffffff;
}
ul#tabs {
    margin-bottom:15px;
    white-space: nowrap;
    overflow-x:scroll;
    -webkit-overflow-scrolling: touch;
}
ul#tabs::-webkit-scrollbar {
    width: 0 !important;
}
ul#tabs li {
    display:inline-block;
    padding:0px 10px;
    margin-right:15px;
    border-bottom:2px rgba(0, 0, 0, .1) solid;
    cursor:pointer;
}
ul#tabs li.active {
    color:#333333;
    font-weight:bold;
    border-bottom:2px rgba(0, 0, 0, .5) solid;
}
#tabcontent {
    font-size:18px;
    height:350px;
    overflow-x:scroll;
}
<style type='text/css'>
/* your custom CSS \*/
 </style> <!-- access to the HEAD element --> <meta name='viewport' content='initial-scale=1.0, width=device-width' /> <style> </style>

JavaScript

$("#tabcontent div").hide();
$("#tabcontent div:eq('0')").show();
$("ul#tabs li:eq('0')").addClass("active");

$("li").click(function () {
    var i = $(this).index();
    $("#tabcontent div:not(:eq(" + i + "))").hide();
    $("#tabcontent div:eq(" + i + ")").fadeToggle("slow", "linear");
    centerLI(this, 'ul#tabs');
    $("li").each(function () {
        $(this).removeClass('active');
    });
    $(this).addClass("active");

});

//http://stackoverflow.com/a/33296765/350421
function centerLI(target, outer) {
    var out = $(outer);
    var tar = $(target);
    var x = out.width() - 50;
    var y = tar.outerWidth(true);
    var z = tar.index();
    var q = 0;
    var m = out.find('li');
    for (var i = 0; i < z; i++) {
        q += $(m[i]).outerWidth(true);
    }
    //out.scrollLeft(Math.max(0, q - (x - y)/2));
    out.animate({
        scrollLeft: Math.max(0, q - (x - y) / 2)
    }, 500);

}