ovokuro ovokuro - 1 year ago 56
Javascript Question

How can I call a function depending on screen width?

I have 2 functions, and I want them to be called depending on the screen width.

This is what I have tried:

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

var sections = function() {
var $this = $(this),
x = $this.find('img').width()

var sectionsMobile = function() {
'height': 'auto',
'width': '100%'

function checkSize() {
if (winWidth >= 800) {
} else {
jQuery(window).on('load resize', checkSize);

When the page loads, it works and the CSS is applied. However resizing between the 800px boundary doesn't switch between the functions.

Full demo here: http://codepen.io/sol_b/pen/PzgdWy

Any help much appreciated.

Answer Source

Try this:

$(window).on("load resize",function(){

    if($(this).width() >= 800 )


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download