CODEWITHSUNDEEP
javascriptjqueryhtmlfullpage.jsresponsiveness
Sharp
Sharp

Reputation: 1399

Disabling a jQuery script in HTML for a specific window width

I know this is probably a very basic issue, but I'm building a website with the help of the fullPage.js script ( https://github.com/alvarotrigo/fullPage.js ), but with little jQuery/Javascript knowledge.

What I want to do is disable the script for window width of 800px and less, but have it enabled for higher. Alternatively, I'd want to set a certain variable to false inside the script with the same condition.

This is how the script looks like (I removed some settings to make it shorter):

<script>
    $(document).ready(function() {
            $('#fullpage').fullpage({
                responsiveWidth: 800,
                continuousVertical: true
            });
        });
</script>

This was my attempt at making it work simply, but it doesn't appear to work:

<script type="text/javascript">
if ( $(window).width() > 800) {
   $(document).ready(function() {
            $('#fullpage').fullpage({
                responsiveWidth: 800,
                continuousVertical: true
            });
        });
}
</script>

Upvotes: 0

Views: 408

Answers (2)

Alvaro
Alvaro

Reputation: 41595

Use the fullPage.js responsive options, such as responsiveWidth or responsiveHeight.

Example online

 $('#fullpage').fullpage({
     responsiveWidth: 800,
     continuousVertical: true
 });

As detailed in the docs:

responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

Additionally you can make use of the class fp-auto-height-responsive to prevent fullPage.js to restrict the size of your sections to a 100% height. Read about it in the docs too.

Update

As detailed in the answers, now he wants to know how to disable verticalCentered on mobile devices. It is as easy as making use of the responsive option detailed above (that will also disable autoscrolling) and its state class to overwrite the .fp-tableCell class applied to the sections when using verticalCentered:true.

.fp-responsive .fp-tableCell {
    vertical-align: top;
}

Upvotes: 2

Sterling Beason
Sterling Beason

Reputation: 630

The condition is switched around. $(window).width()<800 Try this:

<script type="text/javascript">
if ( $(window).width() < 800) {
   $(document).ready(function() {
            $('#fullpage').fullpage({
                responsiveWidth: 800,
                continuousVertical: true
            });
        });
}
</script>

Upvotes: 0

Related Questions