Using jquery to detect changes in responsive design

Question

I need to bypass some javascript code in a responsive design that supports wide, normal, and narrow widths. I need to bypass the code when in "wide" mode. I could write something like this:

if ($('#page').width() < 1237) {
   ... do the animation stuff
}

Is there better way to do this that would avoid hard-coding pixel widths?

I was thinking that I could apply a class to the body element when the window is resized... something like:

if (width >= 1237) {
    $('body').removeClass('layout-normal').removeClass('layout-ipad').addClass('layout-wide');
}
else if (width >= 980) {
    $('body').removeClass('layout-wide').removeClass('layout-ipad').addClass('layout-normal');
}
else {
    $('body').removeClass('layout-wide').removeClass('layout-normal').addClass('layout-ipad');
}

This would allow me to isolate the hard-coded widths to a single function, and then I could write:

   if (!$('#page').hasClass('layout-wide') {
       ... do the animation stuff
    }

But is there a way to avoid hard-coding pixel widths altogether?

I have a navigation button that triggers a function that shows a bunch of links to the site. When the window is in wide mode, those links are already showing. I need to to detect that they're already showing, and not call the javascript that shows them. — Redtopia, Dec 01 '12 at 18:02

score 0 · Answer 1 · answered Dec 01 '12 at 17:59

0

But is there a way to avoid hard-coding pixel widths altogether?

Media queries is the best way to do this

@media (max-width:767px) {
  .class{}
}

answered Dec 01 '12 at 17:59

defau1t

10,593
2
35
47

I'm already applying media queries to achieve the 3 different view modes. I need to know the best way to determine which mode I'm in within JavaScript... not CSS. – Redtopia Dec 01 '12 at 18:04

score 0 · Answer 2 · edited May 23 '17 at 10:34

Here's what I came up with... My method is to apply classes to the body element that are specific to each supported layout width. I only want to apply those classes if media queries exist, so first I check to see if the browser supports them. Here's the thread that discusses that:

I need an easy way to detect CSS3 media query support using jquery

Unfortunately in this solution, I needed to hard-code my supported widths. If there's a better way to do this, please feel free to post. For now, this is a small tradeoff for quick results.

Here's the CSS:

/* Add to your main CSS file - used to test for media query support */
@media all and (min-width:1px) {
    .mediatest {position:absolute}
}

Here's the JavaScript:

var $globals = {
    mediaQuerySupport: false
};

function initMediaQueries () {
    // tests for media query support and if it exists, it applies classes to the body element on window resize
    $globals.mediaQuerySupport = false;

    /*
    test if the browser knows about media queries
    create a div, apply the test class, test to see if the computed style is absolute... then delete the div
    */
    var d = document.createElement('div');
    d.className = "mediatest"; // found in main css file
    document.body.appendChild(d);
    if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
        $globals.mediaQuerySupport = true;
    }
    document.body.removeChild(d);

    if ($globals.mediaQuerySupport) {
        // apply a class to the body element now and when window resizes
        setBodyLayout ();
        $(window).resize(function () {
            setBodyLayout();
        });
    }
} // initMediaQueries ()

function mediaQueriesEnabled () {
    return ($globals.mediaQuerySupport);
}

function setBodyLayout () {
    // hard-coded widths for the supported media query layouts - change to your needs
    var width = $(window).width();
    if (width >= 1237) {
        $('body').removeClass('layout-normal').removeClass('layout-ipad').addClass('layout-wide');
    }
    else if (width >= 980) {
        $('body').removeClass('layout-wide').removeClass('layout-ipad').addClass('layout-normal');
    }
    else { // if narrower than 980, its the most narrow width
        $('body').removeClass('layout-wide').removeClass('layout-normal').addClass('layout-ipad');
    }
}

score 0 · Answer 3 · answered Oct 28 '13 at 13:46

0

This post is exactly what you are looking for : http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/

answered Oct 28 '13 at 13:46

xurei

1,057
8
22

Using jquery to detect changes in responsive design

3 Answers3