How to Use Mouse Lock in Javascript? - javascript

I'm working on creating a FPS-type game for the browser using WebGL/Javascript and have been unable to successfully implement the very recently added "Mouse Lock" feature to Chrome and Firefox.
I have tried the example code from all three of these sources to no avail:
http://code.google.com/p/chromium/issues/detail?id=72754
http://blog.sethladd.com/2011/09/mouse-lock-for-html5-fps-games.html
http://jsfiddle.net/jdias/3dqBL/
So, that leads me to my question. What is the correct way to lock the mouse in the latest versions of Chrome and Firefox (Minefield)? I would really love to get this working!
Thanks in advance.

Mouselock actually hasn't been implemented in Firefox, but there is an experimental build located at: http://people.mozilla.com/~tmielczarek/mouselock+gamepad/ . With google Chrome, get the latest version and go into about:flags and check --enable-pointer-lock.
I hope that helps.

Related

Scroll-behavior: smooth Not Working in Chrome

I'm in the process of creating a single page site that relies on the scroll-behavior:smooth CSS property and the method .scrollIntoView({behavior:'smooth'}). I use these mainly to provide a smooth transition between sections, not critical but aesthetically pleasing. Suddenly this feature doesn't seem to be working in Google Chrome. I tested out on Firefox and Chrome mobile and in these works.
I made this pen with the basics of my page: https://codepen.io/gabriel-ar/pen/rEjdYb
Temporarily I've been using https://github.com/iamdustan/smoothscroll , and it solves scrollIntoView, but other plugins like PhotoSwipe are not handling transitions well.
Therefore, what is the best fix here? smoothscroll solves part of it, but apparently not everything.
Is this a bug in Chrome?
scroll-behavior:smooth doesn't seem to be the only property affected, what other thing could have stopped working, if any?
Google Chrome Version 106.0.5249.119
I already uninstalled Chrome and reinstalled it. I Also ran a clean install on a sandbox with the same results.
Thank you!
Update & Solution
It seems this is a local issue, just happening on my computer. Thanks for the replies!
I faced the same issue some time ago, and I came up with this solution:
Open new tab
Go to Chrome's Experimental Flags (chrome://flags)
Search for 'smooth scrolling'
Set the flag to enabled
Let me know if that works for you!

Can't disable all breakpoints in firefox

According to this page, in Firefox I should be able to click on the following icon in the debugger to disable all breakpoints
Unfortunately, I don't have this icon in my Firefox:
I'm using Firefox 57 and it makes writing and debugging javascript extremely difficult. Is this a feature that has to be enabled somewhere? Am I doing something else wrong?
Note: I'm not interested in using Chromium as an alternative
It appears that they have removed this button. I ran into this problem today and I came across:
https://support.mozilla.org/en-US/questions/1184328
This is the only place I have seen mentioned that this was removed. I have not found any reason for this change though.

Screen video capture including mouse cursor on Mac?

I've been scratching my head for the past week and still cannot find a clear answer regarding this issue...
Basically, I'm building a desktop app for screen/desktop/window capturing using Web API's.
Seems that on Mac, mouse cursor does not appear in the stream. Please see https://bugs.chromium.org/p/chromium/issues/detail?id=238434 and
https://github.com/electron/electron/issues/8278
But somehow, a Chrome extension exists and works perfectly fine.
Can someone please explain how to successfully record screen using Web technologies to avoid ffmpeg and native scripts? How did those guys manage to overcome this issue on Mac? Does this issue actually exist?
Thanks.
It seems to be a bug where the cursor is not recorded when external displays are hooked to your device.
In my instance, I've got two monitors hooked to a Macbook Pro.
A workaround is unhooking your displays or setting your displays to mirror.
I haven't been able to test a set up with a Mac Pro or Mini hooked to just one or multiple displays.
I created an issue in the Chromium bug report.
This has been fixed since Chrome 56!

Carousel is not moving images in chrome

Hello I am using Visual Studio 2012 Student edition with angualr js 1.4.3 and ui-bootstrap-tpls-0.12.0 to scroll images.
I have applied Demo code.
The code is working in firefox and IE but not running in chrome (version 52.0.2743.82 m).
For some security issue I can't share my code here so please look at the demo I have provided and demo is running but in my case in my project it's running in all the browser except chrome the code is same. In chrome is stuck after moving to second image and on click event is also not running.
Please someone who knows help to solve this big issue.
Thanks in advance.
Is there any reason you can't update to the most recent version of all your third party libraries? If not - I would advise you update all libs and see if the issue persists.

Chrome alert/prompt displays off the screen

An alert/prompt called from chrome extension background pake is shown off the screen (or partially in top left screen). This bug has been fixed in canary build by now, see
http://code.google.com/p/chromium/issues/detail?id=113899 , but I need to get it working as soon as possible. Do you have any ideas how to work this around using javascript?
Thanks in advance.
PS: I'm talking about this extension: https://chrome.google.com/webstore/detail/jfiakckbklmccchjegnnojbalafebakb
You can't position the alert or prompt dialogs in browsers. You have to wait for the bug fix to propagate to the stable branch.
An alternative option is to inject an HTML lightbox into the current tab but that would be a lot of additional work.
One way to go is to further investigate the canary source code, found at the Chromium project on Google Code.
The issue is reported on the Chromium issues page, and the fix seem to be found at this revision on the Chromium sources.
You can check out the diff and compile a workaround based on their solution.

Categories