Execute function based on screen size

Question

I need to execute a specific function based on screen size and screen size changes (Responsive)

So lets say I have 3 functions (For Example)

function red() {
    $('div').css('background','#B60C0C')
    .text('Screen Size RED');
    console.log('RED');
}

function orange() {
    $('div').css('background','#EBAE10')
    .text('Screen Size ORANGE');
    console.log('ORANGE');
}

function green() {
    $('div').css('background','#83ba2b')
    .text('Screen Size GREEN');
    console.log('GREEN');
}

I need to execute function green() when the screen width size 500px or lower

And function orange() when the screen width size 501px to 850px

And function red() when the screen width size 851px or higher

I tried to use resize() but the problem is executing the function when resizing the browser for each pixel repeat executing the same function and this is a very bad way to perform

I need to execute the function when break the point of the screen width size

Ready to use code on jsfiddle http://jsfiddle.net/BaNRq/

Answer 1

I actually wanted to put this as a comment to @Nirvana Tikku's answer, however I can't since I don't have 50 reputation, so I'll comment here + I'll add a my own solution so the answer space wouldn't be wasted.

Comment:

I'm sorry to (perhaps) "ruin the party", but either I didn't get the OP's question right or maybe I'm misunderstanding the solution. Here's what I think the OP wanted: a way to execute a function dynamically based on screen size and without executing the function for each pixel repeat. In the given solution, though it's quite difficult too see at first, the function do execute for each pixel. Try to put console.log('aaaa') in between the return function lines like so:

    return function(){
 console.log('aaaa')
        var width = window.innerWidth; // get the window's inner width

Run the function, then hit F12 button (in Firefox) and resize the window you'll see it shoots up the entire resizing time (sorry can't upload images either - not enough rep').

I've just spent an entire day trying to replicate this solution on my own, so that I'd be able to execute a function based on screen-size but without it 'listening' to every pixel along the way.

So far, it seems impossible (unless someone who reads this has a solution), in the meanwhile here's my code, which IMHO is way less complex.

Solution:

var widths = [0, 500, 850];

function resizeFn() {
if (window.innerWidth>=widths[0] && window.innerWidth<widths[1]) {
red();
} else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
orange();
} else {
green();
}
}
window.onresize = resizeFn;
resizeFn();

see it works in https://jsfiddle.net/BaNRq/16/

BTW this is answer is practically the same as @Vainglory07 minus the jQuery

Answer 2

Meh; here's a solution.

You could cache the lastBoundry determined to invoke the functions only when a change occurs.

// define the boundries
var bounds = [
    {min:0,max:500,func:red},
    {min:501,max:850,func:orange},
    {min:851,func:green}
];

// define a resize function. use a closure for the lastBoundry determined.
var resizeFn = function(){
    var lastBoundry; // cache the last boundry used
    return function(){
        var width = window.innerWidth; // get the window's inner width
        var boundry, min, max;
        for(var i=0; i<bounds.length; i++){
            boundry = bounds[i];
            min = boundry.min || Number.MIN_VALUE;
            max = boundry.max || Number.MAX_VALUE;
            if(width > min && width < max 
               && lastBoundry !== boundry){
                lastBoundry = boundry;
                return boundry.func.call(boundry);            
            }
        }
    }
};
$(window).resize(resizeFn()); // bind the resize event handler
$(document).ready(function(){
    $(window).trigger('resize'); // on load, init the lastBoundry
});

Fiddle: http://jsfiddle.net/BaNRq/3/

Answer 3

If you're talking about the monitor's resolution settings, consider window.screen, for instance I am using 1280 x 1024 so mine reports

window.screen.height; // 1024
window.screen.width;  // 1280

You could also use the avail prefix to ignore things like the task bar. If you just want to work out the browser's visible area then you would use clientHeight and clientWidth on the documentElement, i.e.

document.documentElement.clientWidth;  // 1263 (the scrollbar eats up some)
document.documentElement.clientHeight; //  581 (lots lost here, e.g. to console)

---

As for your fires-too-often problem, introduce a rate limiter, e.g.

function rateLimit(fn, rate, notQueueable) {
    var caninvoke = true, queable = !notQueueable,
        ready, limiter,
        queue = false, args, ctx;
    notQueueable = null;
    ready = function () { // invokes queued function or permits new invocation
        var a, c;
        if (queable && queue) {
            a = args; c = ctx;
            args = ctx = null; queue = false; // allow function to queue itself
            fn.apply(c, a);
            setTimeout(ready, rate); // wait again
        } else
            caninvoke = true;
    }
    limiter = function () { // invokes function or queues function
        if (caninvoke) {
            caninvoke = false;
            fn.apply(this, arguments);
            setTimeout(ready, rate); // wait for ready again
        } else
            args = arguments, ctx = this, queue = true;
    };
    return limiter;
}

var myRateLimitedFunction = rateLimit(
    function () {console.log('foo');},
    2e3 // 2 seconds
);
myRateLimitedFunction(); // logged
myRateLimitedFunction(); // logged after rate limit reached

Answer 4

Using javascript, you may get the value of screen size. And from that you can call your custom functions to get what you want.

 //function for screen resize
 function screen_resize() {
        var h = parseInt(window.innerHeight);
        var w = parseInt(window.innerWidth);

        if(w <= 500) {
            //max-width 500px
            // actions here...
            red();
        } else if(w > 500 && w <=850) {
            //max-width 850px
            // actions here...
            orange();
        } else {
            // 850px and beyond
            // actions here...
            green();
        }

    }

I used window.innerHeight/innerWidth to get the height/width of screen without/disregarding the scrollbars.

    // if window resize call responsive function
    $(window).resize(function(e) {
        screen_resize();
    });

and on resize just call the function and also auto call the function on page.ready state.

    // auto fire the responsive function so that when the user
    // visits your website in a mall resolution it will adjust
    // to specific/suitable function you want
    $(document).ready(function(e) {
        screen_resize();
    });

Try to check the output here: OUTPUT :)

hope this helps..