Pointer Lock does Not Work on Android Browsers (official demo) - javascript

This is the online demo suggested by MDN:
https://mdn.github.io/dom-examples/pointer-lock/
It works on desktop, but not on mobile (Chrome, Edge, FF).
Meanwhile, the pointer lock API is listed as widely supported on mobile:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
more demos:
Quake 3 WebGL demo
http://media.tojicode.com/q3bsp/
http://www.smartjava.org/examples/pointerlock/
I implemented it myself too, and when I used JSON.stringify(e) to read the contents of the error event, I got: '{isTrusted:true}'
UPDATE:
I used a more complex function to serialize the whole event object, so after adding the suggested by MDN event listeners:
document.addEventListener('pointerlockerror', lockError, false);
document.addEventListener('mozpointerlockerror', lockError, false);
and
function lockError(e) {
serializeEvent(e)
}
I got from the serialize function:
UPDATE #2:
I included FF as it doesn't work either, it just doesn't raise an error, while it follows pointer erratically (at high speed), without locking it and while firing the pointerlockchange event!

Related

Scrolling not working on Samsung Internet

I'm creating a chat app, and I tried to implement autoscroll feature for it.
But it's not working on Samsung Internet(It's worked on Firefox Dev Edition(normal mode and interactive design mode) and Chrome Mobile), especially when I used the submit button on the keyboard. Here's the screenshots:
Firefox Dev Edition Interactive Design Mode Screenshot(gif)
Samsung Internet Screenshot(gif)
And here's the code:
let chatview = document.querySelector('#chatview')
if (chatview.scrollTop >= chatview.scrollHeight - chatview.clientHeight)
setTimeout(() => chatview.scrollTo(0, chatview.scrollHeight), 50)
Oh, and the reason why I added 50ms delay is to wait for element addition(powered by Vue's v-for).
Just for those who are still looking for an answer: I had the same problem with Samsung Internet version 7.4.00.70. I've tried several scroll-methods (see below). Seems to be an implementation issue.
Functions i've tested:
// Throws an error saying the method is not defined
window.scrollTo(ScrollToOptions)
// Throws an error saying the method is not defined
window.scroll(ScrollToOptions)
// Throws no error (!) but doesn't work either
window.scroll(x, y)
Links: window.scrollTo(), window.scroll(ScrollToOptions), window.scroll(x, y)
Since version 7.4 reached stable state in August 2018, i would have expected it to work.
EDIT: Working solution
I've found a solution in this thread using jQuery.animate(( properties [, duration][, easing][, complete]))
$(element).animate(
{ scrollTop: scrolling }, // Object of CSS properties
250, // Duration
'easeOutQuad', // jQuery's Easing
() => { $(element).stop(true, true); } // Callback function
);
Here element is the HTML elemente the animation is to be applied on. For detailed explanation of animate() please follow the link. The specified callback function is executed when the animation has been completed. Calling $(element).stop(true, true) (see) prevents the scrollbar of being locked. This happened in Chrome when the window was resized. In my case the resize event triggered execution of animate() and i wasn't able to scroll neither by mouse wheel nor by dragging the scrollbar.
This workaround is working on latest Firefox, Chrome, Opera, Edge, Firefox mobile, Chrome mobile, Samsung Internet Browser and Opera mobile.
I wasn't able to test it on safari. You need at least jQuery 1.8.

Why wont IE fire on paste event?

I need help figuring out why Internet Explorer won't fire my 'paste' event.
I'm using IE 11. Here is my code:
$(document).on('paste', '.pasteTarget', handlePaste);
When trying this in IE, the function never gets called. It works in chrome.
Different browsers treat onpaste differently, or not at all. For IE 11, the latter seems to be the case.
From MDN:
Non-Standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Source
Edit: As pointed out in the comments, IE 11 does indeed support onpaste to some extent. However, as this is a non-standard feature, you should be careful about using it in production.
You could use beforepaste event instead and access clipboardData from window, not from the event.
But, indeed as pointed out already, Clipboard API doesn't seem to be supported in IE: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/clipboardapi/

How can I get mouse wheel event in javascript firefox

I'm building an website, and I need to get mousewheel event. In order to do that I've tried following methods:
//For Chrome
window.addEventListener('mousewheel', func);
// For Firefox
window.addEventListener('DOMMouseScroll', func);
This one works only on chrome. ↑
mapDiv.onmousewheel = function(e){
func(e);
}
This one too isn't working on firefox.
I've also tried solution suggested on this webpage, but that also resulted in code only working on chrome.
So how to solve this issue, and also make solution compatible on as much as possible modern browsers?
If you read the documentation, you'll see mousewheel is non-standard and suggest to use wheelevent.
See here: https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
That refers to https://developer.mozilla.org/en-US/docs/Web/Events/wheel
Sometimes, the documentation solve the problem automagically.
You should use like this:
// standard for all browsers
window.addEventListener('wheel', func);
And here you are an implementation example for compatibility with legacy and modern browsers:
https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser

Chrome on Windows 8 Mouse Down/Up/Move Touch Screen

This question is outdated
The problem doesn't exist in newer versions of Chrome
I'm working on a drag-to-select jQuery plugin, which is working. The problem, is that on the touch screen, it just scrolls the page.
Chrome doesn't implement touchstart and other touch events, so I would assume mousedown would be triggered. Here's a simplified example:
fullscreen demo [ code ]
A coffeescript snippet:
$(document).on 'mousemove', (e) ->
$('.follow').css
left: e.pageX
top: e.pageY
How can I get this to respond to touching the screen in Chrome on Windows 8?
Not sure where you got your information, and your CodePen examples are not there to check what the problem may be, but Chrome not only implements touchstart, touchmove, touchend etc but I have found it to have the nicest touch support of all browsers I have used in the last year.
The only thing to ensure is that if you have two monitors, you start up the browser page on the touch screen.
I am using Windows 8.1 with a touch-screen for JQuery plugin development (to ensure it is all tablet enabled).
Test existence of touch with:
var hasTouch = (typeof TouchEvent !== "undefined");
alert(hasTouch);
This is some working TypeScript code straight out of one of my plugins (which works best on Chrome. IE is the problem-child for touch):
THIS.$element.on("touchstart", function (e)
{
THIS.momentum.touchstart(e.originalEvent.touches[0].pageY);
});
THIS.$element.on("touchmove", function (e)
{
THIS.momentum.touchMoveTo(e.originalEvent.touches[0].pageY);
});
THIS.$element.on("touchend", function (e)
{
THIS.momentum.touchEnd();
});
This seems to be fixed in the latest versions of chrome. It's an evergreen browser, which mean nearly every user is on the current, or previous release of chrome.

Detecting Event change in fullscreen mode Internet explorer

I am trying to write an event handler that detects whether a video player I have is in fullscreen or 'regular' mode.
I have tried using
document.addEventListener("fullscreenchange", myfunc, false);
but this doesn't work in IE, I have implemnted the same thing for firefox and chrome using webkitfullscreenchange and mozfullscreenchange event. Is there any other event I can use in IE for this? Or another way of doing this?
Any help would be appreciated. Thanks!
You have jQuery, so use it:
var screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
$(document).on(screen_change_events, function () {
});
(addEventListener isn't supported in versions earlier than IE 9 anyways)
At the same time, it doesn't look like full screen is supported in any version of IE:
http://caniuse.com/fullscreen
MDN Reference:
https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
Here's a possible hack around it:
onfullscreenchange DOM event
There is a jQuery plugin named jquery-fullscreen that will do exactly what you want. Until the Fullscreen-API standard has crystallized this is probably the best option.
You can also use the Modernizr fullscreen-api check and shim it if the browser doesn't support it by firing the event yourself (see this question for a detection method)

Categories

Resources