Tumblr-Like Draggable Tag Bar with jQuery and CSS3 - Tag Overflow

A jQuery & CSS3 tag bar inspired by Tumblr.com that allows your visitors to see more overflowing tags by mouse dragging.

How to use it:

1. Create a draggable tag bar for your post.

<div class="post_tags draggable">
  <div class="post_tags_inner">
    <a href="#">Tag 1</a>
    <a href="#">Tag 2</a>
    <a href="#">Tag 3</a>
    ...
    <a href="#">Tag n</a>
  </div>
</div>

2. The required CSS/CSS3 styles for the draggable tag bar.

.post_tags,
.post_tags a { color: #A7A7A7; }

.post_tags {
  position: relative;
  margin-top: 10px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
}

.post_tags.draggable .post_tags_inner {
  cursor: col-resize;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.post_tags_inner {
  float: left;
  position: relative;
  padding: 0px 20px 0px 0;
}

.post_tags a,
.post_tags .post_tag {
  color: #A7A7A7;
  font-size: 15px;
  text-decoration: none;
  margin-right: 6px;
  text-transform: lowercase !important;
}

.post_tags a:before { content: '#'; }

.post_tags:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #FFF));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, #FFF 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #FFF 100%);
}

.post_tags a:hover,
.post_tags .post_tag:hover,
.post_tags a:focus,
.post_tags .post_tag:focus,
.post_tags a:active,
.post_tags .post_tag:active { color: #F58020; }

3. Include the necessary jQuery library at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. Include jQuery UI or jQuery easing plugin for easing effects.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 

5. Active the draggable tag bar.

$(document).ready(function(){
$(".post_tags_inner").draggable({
  axis : "x",
  scroll: false,
  stop: function() {
    var __left = $(this).css("left").replace(/[^-\d\.]/g, '');
    if(__left > 0){
    $(this).animate({left: 0}, 400, 'easeOutExpo');
    }
    var __width = $(this).outerWidth();
    var __parentWidth = $(".post_tags.draggable").outerWidth();
    if(__width > __parentWidth) {
    if(__left < __parentWidth-__width){
      $(this).animate({left: __parentWidth-__width}, 400, 'easeOutExpo');
    }
    } else {
    $(this).animate({left: 0}, 400, 'easeOutExpo');
    }
  }
});
});

---

This awesome jQuery plugin is developed by thetwistedtaste. For more Advanced Usages, please check the demo page or visit the official website.