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();
Related
When i click dropdown button and click it again for closing focus still remains. even when i move mouse away. How can focus removed for that case?
One possible solution is to remove the focus on the second click with the help of element.blur() - here are the related docs. You can add the class to the button on the first click and if the button has class (it will have on the second click) - just use blur.
But keep in mind, that some users want to interact with your site with the help of a keyboard, and removing focus will be annoying for them. Do you need focus to be visible on the button before opening the dropdown? Another possible solution is to remove :focus style from the element completely (outline: none), but it's not recommended.
I have a menu within a submenu with some items. When I open the menu by click and try to click on the submenu it doesn't open. I know because I set this property [autoClose]="true". But if I change the property to false, ok it open correctly the submenu but if I click outside the menu it does not close. The behaviour that I want is that if I click outside the menu I want that the menu does close.
https://stackblitz.com/edit/angular-ivy-vzzmeb
The submenu is called Roles
You can add a onBlur method to programmatically close the menu
When you repeat the same selection item, already selected, the dropdown menu remains open. I would like to collapse the menu as it occurs when you select a different item. You can check this behavior in the demo. How can I modify the element to collapse the menu in any case?. Thanks.
The paper-dropdown-menu has an 'opened' property. You can listen on click of the dropdown content and if opened is true, set it to false.
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();
});