Question

Here’s what I need to do:

I need to be able to allow for some list items (they’ll be available tags for an article) to display inline-block within a fixed area. There will be many of these list items and I need them to wrap up to 3 lines tall, but that’s it. After that, I need some way of limiting these so they do not knock down to a fourth line, and instead have some sort of jQuery slider so I can scroll to the right and find more tags.

These tags will be pulled from the server, and will not be hardcoded, so I don’t think I can create separate lists. Furthermore, each tag will be a variable width.

I’m a bit stuck and not sure if this is even a possible execution. Any pointers in the right direction are appreciated.

Thank you!

Answer 1

Hmm, ok now that I have a general idea of what you wanted, I put together this demo, but the major difference is that it scrolls up and down instead of right to left.

I think a vertical slider works best because the width of the tags is so variable. That and it made coding a lot easier 😉

CSS

h2 {
  font-size:.8em;
  margin:0 5px 10px;
}

#wrap {
  padding:20px;
  background:#DDD;
  height:170px;
  width:680px;
}

#up, #down {
  float: right;
  line-height: 3em;
  margin-top: 1em;
}

#down {
  clear: right;
  margin-top: 4em;
}

#up a, #down a {
  text-decoration:none;
  color:#FFF;
  font-weight:bold;
  font-family:serif;
  font-size:2em;
  display:block;
}

#up a:hover, #down a:hover {
  color: #999;
}

#window {
  width: 90%;
  height: 9em;
  overflow: hidden;
}

ul {
  padding:0;
  margin:0 45px 0 0;
}

ul li {
  padding:10px;
  float:left;
  margin:5px;
  background:#777;
  list-style-type:none;
  color:#FFF;
}

HTML

<div id="wrap">
  <div id="up" class="disabled"><a href="#">&#9650;</a></div>
  <div id="down"><a href="#">&#9660;</a></div>
  <h2>Available Tags</h2>
  <div id="window">
    <ul>
      <li>Lorem ipsum</li>
      <li>dolor sit amet</li>
      <li>consectetur</li>
      <li>adipiscing elit</li>
      <li>Pellentesque</li>
      <li>pellentesque justo</li>
      <li>Sed in rutrum lectus</li>
      <li>Vivamus lorem dui</li>
      <li>auctor vitae</li>
      <li>suscipit id</li>
      <li>mollis tempus tellus</li>
      <li>Nullam in turpis sem</li>
      <li>Nulla molestie</li>
      <li>fermentum dictum</li>
      <li>Donec arcu lacus</li>
      <li>lacinia a pretium in</li>
      <li>bibendum eget felis</li>
      <li>Praesent gravida sapien mi</li>
      <li>Mauris purus justo</li>
      <li>vestibulum et volutpat non</li>
      <li>condimentum sit amet est</li>
      <li>Aenean non augue</li>
      <li>tellus rutrum commodo</li>
      <li>Duis malesuada</li>
      <li>tristique diam nec pharetra</li>
      <li>Praesent a facilisis dolor</li>
      <li>Praesent eget orci</li>
      <li>id nisl interdum consectetur</li>
      <li>Quisque ultrices hendrerit risus</li>
      <li>aliquam gravida dolor laoreet sed</li>
      <li>Pellentesque tristique</li>
      <li>commodo eros ac vestibulum</li>
      <li>Curabitur ipsum dui</li>
      <li>lacinia vitae hendrerit et</li>
      <li>luctus in eros</li>
    </ul>
  </div>
</div>

jQuery

$(function(){
  var delay = 500,
  t, win= $('#window'),
  up = $('#up'),
  down = $('#down'),
  winH = win.height() + 10, // 10 = top + bottom margin of li
  bottom = win[0].scrollHeight - winH;

  up
  .click(function(){
    t = win.scrollTop();
    if (t - winH <= 0) {
      t = 0;
      $(this).addClass('disabled').fadeTo(delay, 0);
    } else if (down.hasClass('disabled')) {
      down.removeClass('disabled').fadeTo(delay, 1);
    }
    win.animate({ scrollTop: t - winH}, delay);
  })
  .addClass('disabled')
  .fadeTo(delay, 0);

  down.click(function(){
    var t = win.scrollTop();
    if (t + winH >= bottom) {
      t = bottom;
      down.addClass('disabled').fadeTo(delay, 0);
    } else if (up.hasClass('disabled')) {
      up.removeClass('disabled').fadeTo(delay, 1);
    }
    win.animate({ scrollTop: t + winH}, delay);
  });

});