I have a button. If i click that button one popup will open in Navbar. I am using ui-bootstrap for this.
If I click outside the popup is not closing.
I wrote window.onclick function to achieve this. It is working.
But My problem is, If I click button popup will open. If I select any value in dropdown, on top of that one more popup will open.
So If I select any dropdwon value on the second dropdown, the first dropdown is automatically closing.
My need is, When I click button dropdown should open. and If I click outside the dropdown close.
If I select any value from dropdown, the dropdown should stable. It should not go off. Only when I click outside that time only it should go.
<button id="btn-append-to-body" type="button" class="btn btn-primary" ng-show="showFilterBtn" ng-click="showDropdown($event)">
<img src="assets/images/filterIcon.png">  Filter <span class="caret"></span>
</button>
<li class="nav-item dropdown">
<div class="dropdown-menu">
<div class="dropdown-item" ng-repeat="filter in filters">
<div>{{filter.filterObject}}</div>
</div>
</div>
</li>
window.onclick = function() {
$(".dropdown-menu").hide();
}
If I click button, the dropdown should not go.
This is how you can do, again this is not ideal way to do it, since we have little data provided by you, I can only think of this kind of fix :)
window.addEventListener("click", function(event) {
if (!$(event.target).hasClass('dropdown-menu') &&!$(event.target).parents().hasClass('dropdown-menu')) {
$(".dropdown-menu").hide();
}
});
EDIT 1
Just add a parent div and keep a unique class for dropdown-parents which you don't want to close
suppose class name is dropdown-select
and then just edit the condition like this
if (!$(event.target).hasClass('dropdown-select') &&!$(event.target).parents().hasClass('dropdown-select')) {
You should add an extension to the jquery library then add this script since you are using javascript
<script>
$( document ).ready(function() {
$(".dropdown-menu").hide();
});
</script>
Related
Im using a bootstrap example of a dropdown menu. It opens and closes just how it should with a mouse click. I'm wondering how can I configure this code to mimic the same functionality when using the keyboard?
I don't want to create a new custom control. By hitting "tab" I can move from one focusable element to another.
What I've tried:
I've attached the role="button" attribute, as well as a tabindex=0. When I hit tab until i get to the dropdown menu icon (chevron-down), It opens up the menu when I hit the spacebar. However I cant close the dropdown menu, rather it stays open. Can anyone share any ideas on how to open and close this menu?
<div class="appExperience small-tile">
<div class="blue-bar">
<h2 class="tile-header">APPLICATION EXPERIENCE</h2>
<span class="dropdown hidden-xs">
<i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle"
role="button"
aria-labledby="Expand Application Experience Summary Dropdown Menu"
ng-src="{{dropdown_appExperience}}"
data-toggle="dropdown"
tabindex="0"
alt="Expand Application Experience Summary Dropdown Menu"></i>
<ul class="dropdown-menu appExperience tileContextMenu">
<li>
List Item 1
</li>
<li>
List Item 2
</li>
...
Ultimately, you can trigger a click event from JavaScript. If you're familiar with jQuery, you can do for instance:
$(window).on("keydown", function(){ $(".dropdown").trigger("click") });
I am working on one scenario in that I have menu which toggle on one button.
When I click on that Menu button it opens fine.
Problem persist with this code:
When I click on anywhere it toggle with open and close.
Now What I need is
When I click on anywhere on window menu should close but only when it is in open state. toggle only when it is in open state.
HTML Code :
<section id="wrapper"> <!-- Sidebar -->
<aside id="sidebar-wrapper">
<div class="togglebtn"></div>
<ul class="sidebar-nav">
<li class="sidebar-brand"> <a href="#" class="ripple">
<div class="icon"><i class="demo-icon icon-meeter"></i></div>
<div class="nav-label"> <span>Dashboard</span></div>
</a>
</li>
</ul>
</div>
</aside>
</section>
JavaScript code:
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
e.stopPropagation();
$("#wrapper").toggleClass("toggled");
});
$("body").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Any help would be much appreciated.
Just change your $("body").click function:
$("body").click(function () {
$("#wrapper").removeClass("toggled");
});
Right now what's happening is that you are "toggling" the class every time any part of the body is clicked. Toggling turns a class on or off depending on its current state. You need to just ensure that it is removed when the body is clicked.
You can actually use toggleClass to accomplish this, but you must tell it you are wanting to remove the class by passing it a state parameter.
$("#wrapper").toggleClass("toggled", false);
See the jQuery documentation for toggleClass: http://api.jquery.com/toggleclass/
I am using semantic-ui and I want to show some info text in dropdown. But it act as a link even it's a <div class="header item">
Here profile, settings and logout are link and rest are text(non-clickable)
sample mockup I tried with.
<div class="ui dropdown item">
<i class="icon dropdown"></i>
<div class="menu hidden">
<div class="header item">Narottam Guattom</div>
Action one
Action one
Action one
</div>
</div>
Semantic-ui treat that div as a link and dropdown get closed on click.
Is there better way to implement this in semantic-ui Or how can I prevent click event.
You should customize items selector. Try to use next code
$.fn.dropdown.settings.selector.item = '.menu > .item:not(.header)'; // change selector for all dropdowns
Also you can specify item selector locally. Read more about dropdown DOM settings to configure it properly
$( ".header " ).click(function( event ) {
event.preventDefault();
........//Custom code
});
I have a twitter bootsrap dropdown ,
<button class="dropdown-toggle" data-toggle="dropdown" >
<span>Select</span>
<span class="pull-right" ng-click="showpopup();">Show popup</span>
</button>
<ul class="dropdown-menu">
...drop down.....
My issue is that clicking on showpopup function also dropdown will dsiplay .( i know it is because of part of drop down).I cannot move showpopup span outside of dropdown.
Clicking on showpopup function should not open drop-down.
Is there any way to achieve this .
Please suggest
You can try to stop propagation after your ng-click function being executed.
Like this:
<span class="pull-right" ng-click="showpopup(); $event.stopPropagation();">Show popup</span>
This prevents the event from being propagated to the outer DOM elements.
So I have this menu and when I click on a button I need to create another div under the menu. I have done that. But when I click on another button on the menu that div is still there and I want it to dissapear/collapse. So how should I do it? What I found until now is how to hide a div when clicking on a specific show/hide button, but I need to hide that div when I click any button on my page...
Any help is highly appreciated.
My code is this but I don't think it is relevant (I am interested in the process, how should I do it):
<div id="container">
<ul id="nav">
<li>Despre noi</li>
<li>Projects</li>
<li>Implica-te</li>
<li>Stiri</li>
<li>Contact</li>
</ul>
</div>
So this is my menu and when I click on projects this div shows up
<div id="menu_lava">
</div>
which is a lavalamp submenu. But how can I make it to collapse when I click on other buttons on my main menu?
Hide all info-div's on a click and just show the sepcific one:
Here's a jsfiddle (using jQuery):
http://jsfiddle.net/FKeAF/1/