- Fullpage v2.0. Now needed a container in the HTML structure. alvarotrigo#265, alvarotrigo#319

alvarotrigo · alvarotrigo · commit bf43131ff855 · 2014-04-07T18:08:13.000+01:00
- Added compatibility for old version (&lt;2.0)
diff --git a/README.md b/README.md
@@ -43,10 +43,12 @@ As you can see in the example files, you will need to include the JavaScript fil
 Each section will be defined with a `div` containing the `section` class.
 The active section by default will be the first section, which is taken as the home page.
 ```html
-<div class="section">Some section</div>
-<div class="section">Some section</div>
-<div class="section">Some section</div>
-<div class="section">Some section</div>
+<div id="fullpage">
+	<div class="section">Some section</div>
+	<div class="section">Some section</div>
+	<div class="section">Some section</div>
+	<div class="section">Some section</div>
+</div>
 ```
 If you want to define a different starting point rather than the first section or the first slide of a section, just add the class `active` to the section and slide you want to load first.
 ```html
@@ -70,14 +72,14 @@ All you need to do is call the plugin inside a `$(document).ready` function:
 
 ```javascript
 $(document).ready(function() {
-	$.fn.fullpage();
+	$('#fullpage').fullpage();
 });
 ```
 
 A more complex initialization with all options set could look like this:
 ```javascript
 $(document).ready(function() {
-	$.fn.fullpage({
+	$('#fullpage').fullpage({
 		verticalCentered: true,
 		resize : true,
 		slidesColor : ['#ccc', '#fff'],
@@ -155,7 +157,7 @@ To create links between sections, you could use the `menu` option and make use o
 - `slidesColor`:(default `none`) Define the CSS `background-color` property for each section: 
 Example: 
 ```javascript
-$.fn.fullpage({
+$('#fullpage').fullpage({
     slidesColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
 });
 ```
@@ -203,7 +205,7 @@ In order to link the elements of the menu with the sections, an HTML 5 data-tag
 </ul>
 ```
 ```javascript
-$.fn.fullpage({
+$('#fullpage').fullpage({
     anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
     menu: '#myMenu'
 });
@@ -302,7 +304,7 @@ In case of not having anchorLinks defined in the plugin the `index` parameter wo
 Example:
 
 ```javascript
-	$.fn.fullpage({
+	$('#fullpage').fullpage({
 		anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 	
 		afterLoad: function(anchorLink, index){
@@ -330,7 +332,7 @@ Parameters:
 Example:
 
 ```javascript
-	$.fn.fullpage({	
+	$('#fullpage').fullpage({	
 		onLeave: function(index, direction){
 			//after leaving section 2
 			if(index == '2' && direction =='down'){
@@ -351,7 +353,7 @@ This callback is fired just after the structure of the page is generated. This i
 Example:
 
 ```javascript
-	$.fn.fullpage({
+	$('#fullpage').fullpage({
 		afterRender: function(){
 			alert("The resulting DOM stucture is ready");
 		}
@@ -373,7 +375,7 @@ In case of not having anchorLinks defined for the slide or slides the `slideInde
 Example:
 
 ```javascript
-	$.fn.fullpage({
+	$('#fullpage').fullpage({
 		anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 	
 		afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
@@ -407,7 +409,7 @@ Parameters:
 Example:
 
 ```javascript
-	$.fn.fullpage({	
+	$('#fullpage').fullpage({	
 		onSlideLeave: function( anchorLink, index, slideIndex, direction){
 			//leaving the first slide of the 2nd Section to the right
 			if(index == 2 && slideIndex == 0 && direction == 'right'){
diff --git a/jquery.fullPage.js b/jquery.fullPage.js
@@ -1,5 +1,5 @@
 /**
- * fullPage 1.8.5
+ * fullPage 2.0
  * https://github.com/alvarotrigo/fullPage.js
  * MIT licensed
  *
@@ -131,7 +131,7 @@
 		var slideMoving = false;
 
 		var isTablet = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone)/);
-
+		var container = $(this).length? $(this): $('#superContainer'); // for compatibity reasons for fullpage < v2.0
 		var windowsHeight = $(window).height();
 		var isMoving = false;
 		var isResizing = false;
@@ -145,7 +145,18 @@
 			options.css3 = support3d();
 		}
 
-		$('body').wrapInner('<div id="superContainer" />');
+		if($(this).length){
+			container.css({
+				'height': '100%',
+				'position': 'relative',
+				'-ms-touch-action': 'none'
+			});
+		}
+
+		//for compatibity reasons for fullpage < v2.0 
+		else{
+			$('body').wrapInner('<div id="superContainer" />');
+		}
 
 		//creating the navigation dots 
 		if (options.navigation) {
@@ -633,7 +644,7 @@
 			
 			if(options.autoScrolling){
 				scrollOptions['top'] = -dtop;
-				scrolledElement = '#superContainer';
+				scrolledElement = container.selector;
 			}else{
 				scrollOptions['scrollTop'] = dtop;
 				scrolledElement = 'html, body';
@@ -1204,9 +1215,9 @@
 		* Adds a css3 transform property to the container class with or without animation depending on the animated param.
 		*/
 		function transformContainer(translate3d, animated){
-			$('#superContainer').toggleClass('easing', animated);
+			container.toggleClass('easing', animated);
 			
-			$('#superContainer').css(getTransforms(translate3d));
+			container.css(getTransforms(translate3d));
 		}
 		
 		
@@ -1428,7 +1439,7 @@
 				transformContainer(translate3d, false);
 			}
 			else {
-				$("#superContainer").css("top", -top);
+				container.css("top", -top);
 			}
 		}
 
diff --git a/jquery.fullPage.min.js b/jquery.fullPage.min.js
