22 Jan 2014

Horizontal Slider in a Dropdown Menu w/ Bootstrap 3

I will show you how I made a beautiful horizontal "choose icon" slider, embedded in a dropdown menu, using Bootstrap's Carousel. You might think a carousel is only useful when you want to view sliding images, but! it can be used for all things sliding.

I mean, who would want to include extra KBs to their page and use jQueryUI sliding sliders? I don't. I feel incredibly guilty when I include libraries and I do so only when I am desperate.

Today I am not desperate, I am creative. And I will show you a beautiful slider inside a dropdown menu, which you might have seen somewhere else, but I haven't when I was searching. So I made one up! Using Bootstrap's carousel, I give you the "choose icon" slider:

jquery

Javascript wise, you don't need to do much! Since we are inside a dropdown menu, we need to adjust the behavior of the "next" and "prev" buttons.

$('a[data-slide]').click(function(e){
  e.preventDefault();
  e.stopPropagation();

  $('.carousel').carousel( $(this).data('slide') );
});

demo

html

<div class="btn-group">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
    choose icon <span class="caret"></span>
  </button>

  <div class="dropdown-menu" role="menu">

  <!-- this is where magic starts.. inside the dropdown-menu, we have the carousel.
    notice that we removed data-ride attribute, because we don't want it to start 
    sliding when the page loads.
    and we set data-interval to false because we don't want it to animate 
    by itself. -->
    <div id="dropdown-icons" class="carousel slide" data-interval="false">
      <div class="carousel-inner">

        <!-- first slide -->
        <div class="item active">
          <ul>
            <li><a href="#"><i class="check"></i></a></li>
            ...
          </ul>
        </div>
        <!-- second slide -->
        <div class="item">
          <ul>
            <li><a href="#"><i class="check"></i></a></li>
            ...
          </ul>
        </div>
        <!-- more slides if you wish. 
        PS all slides should be in a <div> with class 'item' -->

      </div> <!-- /.carousel-inner -->
    </div> <!-- /.carousel -->

    <!-- next/prev controllers. make sure you set data-slide correctly.
      PS remove all the classes to get rid of the styling -->
    <a href="#dropdown-icons" data-slide="prev"><i class="arrow-left"></i></a>
    <a href="#dropdown-icons" data-slide="next"><i class="arrow-right"></i></a>

  </div>
</div>

Of course like all my side projects, this has been only tested on Chrome. I promise I will one day make the effort to test my stuff on all major currently-used browsers. For now, you test it. See if it suits your needs. But it should work great, it's jQuery and Bootstrap. Those already work on all major browsers, don't they? So we are safe. But you test it just in case. Then if you find a bug, report it to jQuery and Bootstrap. Or maybe me. If I can fix it, I definitely will.