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.
Related
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
I've started using flexicious data grid for the last couple of weeks and I have come up with a need to put a clickable button next to the value in my column. I add the button using javascript but the problem is that when I want to click on the button my item-click fires a row selection. I have to use both the row selection for other functionality and button click for popup functionality.
Is there some built in functionality for adding buttons in flexicious? I can't seem to find any in their documentation. Or if there isn't how can I move the button on top of the row so that clicking the button doesn't fire row click functionality?
I figured this out by keeping it simple and ignoring flexicious documentation.
I added
item-click="onGridItemSelectedOfferCombo"
and then in this function I did a small hover over button test
vm.onGridItemSelectedOfferCombo = function (evt){
var isHovered = $('#clickableButton').is(":hover");
if (isHovered == true) {
//do my thing
}
}
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();
Is there a way to capture the events triggered on HTML controls before they are forwarded for default (generic) handling by the control itself. In my case, I want to prevent a element dropdown to open when a user clicks on the control. e.g. On this user click, OnClick() event gets fired and is handled by the default control which open the dropdown. I want to stop this from happening.
Can I attach a custom function to this event and redirect the event handling to this one instead of the default code that opens the dropdown?
Thanks
onclick,onmousedown and onmouseup will not help you to prevent the selectbox from opening. I'm not asking why you want to do that, but if you really can't use any other solution, like for example (changing selectbox to the readonly inputbox), then, you can try the next solution.
One way to prevent the box from opening, is to create an overlay container, which will block the the focusable area of the select. This can be achived by placing the div after the selectbox and givving it the sizes and the position of the selectbox.
<div style="position:relative;">
<select style="width:100px;height:30px">
<option>hello</option>
</select>
<div style="position:absolute;
left:0;
top:0;
width:100px;
height:30px;
z-index:2;
background-color:black;
opacity:0;filter:Alpha(Opacity='0');"
></div>
</div>
Event then, it will work only for IE >= 7. Not for IE6, cause selectboxes in IE6 are strange( maybe you can try to fix IE6 with some iframe hack);
Fairly old question with some good suggestions, but none seem to directly answer the original question. In case anybody out there is wondering, I believe the OP was wanting to keep the visual appearance of the system/browser select element, but use his own custom drop-down menu instead of the system/browser drop-down menu.
In this case, the onclick event will occur too late for you to stop the actual drop-down menu from displaying. What you want to do is bind to the mousedown event, and prevent the event from propagating to the default behavior:
document.getElementById('my_select_id').onmousedown = function(event) {
// ... do something here...perhaps display your own custom menu, an advanced selection chooser, focus another element, display a message, or some other custom handling.
event.preventDefault(); // This prevents the drop-down menu from displaying
}
Notes:
Replacing the drop-down with a custom-designed element (as suggested by others) isn't always an option. In some cases, you'll end up either having to completely omit default/system drop-downs from your site (in favor of a custom-designed element), or you have to live with a mismatch in visual appearance due to browser/system/theme differences (unless you feel like designing the custom element to match every conceivable visual aesthetic/theme.)
Disabling the drop-down will not work, as it will prevent the event handlers from firing.
Using optgroups will still allow the drop-down menu to be displayed.
Replacing the drop-down with an empty version will still display an empty drop-down menu.
This is the answer I gave on another, similar question.
This works great for me in IE and Chrome, there's no flicker or anything:
html
<select id="MySelect"><option>Hello</option></select>
js
MySelect.onmousedown = function ()
{
window.setTimeout(function ()
{
//- An immediate blur, then refocus stops the options from being displayed
this.blur();
this.focus();
//- so now we run our custom function
runOtherFunctionInstead();
},0);
}
Make sure the js runs after the select element has been parse by placing it in an onload or ondocumentready or a script block after the select element. Haven't tried it in Firefox or Opera. Assumedly it would work in Safari, though.
EDIT
As suggested in the comments, the popup will still appear for a double click in IE (all versions). This is due to a bug where the mousedown event doesn't fire for the second click (whoops). You can quickly hide the options again by using the blur, focus method in the ondblclick event and if this method works in Firefox and Safari, I still think it's the best solution considering most people don't double click select boxes.
you need to set selectbox to be onload disabled: disabled="disabled"