Disable Fullpage.js on smaller screen width (not only on mobile)

Design help Custom code
1

I have read all former topics about the Fullpage.js (like this Fullpage.js disable on mobile) and I successfully added it, also the part that it is disabled on mobile.

The current custom footer code which works on mobile:

<script>if (screen && screen.width > 480) { document.write('<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"><\/script>'); } </script>
<script> $(document).ready(function() { $('#fullpage').fullpage(); });</script>

But for my planned design it would be helpful if it will be disabled if you reduce the screen width of the browser window, too. So that the code not only grabs the screen width of the device itself, like it’s described in the topic linked above.
Is there anyway? Maybe @EvanJones knows? :slight_smile:

2

you want to add an event listener an set a if statement

example:

     // listen for screen resize
	$(window).resize(setScreen);

	// check screen size
	function setScreen() {

		if($(window).width() < 480) {
			options.disable = true;
			obj.removeAttr('style');
		} else {
			options.disable = false;
			updatePosition();
		}

	}

	// update element position
	function updatePosition() {
		
		if(options.disable) {return false;}

		var scrollTop = $(window).scrollTop();

		doTransformParallax(scrollTop);

	}
3

The easiest way is by making use of fullpage.js responsive options: responsiveWidth and responsiveHeight.

Just pass the values you need on them when initialising fullpage.js.

For example:

new fullpage('#fullpage', {
     responsiveWidth: 900
});

This way fullpage will get disabled under 900px and act like a normal page.
Here’s an example: