-
Notifications
You must be signed in to change notification settings - Fork 7.3k
FAQ Frequently Answered Questions
Check the new fullPage.js Help Center for more detailed questions and answers.
- Parallax doesn't work with fullpage.js
- jQuery scrollTop function doesn't work
- jQuery scroll event doesn't work
- Is it possible to hide the address bar in mobile phones on landscape
- Lazyload doesn't work
- My other plugins don't work when using fullPage.js
- My javascript/jQuery events don't work anymore when using fullPage.js
- How can I set fullscreen videos/backgrounds
- Fullpage.js jumps one section
- Is it possible to scroll automatically through sections/slides?
- Element gets briefly hidden behind video while scrolling
Parallax doesn't work with fullpage.js. (Not referring to the fullPage 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.
Same answer as Parallax doesn't work with fullpage.js
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.
Short answer: On iOS you can do that by not using the anchors option of fullPage.js or the data-anchor attributes.
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.
Short answer: Use the scrollBar:true option for fullPage.j or you can make use of the fullpage.js Lazy Load option 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 that depend on the scrolling of the site, listen to the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false will it actually scroll the site in a way that is accessible for the scrollTop property.
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.
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.
Short answer: This has nothing to do with fullPage.js but with CSS knowledge. You should try to find your answers on Google or at 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.
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.
Short answer: Yep. Check this video tutorial for the automatic vertical scroll or this topic for the horizontal one.
Short answer: It is a browser 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);
}