I want to select the next and prev buttons on the month view calendar to hide a dialog box when switching months.
Something like:
$(selector for buttons).live('click',function(){$("#dialog_frame").css("visibility", "hidden");
I can't find a selector for the buttons. Is there one or is there a way to create one?
Thanks for any help.
Cheers
I went on the site and right clicked over one of the buttons to inspect the element using Chrome Dev tools.The buttons:<span class="fc-button"> ► </span>
There's your selector.
Related
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;}
when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button.
I need to change that style, but I can't find it using inspect element. How can I find what style is applied and how can I change it?
I had this problem the other week. If you're using chrome, open inspect element, code highlight the button, right click, select Force Element State, select :focus. This will show you the CSS code that you need to alter.
Having an issue with this myself until I applied the style to .btn-default:active:focus
I have a Kendo menu as my main menu, with config starting like
#using Kendo.Mvc.UI
#(Html.Kendo().Menu()
.Name("main-menu")
.OpenOnClick(false)
.Items(items1 =>
Finding no other config option, I thought making OpenOnClick false would make some magical OpenonHover true. I want menu items with children to open on hover so that I can get rid of the arrow to the right of the parent menu item text, as there is absolutely no spacing between the arrow and the tick. I have unsuccessfully tried the :before and :after' pseudo-selectors to insert space, to no avail. All I could get inserted was a literal " hehe.
Take a look at this jsfiddle. FYI-it's using jQuery, not using Html helper. Hope it's helpful to you.
You can open menu on hover.
JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.
What's wrong with the CSS to make it behave this way?
focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..
In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.
What might work for your purposes is active, which you can view here.
There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:
$(function() {
$('#navbar *').attr('tabindex', '1');
});
end everithing comes in place. You can do it using pure JavaScript of course.
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.