I need to stop event propagation on the main DIV and I set a flag on the original event object whether event occurred on the "more_vert" button. This works fine, but after to enable ngTouch the next code no work in OS: Android / Browser: Google Chrome.
<div ng-click="$event.originalEvent.dropdown || model.option()">
<div>Name of item.</div>
<span>Value of item.</span>
<div class="dropdown" ng-click="$event.originalEvent.dropdown = true">
<a id="menuActions" aria-expanded="false" aria-haspopup="true" data-target="#" data-toggle="dropdown" role="button">
<i class="material-icons md-24">more_vert</i>
</a>
<ul class="dropdown-menu" aria-labelledby="menuActions">
<li>
Option1
</li>
<li>
Option2
</li>
<li>
Option3
</li>
</ul>
</div>
</div>
I use Angular 1.4.7.
This works fine. Actually work with ngTouch and Angular 1.5.5
Related
I'm trying to create a language bar with the jQuery bootstrap plugin, but it seems there is no option to append any action to anchor tags in drop down menu at all. They are just un-clickable.
Initialization of plugin:
<div class="bfh-selectbox bfh-languages" data-language="pl_PL" data-available="en_US,pl_PL" data-flags="true" data-blank="false">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li>
<a href="/index.php?lang=pl_PL" data-option="pl_PL">
<i class="glyphicon bfh-flag-PL"></i>
</a>
</li>
<li>
<a href="/index.php?lang=en_US" data-option="en_US">
<i class="glyphicon bfh-flag-US"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
Commenting or uncommenting doesn't make any difference.
Another possibly related issue:
When I'm stretching out my web page, with the container overflowing the language bar completely, it becomes completely un-clickable. I don't want to change this plugin on something else in case someone will offer.
The address of the website is here.
I am running E2E on my angular application using Protractor. I am running into a very weird problem.
I am using the Bootstrap Dropdown which has some options. I need to click on one of the options.
I referred this answer which tries to do something similar, but doesn't work for me:
Protractor - how to select heavily nested dropdown element?
My structure looks like:
<div id="fc-more-btn" class="btn-group btn-group-sm dropdown" role="group" dropdown="" is-open="ctrl.fcDropdown">
<button type="button" class="btn btn-default dropdown-toggle filetree-btn" tooltip="More Actions" tooltip-trigger="mouseenter" tooltip-placement="bottom" ng-disabled="ctrl.sd.noSelections" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu filetree-dropdown" role="menu">
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewFile()">
New File
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewDir()">
New Folder
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections" ng-click="ctrl.copyFiles()">
Copy
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.clipboardEmpty||ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.pasteFiles()" disabled="disabled">
Paste
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||ctrl.sd.multipleSelections" ng-click="ctrl.renameFile()">
Rename
</a>
</li>
</ul>
</div>
In my test, I am trying to click on the Rename link.
The code I have written is:
element(by.css('.dropdown-toggle')).click().then(function(){
//click on rename
});
On running the test, there is a small flicker over the dropdown toggle button, and it seems that the button is clicked. However, the dropdown that should be shown is not shown.
As a result of this, I am not able to simulate a click to rename. Am I doing something wrong?
Try selecting by cssContainingText, very helpful with dropdowns and nested elements!
element(by.cssContainingText('option', 'Rename')).click();
As demonstrated in this jsFiddle, I've a nav bar with 2 dropdowns. A link in the first drop down fires a JS click event where I manually show the second drop down. It works, except that after being shown, the second drop down automatically and immediately hides. I've added an alert to give you time to see the second dropdown before it hides.
http://jsfiddle.net/xNkS5/8/
Copy/paste of the JsFiddle code:
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://toujoursplus.be/">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="DropDown1" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="SwitchLink">Switch to drop down 2</a></li>
</ul>
</li>
<li class="dropdown">
<a id="DropDown2" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JavaScript
$(document).ready(function() {
$("#SwitchLink").click(function(e) {
e.preventDefault();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
});
In case you wonder why I'm doing that: In our application the DropDown2 shows a login form. Sometimes, clicking the menu link in the DropDown1 should make the login form appear.
jQuery 1.9.1 - Bootstrap 3.0.0
Happens on both Chrome and Firefox.
I'm a Bootstrap newbie, and I'm convinced that I'm doing it wrong. Many thanks for your help.
John.
Try this way:
Stop the event from propagating as well. Otherwise it causes the default dropdown handling of bootstrap from being executed which collapses all the dropdowns when you click on the link.
$(".SwitchLink").click(function(e) {
e.preventDefault();
e.stopPropagation();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
Fiddle
try to add this script on document.ready. wroked for me.
$(function(){
$("[data-toggle=dropdown]").prop('onclick', null).off('click');
$("[data-toggle=dropdown]").click(function (e) {
e.preventDefault();
e.stopPropagation();
let el = $(this);
let expanded = el.attr("aria-expanded") || false;
if (!expanded) {
$(this).dropdown('toggle');
}
});
});
I am trying to display a Twitter Bootstrap dropdown menu on right click on a element. This is the code that I wrote:
Javascript
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
toggle.dropdown('toggle');
return false;
});
HTML
<div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This code works fine in Chrome and when I right click the menu is displayed properly, but on Firefox when I right click, the menu is displayed for a second and it disappears. Is there any other event that I need to handle too?
JSFiddle: http://jsfiddle.net/Serff/3/
Remove
data-toggle="dropdown"
The final html markup:
<div class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This should work.
Use this script:
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
e.preventDefault();
toggle.dropdown('toggle');
});
Let me begin by saying that this problem is specific to TabPanel in ExtJS library.
I can successfuly simulate clicks on other ExtJS components using jQuery("#id").click() function.
But I cannot simulate user click on a given tab of TabPanel in ExtJS using jQuery. I see that the dom structure behind tabs looks like this:
<ul class="x-tab-strip x-tab-strip-top" id="ext-gen15">
<li id="ext-comp-1009__ext-comp-1001" class="x-tab-strip-active">
<a class="x-tab-strip-close" id="ext-gen18"></a>
<a href="#" class="x-tab-right" id="ext-gen19">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">Submarine</span>
</span>
</em>
</a>
</li>
<li id="ext-comp-1009__ext-comp-1003" class="">
<a class="x-tab-strip-close" id="ext-gen20"></a>
<a href="#" class="x-tab-right" id="ext-gen21">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text">SpaceShuttle</span>
</span>
</em>
</a>
</li>
<li class="x-tab-edge" id="ext-gen16">
<span class="x-tab-strip-text"> </span>
</li>
<div class="x-clear" id="ext-gen17"></div>
</ul>
I've tried various methods of selecting the first tab using jQuery:
jQuery("#ext-comp-1009__ext-comp-1001").click();
jQuery("#ext-gen18").click();
jQuery("#ext-gen19").click();
but none of it seem to work.
If you take a look at the source (search for onStripMouseDown in particular) you'll see that it's expecting an Ext.EventObject. It'll fail straight away because e.button isn't 0.
Presumably you could patch it with your own onStripMouseDown.