Detect screen size with Jquery

[ajnoguerra]

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.

[David_Leitch]

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

[TreeRoot]

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.

[Eric Gregoire]

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

$(window).on('load resize', function(){  ...  })

[gowda24]

Hi ,
Use media queries to achieve responsive.

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

[boodle]

Thank you… The first link helps me resolve my problem.

[Author]

Posts