I'm editing the top nav of a site to work on IE10/Windows8 tablets like the Surface Pro. In the initial iteration, I just added aria-haspopup="true" to the hover elements and it worked pretty well -- one tap to show the hidden menu, a second tap shows the :hover effect, a third tap to navigate to the URL. But, the client wanted the second tap to navigate to the URL instead (you know, like it would work on pretty much ANY OTHER DEVICE other than a Windows one, lol), so I popped a JQuery script in there to hopefully just navigate to the destination like it's supposed to.
Here's the URL: http://www.urlgone.com/3a55ce/
I'm pretty close to having it work, but the weirdest thing is happening. If you tap the item, it goes into its hover state (white text) rather than clicking through. But if you hold your tap for a little bit longer, it works! What on earth is going on? This is my code:
$(document).ready(function(){
if (window.navigator.msPointerEnabled) {
$('#nav a').on("MSPointerDown", function(event){
window.location = $(this).attr('href');
return false;
})
}
});
The client has confirmed that it's doing this on his Surface tablet, and I'm surprisingly able to replicate the problem in a Virtual Windows 8 environment running Microsoft Windows Simulator.
Any ideas? I've been reading through the MS documentation here http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx but from what I understand, MSPointerDown is the umbrella event, and should cover any of the other gestured listed there -- MSGestureTap, MSGestureHold etc. I'm not even sure what I would console.log to find out the different between the ineffective "tap" and the effective "longer tap"...
Related
So to start out, this problem happens on some computers but not others, all using the latest version of Chrome.
So I have a table that has URL's embedded in the tr elements in data-url attributes. For some reason, a few PC's don't trigger this click event. Instead of it counting as a click, an scrolling icon shows up, allowing them to scroll the page by moving their cursor around. One thing to note is that this icon indicates you can scroll horizontally, when that isn't the case. A shitty phone picture of the icon, since I couldn't screencap it.
Here's a link to how I detect which mouse button is being used.
$("tr.row-link").on("click", function(e) {
var url = $(this).data("link");
if (url) {
console.log(e.which);
if (e.which === 2) {
window.open($(this).data("link"));
} else {
document.location.href = $(this).data("link");
}
}
});
To be honest, it almost seems like there's a utility installed on these computers that interfere with normal mouse operations in the browser, but I can't seem to find anything installed that would do that.
How can I debug this issue? Honestly this may be a SuperUser question, but I wasn't sure due to the fact it's a discrepancy with click event handling.
I am working with a website which needs fully responsive for the devices. I am testing it iPhone 5. Mouse wheel scroll and buttons clicks is not working when I am testing with iPhone. But everything is working fine when I am testing with online iPhone simulators.
N. B. Actually, I can't post code here. Because, I can't guess what is the problem there.
Take a look at the following:
https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
Your website may be preventing the default action for touch events which would prevent scrolling. Although I can not say more without seeing the actual code, here is a possible solution to your dilemma: How to unbind a listener that is calling event.preventDefault() (using jQuery)?. Essentially you need to restore the default actions that occur after touching the screen.
I have made an image gallery in HTML5, JavaScript and CSS by using jQuery mobile. IE Phonegap platform ok.
The images are coming dynamically and are loaded in it, like this:
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html
Above mouseSwipe Slider:
TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com
The problem coming with it is that I cannot click on the image and go to next page, because two events are occurring together.
The second problem is that I cannot swipe the page up down, from the place where gallery is placed, except the other area where gallery is not present.
To make it more clear, I am making news application in which I have added 5 - 10 gallery like Pulse news application.
I'm a little confused about some of the details of the issue, but I hate to see this question go completely unanswered in case someone else has this issue.
This plugin (mouseSwipe) overrides the default dragging functionality for mobile devices. Whereas normally devices would scroll the page on the mouse starting event, this plugin overrides that behavior to detect click movement across an element. Since it interrupts that functionality, dragging the opposite direction (for scrolling) is also broken. If the plugin were still being maintained by the owner (it doesn't appear to be), it could be updated to fix this issue, or emit events that could be used to manually create the functionality you're wanting.
I assume this is also what is giving you trouble for clicking to go to the specified page.
If you want my honest opinion, I would choose a different library, perhaps one that focuses solely on the swipability of mobile devices, and then handle desktop functionality separately (though, if you're using PhoneGap, it's likely you aren't even publishing this to a web platform for desktops). If it's going to be on the web, you can use modernizr (or the like) to figure out if the device supports touch input, and then implement something like the following:
http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html
For devices that do not support touch, you could fall back to button/arrow-based navigation (after all, as a desktop user, I do not expect to be able to drag it back and forth with the mouse).
In the file http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown function has the code below. This will stop the event from the default behaviour and in cases stop captured/bubbled. You may want to look at these or the way event are being handled by the libraries.
e.preventDefault()
Here is more on how to stop JQuery propagation and regular behaviour.
event.preventDefault() vs. return false
What is event bubbling and capturing?
The reason you cannot swipe up and down is likely due to that the "swipe" event is hogging the "movestart" or "move" event.
I ran into a similar problem once when using this plugin:
http://stephband.info/jquery.event.swipe/
Their solution as pointed on on their website was to call the preventDefault method on the event to keep it from blocking as seen here.
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
I have no experience with jQuery mobile, but i would reckon the problems are similar.
MobileSafari as a rule has incorrect HTML button behavior (incorrect meaning: "not like an iOS native button"). Correct button behavior is as follows:
User touches button: Button highlights
User drags finger out of button: Button dims
User drags finger back into button: Button highlights
User drags finger out of button and releases: Button does not click
MobileSafari buttons highlight when you touch them, stay highlighted no matter where you move, and click no matter where you release them (unless the view scrolls, in which case the touch is always canceled, even if you re-enter the button).
This problem applies to all clickable things such as links (when -webkit-touch-callout is set to none). I have only found one web application so far that has correct button behavior: Facebook. Looking at their code for it, it looks like they've done quite a lot of jumping-through-hoops to make it work correctly (tracking all the mouse events manually and not using buttons at all). The code is dense, uses Javelin, and I'm not yet clear on all the pieces required to make it work.
I know I'm somewhat kidding myself (since if it were easy, everyone would do it), but I'm going to ask anyway. Is there any generally-available piece of code that handles this feature? Is there a simpler solution than reverse engineering Javelin, even if it is only applicable to WebKit? (Javelin isn't very-well suited to my lightweight needs.) My ultimate goal is correct button behavior for a UIWebView embedded in a native app, so hybrid JavaScript/ObjC solutions are acceptable as well (though no hybrid approaches come to mind).
Basically what you'd want to do is build out some sort of hybrid hover functionality for touch devices, which detects when your finger moves in/out of the button in question.
I built a basic JSFiddle which implements some barebones functionality. If you know any javascript, I think you'll get the idea.
Live JSFiddle DEMO
Try it on your iOS device (and maybe your Android device??).
-
brian
Background: I am creating a table reminiscent of whenisgood.net, in that it has click-n-drag toggling for table elements. I want to call different types of toggling code when the left, middle, and right mouse buttons activate a mousedown event.
By using JQuery, I'm off to a good start.
$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
e.preventDefault();
toggle(this, e);
});
In the toggle() function I can use e.which to determine what button was clicked.
The punchline: I used e.preventDefault() hoping that it would stop the middle click default behavior of scrolling. It didn't. What can I do to stop the scroll action from activating?
See also "Triggering onclick event using middle click"
Middle-click can be disabled with Javascript, but only in IE, WebKit, and Konquerer. Firefox requires a config file edit. It's 2017 and firefox 50 supports this.
This is an old question...but if I'm understanding it properly, you want to disable scrolling via the middle mouse button click.
Nowadays, you can do this with a single line of vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }
Currently, my solution is this: (more jquery!)
$(".togglable").wrap(
"<a href='javascript:void(0);'
onclick='return false;'></a>"
);
By wrapping it in a link (via jquery wrap), browsers think it's a link and don't scroll on middle click, even if you drag your mouse around. With this setup, and my situation, there are a couple (minor) gotchas.
Firefox will open a new tab when you middle click, but only if you don't drag. Opera will open a new tab when you middle click, drag or not. That's why I used href='javascript:void(0);' instead of just href='#'--so that the client's browser wouldn't load a whole page, just a blank page with a strange url.
But this solution works like a charm on Chrome and Safari. It works well with IE8, except that now when I left-click-n-drag, it changes the pointer to a "can't do that" symbol, since it thinks I want to drag the link somewhere. Untested on older versions of IE.
It is a bit old thread already, but I've tried hard to circumvent this in Firefox (I'm still using 3.6) and I'll share my findings, maybe someone will find it helpful.
Check that if you create an empty HTML file (or a small document with couple of paragraphs) and load it in Firefox, middle click scrollbar does not appear. This is because <body>'s width and height are smaller than window size. If you put a lot of <br>'s, this is not the case and scrollbar appears on middle click.
Google managed to prevent middle click scroller to appear in Google Maps in Firefox by making sure (through JS) that <body> size is always less than window size, plus additionally putting
<body style="overflow:hidden;">.
This is hardly achievable in general case, but sometimes might be useful.