I'm using mapbox to show a pulsating icon of the closest ping for a given line. Meaning, I have a geojson line that is comprised of multiple ping locations, and what I am currently doing is when I hover the line I find the closest ping and display it.
Now the issue with this is this ping has a popup that shows some specific information about each individual ping. This popup covers the line in some situations which prevents the mousemove event on the map. This makes it so the closest ping isn't showed all of the time because the closest ping to my cursor location would be under the popup. Anyone have an idea of how to fix this? I've tried a few things including adding pointer-events: auto to the popup.
Here is a codepen showing what I'm talking about
You were super close. The correct answer is pointer-events: none;
Updated codepen.
(Edit - John)
For others coming to this I needed to make some popups "readonly" that would pass events through while leaving other popups as is. Steve was correct that setting pointer events to none works, but there isn't a way through CSS to style a parent element (aka the popup-content class). I ended up adding a class to the popups content element when I want to show it. Because Mapbox doesn't support this you have to fidget with it a little bit. The last change/update you make to the popup during a render cycle has to be the class update or Mapbox will remove the class
CSS
.no-pointer-events {
pointer-events: none !important;
}
JS
const popup = marker.getPopup();
popup.setHTML(... html here ...)
if (!popup.isOpen()) {
marker.togglePopup();
}
popup._content && popup._content.classList.add('no-pointer-events');
Related
I mean hiding the menus in the red box, and only show the console.
Yes it is possible, with a devtools extension and the "Allow UI themes" experiment (see the "Official method" part of my answer at Custom.css has stopped working in 32.0.1700.76 m Google Chrome update). With this method, you will be able to define arbitrary stylesheets for the devtools.
/* Contents of Custom.css, use with https://stackoverflow.com/a/21210882 */
.tabbed-pane-header-tabs[aria-label="Panels"] .tabbed-pane-header-tab:not(#tab-console),
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-header-tabs-drop-down-container,
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-tab-slider {
display: none;
}
To find the above CSS selectors, I inspected the devtools, and made sure that the selectors are specific enough. The first part of each selector is to select the top row (the right part of the selector would also match tabs within the Elements/Sources panel). Instead of display:none, I used background:red (with varying colors) to more easily visualize the impact of the proposed changes.
I'm using Angular 6 and Angular Material. I'm attempting to implement a simple drag and drop list inside of a Material tab (). Drag and drop works fine outside of a material tab, but inside the tab it's very slow (18 seconds to DnD 1 item in a list of 5 items). The onDragEvent fires many many times even when the mouse isn't moving. I've tried detaching (onDragStart) and reattaching (onDrop) the change detector. It doesn't make a difference.
Here's the html:
<div (dragover)="onDragOver($event)">
<div *ngFor="let item of listItems, let i = index"
(drop)="onDrop($event, i)"
[draggable]="true"
(dragstart)="onDragStart(i)">
{{item}}
</div>
</div>
Here are the functions:
onDragStart(i) {
}
onDragOver(event) {
console.log('1')
event.preventDefault();
}
onDrop(event, i) {
}
Thank you.
It appears that as I dragged the item around the screen- even briefly, the Angular engine was overfiring and queuing up a ridiculous number of calls of onDrop and/or onDragEnter. And that when angular hooks those events, it also assumes that something in the angular components has changed and it runs through the change detection routines.
Each... time.
What I did that fixed my problem was to turn off change detection when dragging began and turn it back on when dragging was complete.
Here is a brief hint at what I did:
import ChangeDetectorRef from '#angular/core'
inject ChangeDetector into your constructor:
constructor(private cdr: ChangeDetectorRef)
call detach from the dragStart:
this.cdr.detach();
call reattach from the drop and dragEnd:
this.cdr.reattach();
If your component is buried deep on your page, you may have to detach change detection at a higher level in order to see results.
i was experiencing a similar issue, where dragging when there were many elements on the page was unbearably slow. I found that removing the (dragover) angular binding, and replacing it with pure javascript instantly solved the problem
i switched
(dragover)="this.onDragOver($event)"
to
ondragover="onDragOver(event)"
you also need to declare the function in index.html instead of in your typescript file or html template (hence pure javascript)
I'm using validators on several TextFields, which causes to show a popup next to them. As far as I found out, this is realted to the Vaadin errorindicator.
I now want to disable this popup-message, because it creates unhandy behaviour when it comes to using the application on tablets, e.g. an iPad. I already created a separate label showing the error-message and set the errorindicator to hide using CSS as follows:
.v-errorindicator { display: none; }
The pop up keeps showing anyway. Does anyone know how to disable the popup irrevocable?
Thanks, Hendrik
You should cover the validators with try-catch blocks, in the catch block you can remove the errorstyle with yourTextfield.removeStyleName("v-textfield-error"), also the pop-up won't show.
I am working with leaflet api.I can draw rectangles and polygons.I have bound the popup with every rectangle and polygon.When i click on drawn shape, popup opens(leaflet functionality).Popup contains some html(image).
As i am working on a demo application, i am wiling to try the fancebox plugin.
Means, when i click on drawn shape, instead of popup, i want to open up that image using fancybox.
Can i do that using simple method like using another function instead of .bindpopup.
Working Script (image loaded using fance box when we click on popup)
e.layer.bindPopup("<a class='fancybox' rel='group' href=''><img /></a>");
I can understand there must be some other javascript function to do it.
If there is some way to do it please let me know, as i am new to leaflet didn't have enough mental power to understand it yet but i hope i will....
Thanks for your time :)
I would just do e.layer.on('click', function() { //do fancybox init, perhaps like $(body).append("<a class='fancybox' rel='group' href=''><img /></a>")})
Although it makes a lot more performance sense to bind that event on the L.FeatureGroup holding all the shapes instead of one by one.
The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.