I try to use an event listner on the following icon (click) :
but when I inspect it I just got the time and not the icons and their ids.
PS : both of them i.e the time and the two icons are in the same place, when I hover on the time I got the icons, but couldn't inspect the icons to apply the listner on it!
Related
I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.
https://stackblitz.com/edit/angular-xsscrm
I have included a stackblitz with a demo of the behavior.
What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.
Thanks for the help
The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.
Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item>, you can create an <ng-container> element to house your *ngFor. See below stackblitz:
https://stackblitz.com/edit/angular-xsscrm-kx6jyd
Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview
There's transition animation in page navigation. But I want to apply it on SemanticView.
I have a list of list of object, on the pivot, it will display a list of
list first. When user want to view the detailed information about the list, the user will tap it, and the list of list will removed, and display the list of object. Tap hardware back button will bring out the list of list again.
Without confusing the user, I want to display transition animation when user tap the list or the hardware back button, it will have ForwardIn, ForwardOut, BackwardIn, BackwardOut animation when the list changed. How do I display transition animation on the SemanticView without nagivating to other page?
well, inever tried this but you probably had to create a class with extend to animation class something like
public class Animation : AnimationWindowsPhoneClass
{
implement the animation.
}
or.. you can create your own animation using Storyboard class, you can read here
I want to create transparent layer with url link when clicked anywhere on page must open the link in new window. and on single click the transparent layer must close and then come again after a time interval.and I want this to be done in my Blog.
use jQuery and try steps below:
on ready function of jquery, put the clicking overlay element (say its id: elementontop) over the entire page with a z-index higher,
grab click event of overlayed layer (i.e. #elementontop) and do following -
Hide overlaying element
Determine cursor coordinates
Get element on those coordinates
Trigger click on that element
to execute #2 you may get hint from following code -
$('#elementontop).click(function (e) {
$('#elementontop).hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
});
I am creating icon menu (toolbar with icons) in gtk# and I do not know why my application always selects (highlights) first icon (every parameter is default). Is there a way to have all icons unhighlighted (highlight only when cursor moves over icon or user clicks on icon)?
Every answer will be very much appreciated.
It looks like it has keyboard focus. You probably want to give another widget the default focus.
I have the following HTML code:
<div onclick="window.open('http://example.com')" >
<p>1234 Main St, New York, NY</p>
<p>Price: $200,000/p>
<p>4 Beds / 3 Baths</p>
<p>2000 sqft</p>
More Info
</div>
If the person hovers over the part of the DIV that is not the hyperlink, it only opens one window.
If the person clicks on the hyperlink within the DIV, it opens 2 windows (one for the DIV and one for the hyperlink).
Is there any way around this 2x opening window scenario?
The simple solution:
More Info
You could make the div clickable by making the link into a block element with css
div a {
display: block;
}
That's because the click event bubbles up. It initiates when you click the anchor element, than bubbles up to the div, and executes that too.
You need to capture the click event inside the div (using a function), and then call the event's stopPropagation method to stop it from bubbling up.
More info about event bubbling here: http://www.quirksmode.org/js/events_order.html
You could use the same function in both the DIV and the A HREF, and manage the opening inside that function to call the window only once, that will work.
Edit : If you care at least a little about Search Engine Optimization you should not use that caption for the link, but more something mentionning the content of the next page like "House details" or better depending of the context/look of the page.
I came across the same issue and please don`t laugh on my silly mistake. But two tabs was opening because i am having a link and having target='_blank' and also calling a function too on the same like:
<pre>
$('#foo').on('click',function(){
// some code
window.open("https://www.google.com","_blank");
});
where also i have added the target as _blank. i removed the target attribute from the anchor and it works fine for me. Hope you are not doing same.