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/
Related
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
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.
When you open a website in LinkedIn's app (iOS), html5 background videos set to autoplay do not play, and animations do not fire unless you stop scrolling. So, it often looks like there is a bunch of empty space when you use fade and slide animations.
Here are a few examples (you must view within LinkedIn's app to see the issue)...
Background video
https://jobs.netflix.com/
https://thelovinggroup.com/ (also has animation issues)
Animations
https://voidwatches.com/
http://www.clearmotion.com/
Any thoughts on how to tackle this issue until LinkedIn builds a better browser?
I've looked into browser detection as a possible solution. Thinking maybe I could do an if/else statement to check if it's a common browser (Chrome, Safari, Firefox, etc.), else do something else with those videos and animations.
But everything I've read for browser detection strongly recommends against using it unless you absolutely have to (https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent).
Any thoughts would be very much appreciated!
UPDATE
Ok, so I've implemented the code from this Github project to detect UIWebView: https://github.com/simpleweb/UIWebView-Detect
And it works well! However, I really need to differentiate between LinkedIn and other apps with WebView because LinkedIn is the only one with these issues.
I used Udger's parser (based on what I found in another Stack Overflow post): https://udger.com/resources/online-parser
And I can see that Facebook has its own browser, but LinkedIn seems to be using some version of Safari.
I feel like I'm starting to get closer, but I'm still not sure I've come up with a solid solution.
I'm not quite sure what's going on here. I'm using the latest Google Chrome, and recently any Alert Box popups don't show up. They're THERE, because I have to hit enter/esc to be able to use my browser again. This is for all alert boxes in the browser. I tried plugging an HDMI cable to see if it was really off screen and maybe I could see it if I extended my monitor, but to no avail.
I saw that there was a bug in 2012 that was similar to this, but that's obviously been fixed and shouldn't be relevant here.
EDIT: Version 39.0.2171.95
Supposing your dialog is indeed off screen, press [alt][space][m].
Then swing around with your mouse or press your arrow keys like hell and your dialog will eventually come in scope.
See also http://www.dpreview.com/forums/post/42206189
I had a similar issue. After much testing I was able to correct this by the following means
Settings> Show advanced settings
Scroll to bottom
Remove the checkmark from "use hardware acceleration when available"
I want to detect the elastic scroll in order to try to replicate some iOS behaviour like refreshing my page if someone scrolls the whole page up.
Also it would be nice if I could present a message to the user just like in iOS (but this might be asking too much).
I tried searching around the web but couldn't really find any proper info. Has anyone worked around this?
P.S. Sorry for not posting code as this is still a concept. I will post it here when I pull it off.
I ended up following a similar approach to the one followed on Hammer.js example: http://eightmedia.github.io/hammer.js/examples/pull-to-refresh.html