I have div with a button inside it. I want when a user clicks on the div (outside the button's rect) to initiate the button click with its animation. Is there any simple css solution, without javascript?
Related
https://i.stack.imgur.com/JgJTQ.png
I have button here, the parent component is the entire black block, while the child component is the button surrounded by blue. Both have an onclick functionality. When I click the blue button, the parent component onclick effect is triggered instead. How do I trigger the child component onclick effect when I click within the child component?
This is called event bubbling.
when you click the button you're also implicitly clicking the element it is inside.
Basically, when you click an element, it will then proceed to "bubble up" to the top of the DOM, invoking the onClick for every element.
You can prevent this by using event.stopPropagation().
button.addEventListener('click', e => {
e.stopPropagation();
// other stuff
});
I have put textarea over button, but it made button not clickable at the positions where textarea is. How can I disable textarea selection and make button clickable on whole surface, while textarea is still visible?
The same with small image (icon). If I put icon over button it will not be clickable on that position.
You can use pointer-events: none on the overlapping objects which will let you "click through" it, i.e. click the element below it.
More information: https://css-tricks.com/almanac/properties/p/pointer-events/
I have a button that I want to open the mdl-layout__drawer. For example, see the official example here and note the menu icon opens the drawer upon clicking.
I have a button that, upon clicking, I want the drawer to open. I have tried both of the jQuery selectors below with the jQuery.click() method. Neither works - only a screen flicker. Any ideas?
$(".mdl-layout__drawer-button").click();
$(".material-icons:contains('menu')").click();
Make sure your code is inside $(document).on('pageinit') and you are using the correct selector to detect the button click like in the example below:
$(document).on('pageinit', function() {
$("#idOfTheButton").click(function() {
$(".mdl-layout__drawer-button").click();
});
});
No need to click the menu button, toggle sidenav visibility with material API
document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
I am using gwt 2.4. And I am not using uibinder.
I have a button which has a background image. when I place mouse on this button it should display a text saying "submit" . The kind of text which says what the button does.
Button is a UIObject and so you can use setTitle method on a Button to set the tooltip.
Or if you want to do something else on mouse over. Just make use of the mouse handlers.
Read Button documentation for more details.
I have a button inside a jquery mobile popup div. I will like to set a onclick javascript function to let the popup div close without using the id of the div once the button clicked. Any solution?
Can call parent too:
$(this).parent(".ui-popup").popup("close");