Skip to content

Commit

Permalink
- Lazy load now also working for slide alvarotrigo#1338
Browse files Browse the repository at this point in the history 
- afterRender returns now the container element rather than `undefined` 
- New warning message when using `scrolLBar` and `scrollOverflow`. alvarotrigo#1352
- Now timeouts are being cleared on destroy alvarotrigo#1329
- Removed warning error when fullPage.js selector doesn't exist on the page alvarotrigo#1284
- Updated documentation with a few clarifications alvarotrigo#1306 alvarotrigo#1354
- Improvement for Windows and IE 11 in touch devices alvarotrigo#1245 alvarotrigo#160
  • Loading branch information
@alvarotrigo
alvarotrigo committed Jul 10, 2015
1 parent 604e159 commit 2aadea8
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 74 deletions.
30 changes: 16 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

![preview](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png)
![compatibility](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/compatible.gif)
![fullPage.js version](http://img.shields.io/badge/fullPage.js-v2.6.6-brightgreen.svg)
![fullPage.js version](http://img.shields.io/badge/fullPage.js-v2.6.7-brightgreen.svg)
[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT)
7Kb gziped!

Expand Down Expand Up @@ -73,6 +73,8 @@ https://cdnjs.com/libraries/fullPage.js
###Required HTML structure
Each section will be defined with an element containing the `section` class.
The active section by default will be the first section, which is taken as the home page.

Sections should be placed inside a wrapper (`<div id="fullpage">` in this case). The wrapper can not be the `body` element.
```html
<div id="fullpage">
<div class="section">Some section</div>
Expand Down Expand Up @@ -191,10 +193,10 @@ We could have used a custom anchor for the slide instead of its index if we woul
```html
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
```
In this last case, the URL we would use would be `#secondPage/slide3`, which is the equivalent to our previous `#secondPage/2`.
Expand All @@ -215,11 +217,11 @@ In this last case, the URL we would use would be `#secondPage/slide3`, which is
Example:
```javascript
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
```
- `anchors`: (default `[]`) Defines the anchor links (#example) to be shown on the URL for each section. The position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. **Be careful!** if you use anchors, they can not have the same value as any ID element on the site (or NAME element for IE).
- `anchors`: (default `[]`) Defines the anchor links (#example) to be shown on the URL for each section. Anchors value should be unique. The position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. **Be careful!** anchors can not have the same value as any ID element on the site (or NAME element for IE).
- `lockAnchors`: (default `false`). Determines whether anchors in the URL will have any effect at all in the plugin. You can still using anchors internally for your own functions and callbacks, but they won't have any effect in the scrolling of the site. Useful if you want to combine fullPage.js with other plugins using anchor in the URL.
Expand Down Expand Up @@ -269,16 +271,16 @@ This won't generate a menu but will just add the `active` class to the element i
In order to link the elements of the menu with the sections, an HTML 5 data-tag (`data-menuanchor`) will be needed to use with the same anchor links as used within the sections. Example:
```html
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
```
```javascript
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
```
Expand Down Expand Up @@ -463,7 +465,7 @@ To enable lazy loading all you need to do is change your `src` attribute to `dat
<img data-src="image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
<source data-src="video.mp4" type="video/mp4" />
</video>
```
Expand Down
35 changes: 24 additions & 11 deletions jquery.fullPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* fullPage 2.6.6
* fullPage 2.6.7
* https://github.com/alvarotrigo/fullPage.js
* @license MIT licensed
*
Expand Down Expand Up @@ -467,6 +467,14 @@
isScrollAllowed.k = $.extend(true,{}, isScrollAllowed.m);
var originals = $.extend(true, {}, options); //deep copy

//timeouts
var resizeId;
var afterSectionLoadsId;
var afterSlideLoadsId;
var scrollId;
var scrollId2;
var keydownId;

if($(this).length){
container.css({
'height': '100%',
Expand All @@ -477,10 +485,6 @@
container.addClass(WRAPPER);
$('html').addClass(ENABLED);
}
//trying to use fullpage without a selector?
else{
showError('error', 'Error! Fullpage.js needs to be initialized with a selector. For example: $(\'#myContainer\').fullpage();');
}

//if css3 is not supported, it will use jQuery animations
if(options.css3){
Expand Down Expand Up @@ -758,8 +762,7 @@
scrollableWrap.mouseover();
}

var scrollId;
var scrollId2;

var isScrolling = false;

//when scrolling...
Expand Down Expand Up @@ -1226,7 +1229,7 @@
//even when the scrollingSpeed is 0 there's a little delay, which might cause the
//scrollingSpeed to change in case of using silentMoveTo();
if(options.scrollingSpeed){
setTimeout(function () {
afterSectionLoadsId = setTimeout(function () {
afterSectionLoads(v);
}, options.scrollingSpeed);
}else{
Expand Down Expand Up @@ -1667,7 +1670,7 @@

addAnimation(slides.find(SLIDES_CONTAINER_SEL), options.scrollingSpeed>0).css(getTransforms(translate3d));

setTimeout(function(){
afterSlideLoadsId = setTimeout(function(){
afterSlideLoads();
}, options.scrollingSpeed, options.easing);
}else{
Expand All @@ -1687,7 +1690,6 @@
$window.resize(resizeHandler);

var previousHeight = windowsHeight;
var resizeId;
function resizeHandler(){
//checking if it needs to get responsive
responsive();
Expand Down Expand Up @@ -2252,7 +2254,7 @@
events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);

//in touch devices with scrollBar:true, e.pageY is detected, but we have to deal with touch events. #1008
if(isTouch && isReallyTouch(e)){
if(isTouch && isReallyTouch(e) && options.scrollBar){
events.y = e.touches[0].pageY;
events.x = e.touches[0].pageX;
}
Expand Down Expand Up @@ -2336,6 +2338,12 @@
FP.setKeyboardScrolling(false);
container.addClass(DESTROYED);

clearTimeout(afterSlideLoadsId);
clearTimeout(afterSectionLoadsId);
clearTimeout(resizeId);
clearTimeout(scrollId);
clearTimeout(scrollId2);

$window
.off('scroll', scrollHandler)
.off('hashchange', hashChangeHandler)
Expand Down Expand Up @@ -2426,6 +2434,11 @@
options.continuousVertical = false;
showError('warn', 'Option `loopTop/loopBottom` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled');
}

if(options.scrollBar && options.scrollOverflow){
showError('warn', 'Option `scrollBar` is mutually exclusive with `scrollOverflow`. Sections with scrollOverflow might not work well in Firefox');
}

if(options.continuousVertical && options.scrollBar){
options.continuousVertical = false;
showError('warn', 'Option `scrollBar` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled');
Expand Down
Loading

0 comments on commit 2aadea8

Please sign in to comment.