Drop / Select / Tether

Drop is a Javascript and CSS library for creating dropdowns and other popups attached to elements on the page. Select.js is a Javascript and CSS library for creating styleable select elements. Both use Tether.js to efficiently position elements.

1: Basic Example with Drop

1  drop1 = new Drop({
2    target: document.querySelector('.drop-example-1'),
3    content: 'Welcome to the whatever',
4    position: 'bottom center',
5    classes: 'drop-theme-arrows-bounce-dark',
6    openOn: 'click'
7  });

1  drop2 = new Drop({
2    target: $('.drop-example-2')[0],
3    content:  $('.drop-content-example').html(),
4    position: 'bottom center',
5    classes: 'drop-theme-arrows-bounce',
6    openOn: 'hover'
7  });

3: Basic Select Example

1var select_example = new Select({el: $('#select-example')[0]});
2select_example.on('change', function(e){ alert('You picked: '+e.value);})

4: Containing

Contain the drop element to a parent

1<div class="some-container">
2  <button class='btn drop-example-4'>Hello, Click Me</button>
3</div>
1.some-container {
2  border: 1px solid black;
3  width: 400px;
4  height: 250px;
5  overflow: auto;
6  position: relative;
7}
 1$(function () {
 2  var drop4;
 3  drop4 = new Drop({
 4    target: document.querySelector('.drop-example-4'),
 5    content: 'Welcome to the whatever <pre>yadda yadda yadda yadda yadda yadda yadda yadda yadda</pre>',
 6    position: 'bottom center',
 7    classes: 'drop-theme-arrows-bounce',
 8    openOn: 'click',
 9    tetherOptions: {
10      constraints: [
11          {
12            to: 'scrollParent',
13            pin: true
14          }
15        ]
16    }
17  });
18});