HubSpot/Drop Hiding on resize

by bmh_ca

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgithub.com/HubSpot/drop/master/css/drop-theme-arrows-bounce-dark.css">
<script src="https://rawgithub.com/HubSpot/drop/master/drop.js"></script>
<script id='X' type='text/x-script'>
    <div class='list-group'>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
        <div class='list-group-item'>Item</div>
    </div>
</script>

<button type='button' class='btn btn-primary' id='Y'>
    Drop!
</button>

JavaScript

DROP_THEME = "drop-theme-arrows-bounce"

target = $("#Y")
template = #("#X")

drop = new Drop({
      target: target.get(0),
      classes: DROP_THEME,
      content: template.html(),
      position: "bottom center",
      openOn: 'click',
})