CODEWITHSUNDEEP
javascriptjqueryfunctionresponsive-designviewport
R.J.
R.J.

Reputation: 648

Separate desktop and mobile jQuery functions on a responsive site

I'm working on a responsive site with a specific set of jQuery functions for the desktop layout and mobile layout. They interfere with each other if they're both active at the same time.

By checking window.width, I'm able to deliver only the correct set of functions on page load, and I'd like to do the same on window.resize.

I've set up a stripped down Fiddle of where I'm at here: http://jsfiddle.net/b9XEj/

Two problems exist right now:

  1. Either desktopFunctions or mobileFunctions will continuously fire on page resize, whether they have already been loaded or not.
  2. If the window is resized beyond one breakpoint and then returned to the previous size, the incorrect set of functions will already have been loaded, interfering with the current set.

The window.resize function should behave in the following way:

  1. Check if the correct set of functions currently active for the viewport size
  2. If yes, return.
  3. If no, fire correct set of functions and remove incorrect set of functions if they exist.

In the Fiddle example above, you would always see a single line, displaying either "Mobile Functions are active" or "Desktop Functions are active".

I'm a bit lost at this point, but I have tried using 

if ($.isFunction(window.mobileFunctions))

to check if functions already exist, but I can't seem to get it working without breaking the overall function. Here's a fiddle for that code: http://jsfiddle.net/nA8TB/

Thinking ahead, this attempt also wouldn't take into account whether the incorrect set of functions exists already. So, I'm really hoping there's a way I can deal with this in a simpler way and solve both problems.

Any help would be much appreciated!

Upvotes: 0

Views: 1817

Answers (2)

charlietfl
charlietfl

Reputation: 171679

Following conquers 2 of the problems. The resize fires many times a second, so using a timeout will fix it firing your code constantly. It also adds a check to see if the same size is in effect, and return if it is

$(document).ready(function() {

    var windowType;
    var $wind = $(window);

    var desktopFunctions = function() {
        $('body').append('<p>Desktop functions are active</p>');
    }

    var mobileFunctions = function() {
        $('body').append('<p>Mobile Functions are active</p>');
    }

    var mobileCheck = function() {
        var window_w = $wind.width();
        var currType = window_w < 940 ? 'mobile' :'desktop';

        if (windowType == currType) {
            $('body').append('<p>No Type Change, Width= '+window_w+'</p>');
            return;
        } else {
            windowType = currType;
        }

        if (windowType == 'mobile') {                
            mobileFunctions();
        } else {
            desktopFunctions();
        }
    }

    mobileCheck();
    var resizeTimer;

    $wind.resize(function() {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }

        resizeTimer = setTimeout(mobileCheck, 300)
    });

});

DEMO: http://jsfiddle.net/b9XEj/1/

Without seeing some real world differences between your 2 sets of functions it is hard to provide gudance on how to stop them conflicting. One possibility is checking the windowType in your functions

Upvotes: 2

McGarnagle
McGarnagle

Reputation: 102753

You can prevent the continuous firing by adding a delay mobileCheck. Use a setTimeout along with a checkPending boolean value.

var checkPending = false;

$(window).resize(function(){
    if (checkPending === false) {
        checkPending = true;
        setTimeout(mobileCheck, 1000);
    }
});

See here: http://jsfiddle.net/2Q3pT/

Edit

As far as the second requirement, you could use this pattern to create or use the existing one:

mobileFunctions = mobileFunctions || function() {
    // mobile functions active
};

See: http://jsfiddle.net/2Q3pT/2/

Upvotes: 1

Related Questions