Mapbox GL JS : Fullscreen and GPS button Issues in Chrome only - javascript

I am working on a weather visualization project using Mapbox (3 panes are locked together and one is for navigation, it's hard to explain until you see the link.)
Before I continue, I will post a link to the web app I am discussing here, so you can see it. My code is a MESS, and I am aware of that, but I believe this is a browser issue.
http://ability.a2hosted.com/main.html
In Edge and Firefox, the fullscreen and navigation buttons work fine. In Chrome, they do not work... the fullscreen button gets the browser stuck until you press escape (and doesn't render properly anyway!). And, in fact, chrome does not even display the navigation button at all.
Is there a way to get these buttons to show up and function as they do in firefox and edge? Or, maybe an alternate button? I am attaching a screenshot of how the page should look.
I should note, I can live without the fullscreen buttons, but I need the navigation button option to be working in chrome. This really is a must for my project, so even if there's another link or button I could place over it to activate it somehow, it's fine as long as it works. I am not good enough with JS to understand what may be causing this issue after 2 hours of research.

From https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol:
Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the GeolocateControl will not be visible.

Related

Google Chrome - Override White Blank page when loading new tabs

"I'm looking for different Chrome apps to make my pages darker/inverted to reduce eye strain, I found some apps that work but the only thing left, which these apps doesn't seem to override, is the White Blank page.
When a new page is loaded, Chrome first displays a White Blank page, while the page is loading then displays the website's content. Is there a way to override this While page to say Black? At the moment, everytime I click on a link or open a new webpage, the screen goes from darkcoloured (through inverted/darkening page apps) to the White Blank screen for a brief second then the new page loads in a dark colour again. This acts like a "White Flash" by the screen everytime a new page is loaded and causes further eye strain. This is why I want to know if there is a way to override this White colour to Black."
This question was already asked before in here, but the answers suggested back then do not seem to be working on my current version of chrome 49.0.2623.87 m.
The links that I have referred to already :
-This
-comment 261 here
-This
I created two files manifest.json and script.js in AppData\Local\Google\Chrome\User Data\Default\Extensions\
and did the "load unpacked extension" and that did not work either.
Edit 2021-01-01
Install chromium-based Brave web browser as a drop-in alternative to Chrome. Then:
Install DarkReader
Click Settings > Appearance > Brave colors > Dark
Open new tab and click Customize in new tab page to get an acceptably dark appearance:
Additional Benefits to Brave:
Brave is forked off of chromium, so generally behaves the same as chrome. It prioritizes user privacy and comes built-in with Ad Blocking capability that is also very easy to disable as you're browsing. Plus many other features I'm not mentioning here.
Original Solution (If you really don't want to use Brave)
As of April 2016, this issue has been pending for over 8 years (aside from the intermittent work-arounds that no longer apply as you pointed out). If you haven't already, please consider "starring" these reported issues.
Current Reported Bugs:
https://bugs.chromium.org/p/chromium/issues/detail?id=1373
https://bugs.chromium.org/p/chromium/issues/detail?id=470669
https://bugs.chromium.org/p/chromium/issues/detail?id=311
https://bugs.chromium.org/p/chromium/issues/detail?id=457714
https://bugs.chromium.org/p/chromium/issues/detail?id=128290
https://bugs.chromium.org/p/chromium/issues/detail?id=119871
https://bugs.chromium.org/p/chromium/issues/detail?id=409378
https://bugs.chromium.org/p/chromium/issues/detail?id=126341
https://bugs.chromium.org/p/chromium/issues/detail?id=64317
https://bugs.chromium.org/p/chromium/issues/detail?id=530026
Especially the first two links appear to be gaining some traction. More users that support them being fixed helps gain more attention and allows you to monitor progress from email notifications (or you can unsubscribe).
Report This Issue:
Next, submit feedback to chrome through your browser following these steps:
Open Chrome and click the "hamburger" menu on the top right corner
Click Help > Report an issue.
Add detail similar to the following:
Between page loads and new tabs being opened, there is a brief moment
where the entire browser screen is painted white, causing severe eye
strain.
This issue has been referred to in the following chromium issues:
https://bugs.chromium.org/p/chromium/issues/detail?id=1373
https://bugs.chromium.org/p/chromium/issues/detail?id=470669
https://bugs.chromium.org/p/chromium/issues/detail?id=311
https://bugs.chromium.org/p/chromium/issues/detail?id=457714
https://bugs.chromium.org/p/chromium/issues/detail?id=128290
https://bugs.chromium.org/p/chromium/issues/detail?id=119871
https://bugs.chromium.org/p/chromium/issues/detail?id=409378
https://bugs.chromium.org/p/chromium/issues/detail?id=126341
https://bugs.chromium.org/p/chromium/issues/detail?id=64317
https://bugs.chromium.org/p/chromium/issues/detail?id=530026
Click send feedback
I would then recommend installing Chrome Canary, as some of the experimental fixes to those issues above will first appear in Canary.
Invert Computer Colors:
Finally, as a last resort, turn on color inversion and use the whitest chrome theme possible.
http://smallbusiness.chron.com/invert-colors-computer-43975.html
https://discussions.apple.com/thread/5780779?start=0
White theme (that is very dark when inverted):
https://chrome.google.com/webstore/detail/minimal-white/clcbojcafbggjenbeflknhfimpcikmlc?hl=en-GB
Significantly better in Chrome-Beta and even better in Chrome-Dev (chrome-unstable), almost unnoticeable.
Using Ubuntu-Cinnamon-Remix 21.04.

Fullscreen API without mouseclick or keydown event

For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});

When "zoom in" at Facebook, the chat sidebar got hidden, but how?

I am not sure does anyone notice that Facebook can detect users zoom-in level when it hits a level, it will dynamically add .hidden_elem classname onto .fbChatSidebar to hide it. (Check the attachments below)
I have searched a lot about this feature and found the repo in github called detect-zoom, but it seems that there are still some problems especially in latest version of FF & Chrome.
So I am really curious about how does Facebook detect this with JavaScript and I have tried it with latest FF & Chrome and it seems that Facebook can detect it correctly and hide the sidebar at the right zoom-in level.
Does anyone know anything about how they implement this feature ? or even possible solutions are welcome.
Thanks.
I'm not sure about the exact solution Facebook is using but I discovered they hide the sidebar on both window resize and zoom.
My research shows that all browsers, including IE8 and up fires the window.resize event when zooming as well. So by setting some breakpoint when you wish to hide something you should be able to implement some similar functionality.
Quick and dirty example: http://jsbin.com/ofufer/1/

Weird flickering bug in the latest version of Chrome browser

After updating Google Chrome browser to the latest 15.0.874.106 version (under Windows 7), my site is experiencing some weird flickering bug.
The text shadows are displaying completely wrong, the text itself is fuzzy and unclear, some parts of code don't work anymore (e.g. right floating, fixed menu)... etc.
For a couple of seconds the site is displayed fine, then it flickers all of the sudden (while still loading) and then the rendering gets messed up. (I think it has maybe some problems with loading of Google Maps v3)
The funny thing is that the old version of Chrome (before updating, on my other computer) is still displaying the site without any problems, and there haven't been any changes in the code in the meanwhile.
In other browsers (as i said, even in the old chrome) everything is OK. Firebug and Chrome's code inspector (CTRL+SHIFT+J) don't show any errors in the code. I have been doing some digging on the Internet and here as well, and I havent't found anything useful.
You can check it out by yourself by clicking here
Thanks in advance.
I have done same settings changes as mentioned above post and now, that weird flicker got stopped, below are the details....
Open Chrome Browser
Click on Settings menu option
Click on Advance setting link in Settings page
Un-Check "Use Hardware acceleration when available" checkbox
Restart you chrome browser
Happy Browsing....... :)
Also make sure to disable not only accelerated-compositing, but also accelerated-2d-canvas.
This is how I start google-chrome on Linux:
/opt/google/chrome/google-chrome %U --user-data-dir=/root --disable-accelerated-compositing --disable-accelerated-2d-canvas
On Windows, you might want to omit
--user-data-dir=/root
Josip Filipović apology where to do that (in Win7 by entering -disable-accelerated-compositing in properties > target field) that part disables hardware acceleration.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

Categories