I have a webapp created with JQuery Mobile v1.3.2 implementing IScrollView.
When I'm scrolling the map vertically the Scroll View scrolls also.
Is there a way to disable that behaviour, to cancel iscroll scrolling when scrolling the gmap?
Thanks in advance.
The problem is that the map still seems to propagate touch events to iscroll. Let's try to prevent this by stopPropagation();
Edit
Here is the working jQuery mobile fiddle
var map_canvas = $('#map_canvas')[0];
// "mousedown" should be "touchstart" on mobile device
$(map_canvas).bind('mousedown', function(e) {
e.stopPropagation();
});
A fiddle with plain javascript here.
var map_canvas = document.getElementById('map_canvas');
// "mousedown" should be "touchstart" on mobile device
map_canvas.addEventListener('mousedown', function(e) {
e.stopPropagation();
}, false);
P.S.
Find here The link to the stopPropagation docs, comes in very handy some times ;)
Related
I'm having a problem with usage of content.resize(); in tabs with native keyboard plugin. Can any anyone guide me how to use and where to use content resize with tabs when the content dimension changes due to native keyboard appearance? Below is the code I'm using:
this.keyboard.onKeyboardHide().subscribe(() => {
this.isKeyboardHide = true;
setTimeout(() => {
this.content.resize();
}, 500);
});
I'm unable to resize my child view content once the android keyboard appears. Here is the sample code on github.
I'm wondering how to attach onload event for SAPUI5 image
var image = new sap.ui.commons.Image({id: "cImage"})
I know that there is a way using native js or jquery onload event to do it, but my question is how can I do this using SAPUI5 events like attachPress for clicking for example.
After searching I found a method for ui5 controls called 'attachBrowserEvent' which can handle any browser event:
image.attachBrowserEvent('load', function(){
alert("Image loaded");
});
This one is getting tricky for me.I have the google map in my page which is working properly ,above it lies a canvas. I need to make the google map clickable .i.e when i click on the canvas ,the map should behave normally .I have added pointer-events:none;attribute.It works properly in Firefox ,chrome and IE11.
However my requirement is I need to make it clickable in IE9 on wards,which am unable to replicate. How to do that?
If any one can replicate the behavior in a fiddle ,that will be really helpful to me.
There's an old jQuery hack that simulates pointer-events:
Listen for a click event on the canvas and in the click handler:
Hide the canvas: $(this).hide();
Ask the document to get the element at the clicked xy: var $map=$(document.elementFromPoint(event.clientX,event.clientY); (Adjust clientX/Y by any offset to the map/canvas elements) If the map is the only element under your canvas, you could define $map at the start of your app and avoid this step.
trigger the same event on the google map: $map.trigger(event);
redisplay the canvas: $(this).show();
I'am trying to display multiple image in a single infowindows. there is 3 image. i just want to make a slider work in info window google maps. but may be i lost the main idea. i try to use some of jquery slider and javascript slider, but still not work, the image not display and in other case is only work for the first click infowindows.
i think some missing, can somebody help me to the right direction of this case. i try to search an example, but the result is still nothing.
many thanks.
You're missing the event name you should be listening for in the addListener call where you initiate the slider:
google.maps.event.addListener(infowindow, function(){ /*..initiate anythingslider..*/ });
It should listen for the content_changed event on the infoWindow, so it should look like:
google.maps.event.addListener(infowindow, 'content_changed', function(){ /*..initiate anythingslider..*/ });
I am using kinetic-v4.3.0-beta2.js
I want to handle mobile touch event on group for ios & android.
I am binding event such as following
group.on('touchstart', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
I tried 'touchend', 'touchstart' and 'tap'
Got partial success in "Tap" but in that case, shape is draggable so tap event is not properly fire because object will move from it's place.
but if shape is not draggable then it will work fine.
I tried 'touchend' and 'touchstart' event also but popup menu is close after event fire in iOs and android as I am opening Jquery Mobile Popup by Touching group!
The popup menu will only open for 2-3 seconds when the touchstart event fired.
Anyone faced the same problem with kinetic JS Mobile events? How to handle only "Click" or "Touch" event with it.
I checked this http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ for reference but had no luck!
I am developing application with Phonegap + JQM + Kinetics JS
Thanks in advance!
Keep in mind that your application is running inside a webview. This is why you've got these 2/3 seconds of delay on touch/click event.
This is why in all my PhoneGap dev, I use Fastclick.js. FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
You can find it here https://github.com/ftlabs/fastclick.
It's easy to use (if you're using jQuery) :
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
I made a jsfiddle for you to test out the click/touch events.
From what I understand, you have a Kinetic.Group node that is draggable but you want to open up a popup using jquery mobile.
You are right that when you drag an object, the tap event does not fire. But you said otherwise the tap event works fine if the shape is not draggable. This leads me to believe:
You want a popup on "tap"
You want a popup on "dragend"
If so, all you need is to use both events like this:
group.on('tap dragend', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
Please let me know if my assumptions are wrong, and I can work with you to get the right solution. I am guessing when you want to popup, so if you let me know exactly when you want a popup to occur that will help a lot.
You might want to also look into using evt.cancelBubble = true; http://www.html5canvastutorials.com/kineticjs/html5-canvas-cancel-event-bubble-propagation-with-kineticjs/