Detect iOS smartbanner feature availability - javascript

I'm using jQuery Smartbanner (https://github.com/jasny/jquery.smartbanner) for cross mobile OS smart banner support. But I've run on to an issue, that ONLY iOS safari natively supports smartbanner feature, and other iOS browsers - don't. So when i'm just activating this plugin, safari shows me tow smart banners (native and custom), and other browsers - as supposed - one. I've added next check, to make sure user is on iphone/ipad/ipod and safari.
if ( !(/(iPad|iPhone|iPod).*OS [6-7].*AppleWebKit.*Mobile.*Safari/.test(navigator.userAgent)) )
$.smartbanner()
But this conditional check restricts all iOS mobile browsers, not only Safari. So I've figured out, that i can't simply detect mobile safari in order to not apply smartbanner() plugin specifically on it.
Any tips on detecting iOS Safari specifically?
P.s.: all safari browsers have "Safari" word inside navigator.userAgent

Currently fixed that issue, by adding "Version" word into condition. I found that only safari has this word inside userAgent on iOS (Chrome, for ex. doesn't).
So final condition looks like this:
if ( !(/(iPad|iPhone|iPod).*OS [6-7].*AppleWebKit.*Version.*Mobile.*Safari/.test(navigator.userAgent)) )
$.smartbanner()

For those looking for alternative solutions, you can also check smartbanner.js that works out of the box across iOS and Android.
You can also do targeting based on a meta tag, e.g. for Android-only:
<meta name="smartbanner:enabled-platforms" content="android">
or in a more complex fashion:
<meta name="smartbanner:exclude-user-agent-regex" content="^.*My Example Webapp$">

Related

How to get smooth scrolling functionality on Safari

Just as the title states. Initially I tried to use polyfill smoothscroll by just adding this to the bottom of my body tag:
<script src="https://unpkg.com/smoothscroll-polyfill#0.4.4/dist/smoothscroll.min.js"></script>
But this didn't seem to really do anything. I'm clearly missing something here. Do I need to add something for the smoothscroll functionality to work? Are there any other vanilla js solutions to have smoothscroll work on Safari?
You can use Zenscroll, It is a JavaScript library that enables animated vertical scrolling to an element or position within your document or within a scrollable element
It works on
Android Browser 2.2+
Chrome for Android Chrome 14+ (probably earlier too)
Edge
Firefox 9+
Internet Explorer 9+
iOS Safari 4+
Opera 10.6+
etc..
https://zengabor.github.io/zenscroll/

enableObjectResizing and enableInlineTableEditing in Webkit

I have enabled contentEditable. In Firefox, by default, the tables and images can be manipulated. But in other browsers like Midori, QupZilla and similar WebKit browsers this feature is not enabled by default.
How/Can can I enable these two settings
enableObjectResizing
enableInlineTableEditing
in a WebKit based browser's console?
I am going to utilize this in a program that I am making, but trying to figure out how to do it in the console first.
enableObjectResizing and enableInlineTableEditing aren't supported in WebKit browsers including at least Chrome. Open this codepen (only in Chrome, obviously) to see that.

How to force iPad/iPhone safari to use older version of webkit?

We have an iPad/iPhone enabled web application which was working good on iOS 5.1 and AppleWebKit/534.46 when i upgraded the iPad to iOS 6.0 and accordingly the safari webkit upgraded to AppleWebKit/536.26 many functions stopped and the layout got corrupted as we depending on absolute positioning extensively,so there are to ways to go, the first is to restructure the whole application to handle the webkit changes (this option will take a lot of rework),the second is to find a work around to force iPad safari to use the previous version of webkit (this one will take 0 time and i prefer it).
So, is there any way to force the iPad safari to use a specific webkit version to render the HTML???
thanks in advance,
No.
The only version of webkit on Mobile Safari is whatever one that exists in the iOS version the device has installed.

fancybox compatibility with Android native browser

fancybox is working well on my site when seen on computer
but not working(i mean not getting overlays) on viewing in mobile(android native browser). I don't know what is the problem? is it a bug? please help me.
Fancybox is not supported on mobile browsers, largely because it and similar scripts make heavy use of "position: fixed", which is not supported in Mobile Safari and the Android browser.
See: http://groups.google.com/group/fancybox/browse_thread/thread/c1535b2bdefcad58/507ec578bb5347fa

webkitRequestFullScreen fails when passing Element.ALLOW_KEYBOARD_INPUT in Safari 5.1.2

Running into the following problem specifically in Safari 5.1.2 when attempting to use the javascript fullscreen api.
By copy and pasting the following lines into your browser on a loaded page, you can see the effect.
This works in Chrome 15 and Safari 5.1.2:
javascript:document.querySelector('body').webkitRequestFullScreen();
This works in Chrome 15 but fails silently in Safari 5.1.2:
javascript:document.querySelector('body').webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
ALLOW_KEYBOARD_INPUT seems like it should work in Safari, according to documentation here: http://developer.apple.com/library/safari/#documentation/WebKit/Reference/ElementClassRef/Element/Element.html
Any ideas why this isn't working?
This is known Safari bug. It can be sniffed during full screen switching:
someElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
if (!document.webkitCurrentFullScreenElement) {
// Element.ALLOW_KEYBOARD_INPUT does not work, document is not in full screen mode
}
Use this real time sniffing and thus your code will support future fixing bug in Safari.
someElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) works in chrome.
And someElement.webkitRequestFullScreen() works in safari 5.1.7
All test base on windows 7.
I just ran into the same issue, and this is most definitely a bug.
This may be a case of the Undetectables. Guess we're gonna have to use good ol' browser sniffing.
...(/Safari/.test(navigator.userAgent) ? undefined : Element.ALLOW_KEYBOARD_INPUT)
[edit] ...in which case keyboard input isn't possible. So I guess it's best to cut out fullscreen mode in Safari for the time being [/edit]
Keep in mind that the fullscreen API is in a very early stage at the moment, and should not be used in production

Categories

Resources