javascript - Positioning a Dropdown Where Button Was Clicked -

-

i have alloy ui dropdown component want render when user clicks on 1 of 4 buttons - dropdown should positioned left of button clicked

var toolsdropdown = new y.dropdown({     boundingbox: '#my-div',     trigger: '.option',     hideonclickoutside: true,     hideonesc: true  }).render();

i dropdown menu render wherever position of button clicked (imagine these buttons displayed in each row of 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 listener setup listen each button clicked

y.all('button.option-btn').on('click', displaydropdown);

however i'm having trouble getting function (maybe don't understand how alloy's dropdown works) - ideas?

edit: think might fair better yui's overlay widget

overlay positionable , stackable widget, provides support standard module format layout, header, body , footer section.

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>

Comments

Post a Comment

Popular posts from this blog

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops', ...
Read more

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null ...
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens ...
Read more