Grow your CSS skills. Land your dream job.

Detect screen size with Jquery

  • # July 8, 2013 at 2:53 am

    Hi guys, been having trouble with the responsive website I’m currently working on. I want to detect the screen resolution/ browser size or window size of the user so I can apply certain changes with the website’s navigation. When the screen gets smaller to 1024 then the the current NAV will be removed so that I could add a new formatted Nav that is fit for that screen size. Here’s my code:

    Thanks for the help.

    # July 8, 2013 at 12:51 pm

    Simple way to detect whether your code works or not is by using `alert()` or `console.log`

    var width = $(window).width(), height = $(window).height();
    if ((width <= 1023) && (height >= 768)) {
    alert('Remove my nav!');
    } else {
    alert('Do nothing');
    }
    # July 8, 2013 at 1:18 pm

    Two things:

    Remember that you’ll need to trigger the test on the window [resize](http://api.jquery.com/resize/ “http://api.jquery.com/resize/”) event, as well as the document ready event. If you leave it as is, the test only runs when the document is loaded, so when you make the browser narrower, the nav won’t change

    Are you sure you want to be changing the nav depending on how tall the browser is? It’s valid/justifiable, just not something I’ve seen too often

    # July 8, 2013 at 2:23 pm

    If you’re going to test when the window resize event fires, you may want to use a resize debounce plugin, such as:
    http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

    You can also use Modernizr’s media query test function:
    http://modernizr.com/docs/#mq

    Both will work live during resizes and not just on initial load.

    # July 8, 2013 at 9:31 pm

    Like mentioned above, I would cover load AND resize. You can use jQuery .on() such as

    $(window).on('load resize', function(){  ...  })
    # July 8, 2013 at 11:32 pm

    Hi ,
    Use media queries to achieve responsive.

    @media (min-width : 1024px){
    }
    inside this make your nav display : none.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".