소스 검색

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

Hakim El Hattab 13 년 전
부모
커밋
1013ff7ba5
4개의 변경된 파일29개의 추가작업 그리고 2개의 파일을 삭제
  1. 1 0
      README.md
  2. 3 0
      index.html
  3. 25 2
      js/reveal.js
  4. 0 0
      js/reveal.min.js

+ 1 - 0
README.md

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

+ 3 - 0
index.html

@@ -8,6 +8,9 @@
 
 		<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="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'>
 		

+ 25 - 2
js/reveal.js

@@ -10,6 +10,8 @@ var Reveal = (function(){
 	var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>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
 		indexh = 0,
 		indexv = 0,
@@ -111,8 +113,8 @@ var Reveal = (function(){
 		}
 
 		if( config.mouseWheel ) {
-			document.addEventListener('DOMMouseScroll', onDocumentMouseScroll, false); // FF
-			document.addEventListener('mousewheel', onDocumentMouseScroll, false);
+			document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
+			document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
 		}
 
 		if( config.rollingLinks ) {
@@ -122,6 +124,17 @@ var Reveal = (function(){
 
 		// Read the initial hash
 		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 );
+		}
 	}
 
 	/**
@@ -147,6 +160,16 @@ var Reveal = (function(){
 			delegate.call();
 		}
 	}
+
+	/**
+	 * 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.

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
js/reveal.min.js


이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.