hide address bar in mobile browsers, add apple web app meta

This commit is contained in:
Hakim El Hattab 2012-05-06 22:05:58 -04:00
parent ec1c111359
commit 1013ff7ba5
4 changed files with 71 additions and 42 deletions

View File

@ -119,6 +119,7 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
- Added event binding methods (Reveal.addEventListener, Reveal.removeEventListener) - Added event binding methods (Reveal.addEventListener, Reveal.removeEventListener)
- Added 'slidechanged' event - Added 'slidechanged' event
- Added print styles. Thanks [skypanther](https://github.com/skypanther) - Added print styles. Thanks [skypanther](https://github.com/skypanther)
- The address bar now hides automatically on mobile browsers
#### 1.2 #### 1.2

View File

@ -9,6 +9,9 @@
<meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations."> <meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
<meta name="author" content="Hakim El Hattab"> <meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reset.css">

View File

@ -10,6 +10,8 @@ var Reveal = (function(){
var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section', var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section',
VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section', VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section',
IS_TOUCH_DEVICE = !!( 'ontouchstart' in window ),
// The horizontal and verical index of the currently active slide // The horizontal and verical index of the currently active slide
indexh = 0, indexh = 0,
indexv = 0, indexv = 0,
@ -111,8 +113,8 @@ var Reveal = (function(){
} }
if( config.mouseWheel ) { if( config.mouseWheel ) {
document.addEventListener('DOMMouseScroll', onDocumentMouseScroll, false); // FF document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
document.addEventListener('mousewheel', onDocumentMouseScroll, false); document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
} }
if( config.rollingLinks ) { if( config.rollingLinks ) {
@ -122,6 +124,17 @@ var Reveal = (function(){
// Read the initial hash // Read the initial hash
readURL(); readURL();
// Set up hiding of the browser address bar
if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
// Give the page some scrollable overflow
document.documentElement.style.overflow = 'scroll';
document.body.style.height = '120%';
// Events that should trigger the address bar to hide
window.addEventListener( 'load', removeAddressBar, false );
window.addEventListener( 'orientationchange', removeAddressBar, false );
}
} }
/** /**
@ -148,6 +161,16 @@ var Reveal = (function(){
} }
} }
/**
* Causes the address bar to hide on mobile devices,
* more vertical space ftw.
*/
function removeAddressBar() {
setTimeout( function() {
window.scrollTo( 0, 1 );
}, 0 );
}
/** /**
* Handler for the document level 'keydown' event. * Handler for the document level 'keydown' event.
* *

82
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long