Streaming live at 10am (PST)

Can i disable fullPage.js depending on div size?

My question is: Can i disable fullPage.js depending on a div size?

I’ve been trying to look this up, but with no luck. I found this “if, else” stuff, but i don’t think i know how to tweak it right, or if it’s even possible:

if(.scrollable.width < 10) { 
   $('#fullpage').fullpage({
        autoScrolling: false,
        fitToSection: false
}} else {
   $('#fullpage').fullpage({
        autoScrolling: true,
        fitToSection: true
}}

.scrollable = div starting at 0vw and expanding to 50vw.
I want the scroll from fullPage.js to stop when this div is bigger than 1vw (or just 10 px) and active again when 0vw.

Is this possible?

Regards,
A javascript rookie

Figured out another solution. :smile:

Yes you can.
Just use the fullpage options: responsiveWidth or responsiveHeight as in this example:
https://alvarotrigo.com/fullPage/examples/responsive.html

You can find more info on these options on the fullpage.js docs:

1 Like

Hi Alvaro, shout out for fullpage.js, this is one great and useful program :slight_smile:

I lack free time but making a “definitive and complete Webflow template for using FullPage.js” is near the top of my to-do list.

On top of all the expected usages for fullpage.js, it can be used by Webflow designers to navigate through underlying hidden divs that can be used as triggers for the interaction engine IX2.

1 Like

Definitely! It can be used in more ways that I can probably think of!

I also made a tutorial on how to use it in webflow.
Here’s the blog post:

And here the video tutorial:

Any questions or requests for more tutorials, contact me!

1 Like