FAQ Frequently Answered Questions

Álvaro edited this page Feb 5, 2018 · 19 revisions

Index

Parallax doesn't work with fullpage.js. (not talking about the extension)

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature. Or... use parallax:true with the Parallax extension.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

jQuery scrollTop function doesn't work

Same answer as Parallax doesn't work with fullpage.js

jQuery scroll event doesn't work

Same answer as Parallax doesn't work with fullpage.js

Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.

Is it possible to hide the address bar in mobile phones on landscape

Short answer: on Apple iOS you can do that by avoid using the anchors option of fullPage.js.

Explanation: each browser acts in a different way on this matter and it is not possible right now to control the behavior of the address bar by using javascript. You can try to take a look at different meta tags.

Lazyload doesn't work

Short answer: use the scrollBar:true option for fullPage.js. Otherwise, you can make use of the fullpage.js lazy load technique or even use the callbacks provided by fullPage.js such as onLeave, onSlideLeave, afterLoad, afterSlideLoad and afterRender to load images. One of those techniques is explained in this comment.

Explanation: Lazyload techniques , as well as many other plugins which depends on the scrolling of the site, listen the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

My other plugins don't work when using fullPage.js

Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

My javascript/jQuery events don't work anymore when using fullPage.js

Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

How can I set fullscreen videos / backgrounds

Short answer: this has nothing to do with fullPage.js but with CSS knowledge. You should try to find your answers in Google or places such as stackoverflow.com.

Explanation: fullpage.js provides some examples with full backgrounds and full video backgrounds but it has nothing to do with the use of fullPage.js. It is all about CSS.

Fullpage.js jumps one section

Short answer: as detailed in the documentation:

Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).

Explanation: there's no way to avoid the browser's behavior towards the use of anchors in the URL (#) when an element with the id or name attribute exists in the DOM with the exact same value.

Is it possible to scroll automatically through sections / slides?

Short answer: Yep. Check this video tutorial for the automatic vertical scroll or this topic for the horizontal one.

Element gets briefly hidden behind video while scrolling

Short answer: it is a browser's bug. To fix it apply a transform3d property to the element suffering the issue:

.text {
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.