I'm making a mobile web app and am trying to make a star rating system that resambles the one in itunes where you can swipe over the stars and lift you finger on the star you want to choose. I'm using jQuery mobile. Using the swipe event doesn't seem to do the trick, while it stops the web page to stick to your finger (you can swipe around the area you attach the event to without the page itself moves) it is intended for either "swipe left" or "swipe right". Not "swipe away as you want".
Is there a suitable event i can use that also enables me to get the coordinates of the finger position?
Example code:
$("#mapPage").live("pageinit", function () {
$('div.stars').swipe(function() {
console.log("swiped");
});
});
Example 2:
$('div.stars').scrollstart(function(event) {
event.preventDefault();
// stuf in here only triggers in scroll start
// but i want i to trigger as the finger position gets updated
});
I figured it out. This is the code i used:
$('div.stars').bind('vmousemove', function(event) {
event.preventDefault();
console.log('scroll position: ' + event.pageX);
});
Related
I have a problem with preventing Space and Arrows to scroll down/up when the game is focused on an online gaming site for kids.
To prevent this functionality on a web page, I know, we can use:
window.addEventListener("keydown", function(e) {
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
e.preventDefault();
}
}, false);
But, the problem is when the game is focused.
The games are mirrored through iframe and once the user will click on the game and the game iframe will focus, the code from above will just not work anymore.
Of course, it's frustrating because we have games where you need to use the Space or Up/Down Arrows to move, jump, or something else - but whenever you will press those buttons, the page will start scrolling.
Page example:
...
<body>
<iframe src="https://example.com/game/game21/index.html" width="X" height="Y"></iframe>
...
I don't have the right to modify the src page.
You're missing e.stopPropagation();. Try this:
window.addEventListener("keydown", function(e) {
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
e.preventDefault();
e.stopPropagation();
}
});
I use Angular 6 and Leaflet 1.2 for my project.
I want to reproduce the dragging effect when a user maintain a right or left click on Leaflet Map.
For example, i want to be able to start dragging the map when I constantly pressing the space bar.
I have already test many features like calling the 'mousedown', 'mouseup', 'click', 'drag', 'dragstart' events on Leaflet Map but nothing occur ; the event is calling correctly but the dragging event does not occur.
I'm still blocking on that and the web seem not to search this functionality :o
Thanks for help !
Regards
You can easily add an event listener to detect when the space bar is held down. However you then need to have some way to tell the map which direction to move in. Assuming you want this to be done via the keyboard too, here is some example code to add/remove scrolling via the arrow keys when the space bar is held down.
function scrollMap(e) {
const key = e.key;
if (key == 'ArrowUp'){
//scroll map 100px up, or whatever you want
}
//repeat for other arrow keys, or inputs of your choice
}
document.addEventListener('keydown', (event) => {
const key = event.code;
if (key == 'Space'){
listen();
}
});
document.addEventListener('keyup', (event) => {
const key = event.code;
if (key == 'Space'){
stopListen();
}
});
function listen(){
document.addEventListener('keypress', scrollMap);
}
function stopListen(){
document.removeEventListener('keypress', scrollMap);
}
Notes
1) Depending on your page layout, it might be better to attach the events to your map element rather than the document
2) The choice of event.code vs event.key etc will depend on what browsers you are targeting. See here for more info
3) Instead of the space bar, you might want to use shift / ctrl / alt instead as these are inbuilt on the keyboard events & so are easier to detect & use cross browser. See here for more info
Is it possible to use the native "pinch to zoom" on touch devices while using hammerjs to recognize swipe gestures?
I want users to be able to zoom in on images in the gallery (as they can natively when hammer event handler is not bound) and swiping to display the previous or next image.
hammertime.on('swipe', function(ev) {
if (ev.direction === 2) {
nextImage();
} else if (ev.direction === 4) {
prevImage();
}
});
Solution was to use touchAction = 'auto'
var hammertime = new Hammer(galleryEl, {touchAction : 'auto'});
Before doing this be sure to read http://hammerjs.github.io/touch-action/
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
I have implemented my own scrolling, in a ticker with Jquery because the normal scrolling doesn't work too well when there's already css animation involved.
What I want to have happen is when you click and drag on the controller, which is a div that contains the ticker, the ticker moves. When you release the mouse button, it stops. No problem there. The problem comes in, when I don't release the mouse button, but I do take the mouse off of the controller. When this happens track_mouse_pos doesn't stop. So clicked or not when I put my mouse back on the controller I am scrolling.
$("#controller").mousedown(function (event) {
var start_x = event.clientX;
var start_y = event.clientY;
$("#controller").on('mousemove', {start_x: start_x}, track_mouse_pos);
});
$("#controller").mouseup(function () {
$("#controller").off('mousemove', track_mouse_pos);
});
How can I turn off ('mousemove', track_mouse_pos);? Is it ok to just have a .mouseup and .mouseoff line doing the same thing?
You need to check if the mouse button pressed in the "track_mouse_pos" function.
function track_mouse_pos(e){
if(e.which!=1) {$("#controller").trigger('mouseup');return}
...
}
I'm building a HTML/JavaScript interface in which I would need some reactivity and so, the possibility for users to click really fast on the same button on the page.
I disabled the doubleclick/zoom on the iPad thanks to the <meta name="viewport" content="user-scalable=no" />, but then, if I double click or click too fast on the buttons, it does nothing.
I'm using jQuery and tried the dblclick event, didn't work.
You can try using the doubletap plugin which enable the use of "doubletap" events on iPhone and iPad devices.
I gave up on this, rolled my own inside my 'touchstart - move - touchend' sequence. Its horrible, but, inside my touchend, I have :
if (swipeMoving==0) {
swipeStarted = 0;
tapco +=1;
if (tapco==2) doDblClick();
window.setTimeout(function(){ tapco=0; }, 700);
return;
}
If you want click, too, put it in a delay, and cancel if the second click comes.
Use this script to use double click in Ipad.
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
Alternative :-
As click on the desktop browser is equivalent to the touch on the Ipad. So, the double click will be equivalent to the click on the Ipad.
To implement this :
if((navigator.userAgent.match(/iPad/i))){
$(".element").click(function () {/*run the code*/ });
}
else {
$(".element").dblclick(function () {/*run the code*/ });
}
Hope it helps.