Positioning a Dropdown Where Button Was Clicked

Question

Positioning a Dropdown Where Button Was Clicked

132 views Asked by Clay Banks At 10 September 2024 at 12:13

I have an Alloy UI Dropdown Component I want to render when a user clicks on one of four buttons - this dropdown should be positioned the left of which button was clicked

var toolsDropdown = new Y.Dropdown({
    boundingBox: '#my-div',
    trigger: '.option',
    hideOnClickOutSide: true,
    hideOnEsc: true
 }).render();

I would like this Dropdown menu to render wherever the position of the button clicked is (imagine these buttons are displayed in each row of a table)

<div id="my-div">
    <div id="container-1">
        <button id="options-btn-1" class="option"  type="button">Option one</button>
    </div>
    <div id="container-2">
        <button id="options-btn-2" class="option"  type="button">Option two</button>
    </div>
    <div id="container-3">
        <button id="options-btn-3" class="option"  type="button">Option three</button>
    </div>
    <div id="container-4">
        <button id="options-btn-4" class="option" type="button">Option four</button>
    </div>
</div>

I have a listener setup to listen for each button clicked

Y.all('button.option-btn').on('click', displayDropdown);

However I'm having some trouble getting this to function properly (maybe I don't fully understand how Alloy's Dropdown works) - any ideas?

EDIT: I think I might fair better with YUI's Overlay Widget

Overlay is a positionable and stackable widget, which also provides support for the standard module format layout, with a header, body and footer section.

Original Q&A

There are 1 answers

**Ritesh Karwa** · Answer 1 · 2015-06-19 04:01:42

Try this:

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
  <script src="http://cdn.alloyui.com/2.0.0pr5/aui/aui-min.js"></script>
  <link href="http://cdn.alloyui.com/2.0.0pr5/aui-css/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<div id="my-div">
    <div id="container-1">
        <button id="options-btn-1" class="option"  type="button">Option one</button>
    </div>
    <div id="container-2">
        <button id="options-btn-2" class="option"  type="button">Option two</button>
    </div>
    <div id="container-3">
        <button id="options-btn-3" class="option"  type="button">Option three</button>
    </div>
    <div id="container-4">
        <button id="options-btn-4" class="option" type="button">Option four</button>
    </div>

    <button class="btn btn-primary" id="primary">Primary</button>

    <div class="aui-dropdown"  id="drp">
        <a class="aui-dropdown-toggle" data-toggle="dropdown" href="#menu1">
            Dropdown
            <b class="aui-caret"></b>
        </a>
        <ul class="aui-dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="aui-divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>


</div>
  <script>
  $(document).ready(function(){

    YUI().use('node', 'node-focusmanager', function (Y) {

          var document = Y.one(document),    
              toggler = Y.one('.aui-dropdown-toggle'),
              dropdown = Y.one('.aui-dropdown-menu'),
              buttonAction = Y.one('#primary'),
              dropDownDiv = Y.one('#drp');
              buttonOne=Y.one("#options-btn-1");
               buttonTwo=Y.one("#options-btn-2");


       buttonAction.on('click', function(e) {
         dropDownDiv.setStyle('top','-20px');
         dropDownDiv.setStyle('left','120px');
        dropdown.toggleClass('aui-show');
        e.preventDefault();
     });

     buttonTwo.on('click', function(e) {
       dropDownDiv.setStyle('top','-125px');
       dropDownDiv.setStyle('left','120px');
      //dropdown.toggleClass('aui-show');
      e.preventDefault();
   }); 


     buttonOne.on('click', function(e) {
       dropDownDiv.setStyle('top','-145px');
       dropDownDiv.setStyle('left','120px');
      //dropdown.toggleClass('aui-show');
      e.preventDefault();
   });


          toggler.on('click', function(e) {
            dropdown.toggleClass('aui-show');
            e.preventDefault();
            e.stopPropagation();
          });

          document.on('click', function() {
            dropdown.removeClass('aui-show');
          });

        });  
  });
  </script>

</body>
</html>

TechQA.

Positioning a Dropdown Where Button Was Clicked

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in ALLOY-UI

Popular Questions

Popular Tags

Trending Questions