In the first tab of an Ionic 4 app, a ngx-gauge is shown with some data from server.
Below the gauge, some divs are displayed. Each of those div have a (click) function.
The three divs on the bottom work fine. However, the three first divs (CO2, PM2,5 and PM10) are not working properly... To activate the (click) event of those 3 divs you might have to click several times, while to activate the (click) event of the other 3 divs below (TVOC, Temperature, and Humidity) one click is working fine.
The version of the ngx-gauge is:
ngx-gauge#1.0.0-beta.10
If I separate the gauge and the divs with many <br>, all the 6 divs are working fine with only 1 click.
Any idea of how to solve this problem?
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
I am doing an application which the user receives a list of items to choose. When the user moves the mouse, a DIV:Hover class works backgrounding the color of the div, and when he clicks at one div to select it, an ONCLICK function marks the clicked div and redirects to a website( _blank ). Perfect, but when you go back to this page, there is two div selected. The div user has clicked and another one. If the user moves the mouse, even if a little, the second div goes backs to normal.
What I want is to go back to the page and only the div clicked is marked.
It only happens on Google Chrome
Jsfiddle ---->
https://jsfiddle.net/u4ssywov/23/
Print Screen -->
http://postimg.org/image/ynr6vjdlh/
Is it possible to solve and not mark a second DIV?
If I do not redirect to a website, it works normally, but I need to redirect. =(
I must have tried a hundred time by now to select an html element and then create a snippet with Chrome SnappySnippet, but each time I get the error
Error! DOM snapshot could not be created. Make sure that you have inspected some element.
In this video it looks easy, but out of those 100 times, I have been able to make it work once with something random.
Question
Is the selection somehow time based, so I have to click on SnappySnippet in e.h. less than a second?
How do you keep the selected element, so when moving the mouse to the SnappySnippet button other elements are not selected from hovering them?
Use the tree-DOM menu, left click on a div so it becomes dark blue. Now it is selected even thought hovering the mouse over other div's it will remain selected.
The problem you have is probably because SnappySnippet can't handle large div's. Try with a very small one first.
I'm using three bootstrap modals with identical html forms in each, with the exception of the PayPal button ID.
For some reason, on the live site I cannot type in the forms in modal 1 or 2 unless I've clicked on modal 3 and clicked in one of the text boxes. But the buttons at the end of each form work fine with or without the textboxes working.
(& It's the same for Chrome, Mozilla and IE.)
Any suggestions?
Located at:
http://mytravelagentportal.com/deluxe/test/
Maybe it's because modal 2 doesn't have style="display: none;", it's just have opacity: 0, and you can't click on elements behind it (modal 1). And because of this you can't click on button 2, it's also behind hidden modal 2
Bootstrap does not support multiple modals, so I wrote some javascript to switch out the button value for paypal and used one modal. Code can be seen at the same link.
This alternative was cleaner than using the three different modals anyways.
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.