JQuery should only function on desktop

Question

I want a specific jQuery code to work only when the width is more than 1100px.

Answer 1

You can also use media query to display or not your animated header, and test its calculated css property to see if it's displayed or not...
With a 'mobile-first' logic:

<style>
#myHeader {
display:none;
}
@media all and ( min-width: 1100px ) {
.myHeader {
display:block;
}
}
</style>

<header id="myHeader">Header</header>

<script>
var h = document.getElementById('myHeader'); /* with JQuery, something like: $('#myHeader') ^^ */
var s = window.getComputedStyle(h);
if (s.display!='none') { alert('Header is displayed'); }
else { alert('Header is not displayed'); }
</script>

Obviously, you can mix the ways...
Advantages of using media-query and css to do all that possible without JS is to prevent the ( rare ) case of browsers without JS or with but disabled by user ;)

Answer 2

You should get screen with $(window) and use .width() function to get size

if ($(window).width() > 1100) {
//do something
}

Answer 3

What happen if user want to access your code via Smartphone?
i mean you must have a plan for Smartphone user, right?

Answer 4

the answer is in your question

Answer 5

yea but I need the code. I'm doing this if ( windowWidth > 1100px) {} . and it's not working

Answer 6

#Agus I have a animated header that shrinks down as you scroll but I don't want that for mobile.