Toolbar Overflow

A jQuery method for handling wide toolbars in narrow viewports.

by kthornbloom

HTML

<div class="title">Toolbar Overflow</div>
<div class="tb-overflow toolbar"> <a href="#">Button</a>
 <a href="#">Thing</a>
 <a href="#">Button</a>
 <a href="#">Thing</a>
 <a href="#">Button</a>
 <a href="#">Thing</a>
 <a href="#">Button</a>
 <a href="#">Thing</a>
 <a href="#">Button</a>
 <a href="#">Thing</a>
 <a href="#">Button</a>
 <a href="#">Thing</a>
</div>

<div class="tb-overflow toolbar">
  Small Toolbar
    <a href="#">Button</a>
</div>

CSS

.tb-overflow-stage {
    white-space:nowrap;
    overflow:hidden;
}
.tb-nav {
    background:red;
    height:100%;
    position:absolute;
    top:0;
    width:25px;
    cursor:pointer;
}
.tb-backward {
    left:0;
}
.tb-backward:after {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 5px solid #222;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -5px;
    margin-left: -7px;
}
.tb-forward {
    right:0;
}
.tb-forward:after {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 5px solid #222;
    position: absolute;
    right: 50%;
    top: 50%;
    margin-top: -5px;
    margin-right: -7px;
}
/* just style stuff below here */
 body, html {
    margin:0;
    font-family:sans-serif;
    font-size:14px;
    background:#636D73;
}
.title {
    padding: 30px;
    background: linear-gradient(to bottom, rgba(253, 253, 253, 1) 0%, rgba(232, 232, 232, 1) 100%);
    color: #737373;
    text-align: center;
}
.toolbar {
    background:#eee;
    padding:5px;
    position:relative; /*important!*/
    border-top:1px solid #636D73;
}
.toolbar a:link, .toolbar a:visited {
    display: inline-block;
    border-radius: 3px;
    padding: 5px;
    background: #D1D1D1;
    text-decoration: none;
    color: #494949;
}
.toolbar a:hover {
    background:#E6E6E6;
}

JavaScript

$('.tb-overflow').each(function (index) {
    $(this).wrapInner('<div class="tb-overflow-stage"></div>');

    var toolbarWidth = $(this).find('.tb-overflow-stage').prop('scrollWidth'),
        availWidth = $(this).width();

    if (toolbarWidth > availWidth) {
        $(this).css({
            'paddingLeft':'30px',
            'paddingRight':'30px'
        }).append('<div class="tb-nav tb-forward"></div><div class="tb-nav tb-backward"></div>');
    }
});

$('.tb-forward').hover(function() {
    //
  }, function() {
    //
});