I have a problem with the Popup of OpenLayers 4, when I open the popup info and I'm inside the div with the pointer, it still triggering the hover popup with the data behind the popup, how can I prevent that?
I'm using this CSS code for the popup:
#popup {
z-index: 20;
background-color: #fff;
}
The popup is created with the overlay layer:
overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
But the pointer still passes through the div. the popup contains a lot of div and inside span
In the screenshot the hover popup was triggered when the pointer was on the Vehs text
You can refer to this for the code I use for the popup, the only difference is that I have a hover popup, I think the problem is on the creation of the click popup (the one with button) and the real z-index of it.
http://openlayers.org/en/latest/examples/popup.html
You can use pointer-events:none before its open and pointer-events:all once it's in open state
In the end, I found a very simple way to solve the problem, inside the function I call for the hover popup I add a simple if statement
map.on('pointermove', function(evt) {
info.html("");
if (overlay.getPosition() !== undefined) {
return;
}
.....
}
Related
I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?
Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});
Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);
Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}
What I want to do with jquery mobile is when I click a button on the first popup window, the first popup window will disappear with a flip animation, after which the second popup window will appear with the same kind of animation. I tried to use this in the event listener:
$("#div_first").popup("close");
$("#div_second").popup("open");
The first popup window did disappeared. However the second popup window didn't popup. How can I do this with mobile jquery? Thank you!
You need to call next popup once the current popup is closed popupafterclose. Moreover, it is important to data-history="false" to popup div in order not to go back in history to previous activity.
$("#pop1").popup("open", { /* open first popup */
positionTo: "window",
transition: "flip"
}).on("popupafterclose", function () { /* open second popup */
$("#pop2").popup("open", {
positionTo: "window",
transition: "flip",
reverse: true /* optional for reverse effect */
});
});
Demo
I'm working on a Google Maps app, and using the infobox plugin from Google I've run into a bit of trouble.
It seems that the close button no longer wants to work on the infoboxes, which is strange because I did have it working before, as I am turning a kiosk app into a web app. I am using a custom close button for this, but even if I switch it to google's default close button I get the same result. The infobox only closes when you click another marker on the map to open another infobox. Once one is open, it seems to be impossible to remove it. The code has not changed from the kiosk to the web version of this app...
Here is some code I'm using to instantiate the markers:
var displayingInfoBox;
// Options for the infobox
var popoverOptions = {
disableAutoPan : false,
maxWidth : 0,
closeBoxMargin : '8px 32px',
closeBoxURL : 'url/to/close_button/image.png',
infoBoxClearance : new google.maps.Size(50,50),
isHidden : false,
enableEventPropagation : true,
boxStyle: {
border : 'none',
opacity : 1.0,
background : "transparent url( 'url/to/background/image.png' ) no-repeat 0 0",
width: "266px",
height: "109px"
}
};
// Add listener to the marker to open the overlay -- where popupInfo is the content to display inside the popover and marker is the marker on the map
google.maps.event.addListener(marker, 'click', function( event ) {
createOverlay( marker, popupInfo, new google.maps.Size(-35, -235))
});
// Method to show in the overlay
function createOverlay(marker_, content_, offset_) {
// close the previous overlay if there was one.
VW.Map.closeInfoBox();
// set the provided content to the popover options
popoverOptions.content = content_;
popoverOptions.pixelOffset = offset_;
// use the infobox lib to create an overlay
displayingInfoBox = new InfoBox(popoverOptions);
// show the overlay over the marker passed in
displayingInfoBox.open(myMap, marker_);
// return in case the caller wants to do something with this.
return displayingInfoBox;
}
Any help with this is much appreciated.
Thanks in advance!
EDIT -- I am using the INFOBOX API, and not the InfoWindow object from the maps API. This is what I'm talking about: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Graham
I had this problem. I used my main CSS stylesheet to style my infobox rather than boxStyle in the Javascript. When I had the opacity setting on anything other than 1.0 (or removed altogether) the close button would be visible but would not work. My advice would be to check to make sure your infobox does not inherit opacity from anywhere else.
I am using the Prototype JavaScript library and have this div:
new Element('div', {id: 'summaryGraph', style: 'width: 100%; height:90px;'});
Inside that div, I am showing a graph:
summaryGraph: function (data, bounds) {
var p = Flotr.draw(
$('summaryGraph'),
[data],
{
}
);
return p;
}
Now my question is, is it possible to disable and enable the div depending on the conditions?
If you want to "disable" the Graph you have 2 possibilities:
hide the Graph and show a placeholder (image, text) stating that the Graph is not accessible at the moment
overlay the Graph with a semi-transparent DIV, which will prevent any interaction with it
I'm not sure what you mean by 'disabling' the graph. But you may want to take a look at hide() (relevant docs) or show() (relevant docs).
If your graph should not respond to mouse events, add a disable flag and in the mouse event listener, return false if the flag is set.
I have a google map integrated on part of my page. I would like to create a toggle button to toggle the map between full screen and normal size. So when you click on it - the map extends to fill the whole browser screen, and click on it again, it is restored to its original size on the page. How would I do it?
Here's a jQuery implementation.
$("#map_toggler").click(function() {
$("#map").toggleClass("fullscreen")
});
In the CSS:
#map {
width: 400px;
height: 200px;
}
#map.fullscreen {
position: fixed;
width:100%;
height: 100%;
}
Untested, but something along the lines of that should work.
If you have a map on your page all you need to do is write some javascript to resize the DIV that holds the map. I haven't implemented an example that resizes the DIV to fill the browser, but here is one that toggles the size of a map div from javascript (I use mooTools to set the style.width on the element, but you can use whatever you prefer to manipulate the DOM).
On Dom ready:
Init map and set center
Get the current CSS size of the div containing the map
On enter-fullscreen-button click:
Update the CSS (size and position)
Trigger the resize map method
Set map center
On exit-fullscreen-button click:
Update the CSS (back to the initial size and position)
Trigger the resize map method
Set map center
You can find the code here
Now we have a Fullscreen API https://developer.mozilla.org/en/DOM/Using_full-screen_mode you just select the DOM element you want to set to fullscreen and call the fullscreen API on it. Something like this
var elem = document.getElementById("myvideo");
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
on click you have to resize your div where you have show the map.....i think its simple