Skip to content

Instantly share code, notes, and snippets.

@nick1n
Created January 2, 2015 17:59
Show Gist options
  • Save nick1n/35cd992e29c979a587de to your computer and use it in GitHub Desktop.
Save nick1n/35cd992e29c979a587de to your computer and use it in GitHub Desktop.
Bookmark help for mobile phones
// Bookmark help for phones
var isMobile = {
Android: navigator.userAgent.match(/Android/i),
BlackBerry: navigator.userAgent.match(/BlackBerry/i),
iOS: navigator.userAgent.match(/iPhone|iPad|iPod/i),
Opera: navigator.userAgent.match(/Opera Mini/i),
Windows: navigator.userAgent.match(/IEMobile/i),
any: function() {
return isMobile.Android || isMobile.BlackBerry || isMobile.iOS || isMobile.Opera || isMobile.Windows;
}
},
$bookmarkInfo = $('.bookmark-info'),
$bookmarkModal = $('.bookmark-modal'),
dismissedAlert = +(localStorage['dismissed-alert'] || 0),
currentDate = +new Date;
$bookmarkInfo.on('click', function() {
$bookmarkInfo.hide();
$bookmarkModal.modal();
});
$bookmarkModal.find('.btn-primary').on('click', function() {
localStorage['dismissed-alert'] = currentDate;
});
if (isMobile.any() && dismissedAlert + 2629740000 < currentDate) {
$bookmarkInfo.show();
if (isMobile.Windows) {
$bookmarkModal.find('.modal-body').html('<ul><li>Press the menu button (three dots)</li><li>Select pin to start</li></ul>');
} else if (isMobile.Android) {
$bookmarkModal.find('.modal-body').html('<ul><li>Press the menu button</li><li>Select Add to homescreen or Add shortcut to home</li><li>Press Add</li></ul>');
} else if (isMobile.iOS) {
$bookmarkModal.find('.modal-body').html('<ul><li>Press the share icon <img src="' + template_path + 'img/ios-action-icon.png"></li><li>Select Add to Home Screen</li><li>Press Add</li></ul>');
}
}
/* bookmark help styles */
.bookmark-info {
bottom: 5px;
cursor: pointer;
display: none;
left: 5px;
line-height: 1.428571429;
margin: 0;
position: fixed;
right: 5px;
z-index: 1050;
}
.bookmark-info .glyphicon {
font-size: 40px;
margin-left: 6px;
}
.bookmark-modal ul,
.bookmark-modal p {
margin: 0;
}
.bookmark-modal img {
margin-left: 6px;
width: 16px;
}
<!-- bookmark help html -->
<div class="bookmark-info alert alert-success">
<span class="glyphicon glyphicon-plus-sign pull-right"></span>
<p>Add an icon to your phone's home screen to easily access this website.</p>
</div>
<div class="bookmark-modal modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Add an icon to your phone's home screen</h4>
</div>
<div class="modal-body">
<p>iOS:</p><ul><li>Press the share icon <img src="img/ios-action-icon.png"></li><li>Add to Home Screen</li><li>Press Add</li></ul>
<p>Android:</p><ul><li>Press the menu button</li><li>Add to homescreen or Add shortcut to home</li><li>Press Add</li></ul>
<p>Windows Phone:</p><ul><li>Press the menu button (three dots)</li><li>Press pin to start</li></ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ignore</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment