removing 'skrollr' on mobile screens - php

Question

I am trying to remove the skrollr functions on mobile (max width 767px) screen.
I have the following code that (it is assumed) to stop skrollr on mobile but it doesn't work (I have tried putting it in a seperate, enquened file and put it in the skrollr code itself, no change)
JAVA code
$(function () {
// initialize skrollr if the window width is large enough
if ($(window).width() > 767) {
skrollr.init(yourOptions);
}
// disable skrollr if the window is resized below 768px wide
$(window).on('resize', function () {
if ($(window).width() <= 767) {
skrollr.init().destroy(); // skrollr.init() returns the singleton created above
}
});
});
code at the bottom of footer.php (to make skrollr work)
<script type="text/javascript">
skrollr.init({
forceHeight: false
});
</script>
<script type="text/javascript">
//http://detectmobilebrowsers.com/ + tablets
(function(a) {
if(/android|avantgo|bada\ ... )
{
//Add skrollr mobile on mobile devices.
document.write('<script type="text/javascript" src="js/skrollr.mobile.min.js"><\/script>');
}
})(navigator.userAgent||navigator.vendor||window.opera);
</script>

Answer 1

You are initializing skrollr in the footer.php regardless of the current window width. The condition in line 3 of your JAVASCRIPT file - if ($(window).width() > 767) { - does work, but skrollr is already initialized at this point by the javascript in your footer.php
I would recommend you to remove the initialization of skrollr in the footer.php file and modify your javascript code to something like this:
(function($) {
$(function () {
var skrollrInstance;
var onResize = function () {
var isMobile = $(window).width() <= 767;
if (!skrollrInstance && !isMobile) {
skrollrInstance = skrollr.init({
forceHeight: false
});
} else if(skrollrInstance && isMobile) {
skrollrInstance.destroy();
skrollrInstance = null;
}
};
$(window).on('resize', onResize);
onResize();
});
})(jQuery);
Fiddle: http://jsfiddle.net/erfvgx85/2/ (resize the "Result" frame to test it)
I have stored the current skrollrInstance in a separate variable. As you have commented, "// skrollr.init() returns the singleton (instance) created above", but it could be a performance issue if skrollr isn't initialized or already destroyed at this moment.
I also think that it's nicer to just have one place for the call of skrollr.init - otherwise we could forget to pass the same options (forceHeight: false) in another call. (like in your example)