tubeslide

by edwardsharp

HTML

<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<button id="new_elem">new elem</button>
<div id="parent" class="parent">
  <div id="list" class="list">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
  </div>
</div>

CSS

.parent {
  width: 100%;
}

.list {
  background-color: #d0d0d0;
  color: white;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  /*text-align:left;*/
}

.item {
  background-color: #404040;
  height: 270px;
  width: 320px;
  margin: 0 4px 8px 4px;
  cursor: pointer;
  display: inline-block;
  /*float:left;*/
  /*float:none;*/
  /*clear:both;*/
}

.placeholder {
  height: 270px;
  width: 60px;
  display: inline-block;
  margin: 10px;
  background-color: yellow;
}

JavaScript

function nextLetter() {
  s = $("#list .item").last().html();
  return s.replace(/([a-zA-Z])[^a-zA-Z]*$/, function(a) {
    var c = a.charCodeAt(0);
    switch (c) {
      case 90:
        return 'A';
      case 122:
        return 'a';
      default:
        return String.fromCharCode(++c);
    }
  });
}

$(function() {
  $('#list').disableSelection().sortable({
    scroll: true,
    placeholder: 'placeholder',
    start: function(event, ui) {
      ui.placeholder.html('&nbsp;')
    },
    axis: 'x'
  });

  $("#new_elem").click(function() {
    $('<div/>', {
      class: 'item',
      text: nextLetter()
    }).appendTo('#list');
    $("#list").sortable('refresh');
    $("#list").scrollTo($("#list .item").last(), 800);
  });

});