Google maps API show a message over the map when user scroll with mouse over the map.
The message advice the user must press control key while scroll with mouse over map.
This is a very nice solution to preserve normal page scroll with the mouse.
How can We do this in open layer 3+ API. Is thus possible? Please a need this behavior.
Thank you in advance.
Here the answers to your questions:
How to detect that the user is doing scroll on the map with the mouse and show an alert that you must press control key?
map.on('wheel', function(){
//write whatyou like and add it in popup window
});
How can you make it so the zoom on the map can only be done by pressing control in addition to scrolling with the mouse?
OpenLayers doesn't have this functionality but you can do it by changing ol.js as you want.
A helpful similar function can be found here
Also, you can do it with only (shift key) or (alt key)
map.on('wheel', function(evt) {
map.on('wheel', function(evt) {
wheelZoom(evt);
});
function wheelZoom(evt) {
if (ol.events.condition.shiftKeyOnly(evt) !== true) {
evt.browserEvent.preventDefault();
}
};
Related
In Powerpoint, clicking the left mouse button advances to the next slide. In reveal.js, it is done using the keyboard. Is it possible to configure reveal.js to advance to the next slide also when clicking the mouse button?
It looks like you can add a click event to the entire slide and and check the button for the event.
window.addEventListener("mousedown", handleClick, false);
window.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
function handleClick(e) {
e.preventDefault();
if(e.button === 0) Reveal.next();
if(e.button === 2) Reveal.prev();
}
If you're worried about links on the page not being clickable you can check the target of the event. If it's a link, don't proceed to the next slide.
This site could be useful and has a more in depth explanation. It's where the above code is from.
Please have a look at
www.jsbin.com/wigokojina/1/edit?html,css,js,output
I've added custom svg icons to the konva transformer, but the middle rotator icon is draggable even if i set draggable to false. The two other icons are fine and as expected, as far as dragging is concerned.
My questions are:
How do i disable the dragging for the rotator anchor, so that the icon doesnt move?
How do i disable all event handlers for an anchor, and add one click event? Ive tried shape.off('dragmove') etc. The only thing that helps is setting listening to false, but then im prevented from adding a new event listener. I want to disable all event handlers for the top right anchor, and add one onclick listener afterwards.
Is it possible to add the icons to the shape itself using fillPatternImage? Instead of adding the icon as a new shape like im doing. If its possible, please provide an example using the jsbin.
Thanks very much :-)
At the current moment konva#4.0.16 doesn't support fully customized Konva.Transformer. But you are making a good attempt.
How do i disable the dragging for the rotator anchor, so that the icon doesn't move at all?
You can reset the position in transform event (almost as you do it). But at the current moment, for performance reasons, inside transform events all anchors has "old" positions. So you see dragging of the icon from rotater anchor. To fix the issue we can force update a transformer:
circle.on('transform', function(){
transformer.update();
for (var button in buttons) {
var selector = button.replace('_', '-');
var shape = transformer.findOne('.' + selector);
var icon = transformer.findOne('.' + selector + '-icon');
icon.position(shape.position());
icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
layer.batchDraw();
}
});
How do I disable all event handlers for an anchor, and add one-click event
It can be something like this:
shape.listening(false);
icon.on('click', () => {
alert('delete');
});
Demo: https://jsbin.com/galetahara/4/edit?js,output
Today I'm facing "a typical" problem on iOS with a page scrolling when a user selects an input text. The point is that I'm using a scrollable page including a lot of texts and I need this. So I can't use a solution that disables scolling by preventing default, minimizing the view etc..
I basically need to open a software keyboard without scrolling the page.
I also need to find a solution that will be suitable for my users - no screen blinking, etc... After some research I finally managed to find a working solution.
Please see my answer below.
The idea is to return the page to its original position as soon as possible and thus prevent the iOS scrolling animation.
You simply add a focus handler to your input text field and in this handler you firstly read the window.scrollTop property and than set it back with a delay of 0 ms.
Here is my code (using jQuery):
$("#myinput").on("focus", function() {
var scrollTop = $(window).scrollTop();
setTimeout(function() {
$(window).scrollTop = scrollTop;
}, 0);
});
I hope there is no bug in this - actually I'm using TypeScript so if you want to see my original code here it is:
this._inputText.on("focus", () => {
var jQueryWin:JQuery = <JQuery>$(window);
var scrollTop:number = jQueryWin.scrollTop();
setTimeout(() => {
jQueryWin.scrollTop(scrollTop);
}, 0);
});
OK - I hope this helps you guys to better control an unwanted page scrolling when dealing with input elements.
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
I have a basic JQM page which displays a left side sliding menu when swiping (like the facebook mobile app). It worked fine until I started using scrollview (to properly keep the header fixed). The swipe event is not triggered when I swipe over my page content (it still works if I swipe on the header).
$('.ui-page-active').live("swiperight", function() {
if (!menuStatus) {
showMenu();
}
});
Does anyone has any idea on how to make it work?
Cheers!
I think you might find that the event is consumed in the scrollview control. You can override the javascript handler against that control to allow it to keep bubbling.
To override the function you can use this technique: Overriding a JavaScript function while referencing the original
Having a quick look at the file, it looks like this method could hold clues as to what you want:
_handleDragMove: function(e, ex, ey)
specifically:
var svdir = this.options.direction;
if (!this._directionLock)
I was using the version of scrollview shown here: http://jquerymobile.com/test/experiments/scrollview/scrollview-nested.html