I have a CSS menu that when you hover over a li it shows a sub menu, example ui: http://www.screencast.com/t/JIa2NvbreF8V
I added code that on a model device is would 'focus' the element when you click/tap it, like: $($event.target).focus();
problem is, when I tap a <a href="\blah"> link inside my page navigates fine but my menu stays open. I tried retriggering the body to be the focus but no luck. Anyone got a good idea on how to accomplish this?
What I would do is add a class to control the "focused" state, so that when you click on a link you can easily remove it.
Shouldn't be complicated but i would need to look at the code :O
Try the below code
$("a").focusout(function(){
$(this).css("display","none");
});
Regards
maha
inside that jquery selector have it so when you click the target it also changes the style for the parent li:hover
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;}
Bug:
Z-Index NOT working on Material Dialog
What is the expected behavior?
Z-Index should work on Material Dialog or Dialog should be on top of everything else.
What is the current behavior?
Material Dialog gets covered by select's options that are below.
What are the steps to reproduce?
https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html
Type text.
Select dropdown.
Screenshots: https://postimg.cc/gallery/2i3tc2sbc/
Is there anything else we should know?
Tried CSS fixes:
.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
z-index: 9999 !important;
}
NONE of that worked.
The class holding the matdialog overlay is cdk-overlay-container
Add this code to your style.css
.cdk-overlay-container {
z-index: 9999 !important;
}
That should solve the issue.
The <select> element is an interactive content element in HTML. It and behaves like a right click context menu and is rendered above all document elements.
In your case, when you click on select after entering your name in the field, the following things happen in sequence:
Blur event on the textbox is called and dialog opens.
Select menu opens.
So, according the sequence, what is happening is correct i.e. the dialog is opening first and then the select, so the select is above dialog which is correct.
But of course the interface does not seems good when this happens so there is a workaround, i.e. hide the select when the dialog opens and then show it again after lets say 0.1 seconds. As the select hides, its menu will hide with it.
I have implemented it for you. Please have a look at this Stackblitz: Select closing on dialog open
Hope it helps.
I can't understand how to make something like in this site: __smashingmagazine.com
If u resize the window, the search will be with a button. So... try to click on this search icon... the new div will appear with search input. and pay attention to the behavior of it: no matter what u gonna do next this div won't hide it self, but only if you click on 'x' that appear instead of search icon... and this is pure css, right?! how this possible...
I found this article:
Click here
but the behavior is very, very different... and i don't like it at all.
Any idea how to make it work like in the site above? anything would may help!
Thanks!
The example from Smashing Magazine uses the :target psuedo class to change the CSS of the elements when an anchor is clicked. Here's a simplified breakdown of how they've achieved that behaviour.
The anchor is configured to set a fragment identifier in the URL, in the case of Smashing Magazine this is #ms. The have an anchor like this:
Search
When clicked the fragment identifier is set to #ms, they then use this to make the search appear using the :target psuedo class.
#ms {
display: none;
}
#ms:target {
display: block;
}
When the fragment identifier is set to #ms, the :target styles are activated, displaying the search.
Here's a simple example: http://jsfiddle.net/we76L66h/
They are using :target with children (#ms:target + div.example) to also change the styling of children within the targeted element. This is how they make the button change to a "close" button when the #ms fragment identifier is set.
When I have a menu item which contains a submenu, this submenu is shown inside the menu's div, screwing the css (hover over the Services tab):
http://jsfiddle.net/jYXnE/2/
There this part of the JS (that everyone seems to use) which bothers me when initializing the menubar plugin:
position: {
within: $('#frame').add(window).first()
}
Since there is no frame id anywhere in the official examples, I guess it creates a div on-the-fly?
I compared my code to some other menubar jsFiddle and I can't find the issue to it, any help would be highled appreciated.
It seems like I had forgotten to link menubar's CSS. Everything is fine now.
First, please take a look at this pen showing just the menu + the code (preview the menu here).
Coming to the point: In the navbar that you see, clicking on the "Channels" menu shows the menu item sliding out. The problem is, the menu's background doesn't represent its active state (i.e. #fff background and #222 color).
Setting the background-color when the mouse is hovered on the menu, is easy. But this one's tricky. I did try, :active selector to no avail. Any ideas?
SCREENSHOTS:
You could add a class to the li once the menu is open and remove it again.
BTW: :active works for the moment you click on it.
Since it appears as though using jQuery to add/remove a class is the only way to go, I went ahead with it. Here's the code I used.
jQuery(document).ready(function($){
$('.menu-item > a').click(function(){
$(this).toggleClass('selected');
});
});
The code finds the link element a one level down the element with .menu-item class (li in my case), and adds/removes class .selected to the link element.
Here's a fork of the original pen with the menu functioning the way I intended it to. You can preview the new and functioning menu here.
(Full credit to the code provided in this question. More info in the official jQuery documentation.)
UPDATE: You might find this answer extremely helpful (a better, simpler solution).
Example code:
jQuery(document).ready(function($){
$('.collapse').on('show hide', function () {
$(this).siblings("a").toggleClass('selected');
});
});