javascript - bootstrap dropdown and nanoscroller JS -
something annoying happening when use bootstrap dropdown , nanoscrollerjs plugin. nanoscroller plugin not triggered when dropdown menu. instead triggers use firebug , go on dropdown again. looks dropdown hidden in dom though triggered. how can nanoscroller triggered properly?
nanoscroller: https://jamesflorentino.github.io/nanoscrollerjs/
i created fiddle demonstrate problem: https://jsfiddle.net/spw1khad/
the code:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownmenu1"> <div id="about" class="nano"> <div class="nano-content"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> </div> </div> </ul> </div>
first little markup comment; use <div> tag directly after <ul> tag, incorrect. improved part in code below. see can use div direct child of ul?
now problem, seems bootstrap triggers js function @ moment click dropdown button causes 'crash' nanoscroller. using click event time out bit hacky job you.
html part
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">dropdown <span class="caret"></span> </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu1"> <div id="about" class="nano"> <div class="nano-content"> <ul> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li><a href="#">separated link</a> </li> </ul> </div> </div> </div> and js part:
$('#dropdownmenu1').click(function () { settimeout(function () { $(".nano").nanoscroller(); }, 100); });
Comments
Post a Comment