Streaming live at 10am (PST)

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


#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);

	}