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();
Related
In this Confirm to Delete dialog, I am going to click the Cancel button. When I am pressing the button, its css class is chagned and also its style is chagned. The button's backgournd color gets deeper.
I want to copy the new class names and its css content in the devtools. But when I put the mouse in the devtools and right click the mouse button to open the context menu to copy the class names, the class names in this Cancel button just go back to its original state.
It seems that if I click anywhere in the screen, the Cancel button lost its pressing CSS classes. How can I freeze the pressing state CSS classes? I tried with checking the active, hover, visit state in the devtools, but it cannot get the Cancel button's backgroud color get deeper.
Here, after clicking this Cancel button, and do not click anywhere else, it is like this.
After loading the page, not click the Cancle button, check its state in the devtools. Its backgroud color cannot get deeper.
If you know conclusively that the button is getting new classes assigned to it on click, you can add a breakpoint to the element itself on an attribute modification. The steps:
Find the element in the "Elements" pane.
Right-click the element in the "Elements" pane and select Break on > attribute modifications
Click the element
If it gets a new class, that counts as an "attribute modification," which will trigger the debugger to break and freeze the state-- from there you should be able to investigate the DOM in its current, frozen state.
Here is my screenshot showing me take this actions for the snippet at the bottom of the question-- it worked for me in Chrome on Windows 10.
function addClassToBtn() {
const btn = document.querySelector('button');
btn.classList.toggle('red');
}
.red {
background: red;
}
<button onclick="addClassToBtn()">Click me</button>
If that doesn't work, you could always be less targeted-- if you wanted to cast the widest net possible, I believe that right clicking the <body/> element in the "Elements" pane in the devtools and selecting Break on > subtree modifications would cause it to break anytime anything changed in the DOM beneath it-- but obviously that could cause the debugger to trigger a lot, so proceed with caution.
I need to prevent the check of a checkbox by clicking on its label.
I use the angular material checkbox.
I partially manage to do it using the preventDefault() method but the checkbox still shows focus style if I click on the label.
What I need is: if I click on the label, nothing should happen to the checkbox (not checked, not focused on).
Please take a look at this stackblitz link to better understand my issue: https://stackblitz.com/edit/angular-2zyvdp?file=src%2Fapp%2Fcheckbox-overview-example.html
If you don't want to change ripple behavior or CSS, try this:
<span (mousedown)="$event.stopPropagation()" (click)="check($event)">
Check me!
</span>
The ripple effect is triggered from the mousedown event (hence why you don't see them when using the space bar), and you need to use stopPropagation(), as preventDefault() isn't enough here.
StackBlitz link here
Add below css in style.css & check
span.mat-ripple.mat-checkbox-ripple.mat-focus-indicator {background: none !important;opacity: 0 !important;}
I've created a 'show on hover' mat-menu button as you can see here:
https://stackblitz.com/edit/angular-show-hide-menu?file=app%2Fshow-hide-menu.scss
The problem is, when I click the button it disappears, leaving me with an odd-looking mat-menu. I've tried targeting the button's active or focus states using css (shown in the example) but that doesn't appear to help keep the active button appear.
When you click the button in the example you will see the blue background flash when the button is active, however it doesn't stay blue. The blue background is there just to debug, but basically I want the 'display: flex' css to kick in whenever the button is clicked i.e. while the selected menu is active.
Any help greatly appreciated!
-S. Arora
Your "More Options" button disappears because it's no longer active or focused after the menu opens. In fact, you can't make it active or focused because the menu creates a transparent backdrop layer that covers everything else on the screen, which you can see when you inspect the HTML. That's why you can't get the button to reappear while the menu is open.
One way around this is to watch the state of the menu itself and add a class to the button whenever its associated menu is open:
<button fxFlex="80" mat-icon-button matTooltip="More Options"
[matMenuTriggerFor]="optionsMenu" class="hover-display"
#menuTrigger="matMenuTrigger" [ngClass]="{ 'open': menuTrigger.menuOpen }">
Then you can use this class in your CSS instead of targeting the active or focused states:
.node .hover-display.open {
display: flex;
}
Is there way to open pop up Iframe lightbox on hover of any div.
If any of you guys knows such examples can you please post the link here
Thank you
Using colorbox, a jquery Lightbox alternative. Very simply you, can use an anchor element :
<a class="youtube cboxElement" href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a>
Check the Demos
If you want the popup to appear on hover, I think you will have to customize it on your own, by adding an event listener to the hoverable element :
$('#hoverableElement').hover(
function(){
$('#hoverableElement').colorbox();
} ,
function(){
$.colorbox.close();
}
);
where the element you want to trigger the popup will have the ID "hoverableElement".
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.