Created
October 27, 2014 14:32
-
-
Save pronebird/75eed8b491d187b65f80 to your computer and use it in GitHub Desktop.
Show a help tip how to hide navigation bars on Mobile Safari when in landscape
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// A helper function to toggle a help tip | |
// about how to hide Safari address bar when it's visible | |
// Monitors only landscape mode and works on Safari on iOS 8+ | |
// | |
// This is a part of my post on Coderwall: https://coderwall.com/p/yaro4w | |
// | |
var attachMobileSafariAddressBarHelpTip = function (target) { | |
var $target = $(target); | |
$target.tooltip({ | |
title: 'Scroll up to hide Safari address bar', | |
trigger: 'manual', | |
placement: 'bottom' | |
}); | |
$(window).on('resize', function () { | |
var bodyHeight = document.body.offsetHeight; | |
var windowHeight = window.innerHeight; | |
var isLandscape = Math.abs(window.orientation) === 90; | |
var showTooltip = (windowHeight < bodyHeight); | |
if(!isLandscape) return; | |
$target.tooltip(showTooltip ? 'show' : 'hide'); | |
}); | |
} | |
var ua = window.navigator.userAgent; | |
if(ua.indexOf('iPhone') !== -1 && ua.indexOf('Safari') !== -1) { | |
attachMobileSafariAddressBarHelpTip('#main-nav'); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment