I would like to close dropdown button when user click a outside space. How to control it ?
https://stackblitz.com/edit/js-as5io9?file=index.html
You could add click event listener to the window.
When the window is clicked, the listener will set the checked of checkbox to false and close the dropdown menu.
Here is the code:
let checkbox = document.querySelector('#delete-drop-down');
window.addEventListener('click', ()=>{
checkbox.checked = false;
});
checkbox.addEventListener('click', event=>{
event.stopPropagation();
});
event.stopPropagation() stops the click event on checkbox propagate to the window. So that the dropdown menu will not be closed immediately。
Done using Javascript
added some CSS class and to close the dropdown when clicking outside is done by creating an invisible div id (invisible) and by using js changing the class of dropdown such that it becomes invisible.
https://stackblitz.com/edit/js-8qih3q?file=style.scss,index.html,index.js
Related
Frontend noob here, please be nice.
I have a dropdown menu using ui.bootstrap.dropdown. The users of my website are used to copy-paste stuff from this dropdown. In order to do so, they usually click down inside the dropdown zone, select the text they want to copy a little too fast and release the click outside the dropdown zone. With this behaviour, the dropdown closes before the user could copy-paste their selection.
Instead of closing the dropdown on an mouseup event outside of the dropdown zone, could it be a mousedown event that would close the dropdown ?
It all has to do with the auto-close setting. By default, it is set to always. With this setting, the dropdown collapses on any outside mouseup.
To be able to control it more finely, I had to use the auto-close="disabled" setting coupled with is-open="variable.isOpen".
Then, I created an callback on a mouse down event that is outside of the dropdown
$('html').mousedown(function(e) {
if($scope.variable?.isOpen && !e.target?.closest('.classOfDropdown')) {
$scope.variable.isOpen = false;
$scope.$digest()
}
});
I initialized $scope.variable inside the on-toggle callback.
The tooltip displays details about the marker (image) when the cursor hovers on the marker. I want to place buttons inside the tooltip which can have different effects on that map. But I don't understand how to add event listeners for the 'onclick' event of the button.
marker.tooltipHTML = '<center><button onclick=\'alert("hello")\'> button </button></center>';
//marker is an object of MapImage
Only alert() function seems to be working.
How can I add a function to handle the 'onclick' of this button (present in the tooltip)?
Pressing button will disappear, and the next button appears in HTML-
I want to create 5 buttons When the first button in a specific location. Only after the user clicks on the first button, then the user will see the second button which is in a different location.The same applies to all the buttons.
I RUN IT HERE:
http://bit.ly/1lkoLSK
another problem that the code run only on firefox-why ?
I don't know if i understand your problem correctly, but show first button, than on click just hide current active element and show next one. JSFiddle
$('button').click(function(){
$(this).hide();
$(this).next.show();
});
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
When I click a button, then a drop down menu must be shown. When I click anywhere in the page it, needs to hide. The problem I have is here: when I run the page, I can see the drop down menu instead of the click event. I tried with different div tags, but to no effect.
Demo: http://jsfiddle.net/Navya/69KGD/
You need to set your dropdown list visibility to false (to hide it) when page loads.
$("#container").hide();
After that, when you click the button you set visibility to true (show it).
$("#container").show();