Changing functions based on screen size

Question

I'm trying to execute functions based on the user screen size. I managed to do so with the following code:

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

    if (width > 1000) {
        slideshow();
        tablet();
        if (width > 1600) {
            audio();
        }
    }
    else {
        phone();
        $('.menu').localScroll();   
    }

When the user is changing his screen size while he is already inside the website (like resizing or changing orientation mode) the previous functions that were executed are still taking effect, which creates conflict with he latest functions that are trying to get executed.

I tried add the following code to the one listed above:

    $(window).resize(function() {
    $('.logo').unbind();
    $('.menu-item').unbind();
    $('.menuList').unbind();
    $('.icon-menu').unbind();
    $('.menuListItem').unbind();
    $('.menu').unbind();
    $('.info').unbind();

    if (width > 1000) {
        slideshow();
        tablet();
        if (width > 1600) {
            audio();
        }
    }
    else {
        phone();
        $('.menu').localScroll();   
    }
});

This code .unbind() every element that is being effected by the previous functions when the user resizing the browser, but it still loads the previous functions (phone/tablet).

I'm looking for a way to remove the unnecessary functions when the screen size is being resized.

live example can be viewed at this website

Answer 1

Try this:

function res(){
        var width = $(window).width();
        $('.logo').unbind();
        $('.menu-item').unbind();
        $('.menuList').unbind();
        $('.icon-menu').unbind();
        $('.menuListItem').unbind();
        $('.menu').unbind();
        $('.info').unbind();
    }
$(window).ready(res).resize(res);