+ 3

JQuery should only function on desktop

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

23rd Apr 2017, 7:33 PM
theBlueGHOST
theBlueGHOST - avatar
6 odpowiedzi
+ 7
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 ;)
24th Apr 2017, 5:45 PM
visph
visph - avatar
+ 6
You should get screen with $(window) and use .width() function to get size if ($(window).width() > 1100) { //do something }
23rd Apr 2017, 7:42 PM
h8c
h8c - avatar
+ 5
What happen if user want to access your code via Smartphone? i mean you must have a plan for Smartphone user, right?
23rd Apr 2017, 9:05 PM
Agus Mei
Agus Mei - avatar
+ 3
the answer is in your question
23rd Apr 2017, 7:35 PM
seamiki
seamiki - avatar
+ 2
yea but I need the code. I'm doing this if ( windowWidth > 1100px) {} . and it's not working
23rd Apr 2017, 7:38 PM
theBlueGHOST
theBlueGHOST - avatar
+ 1
#Agus I have a animated header that shrinks down as you scroll but I don't want that for mobile.
24th Apr 2017, 11:09 AM
theBlueGHOST
theBlueGHOST - avatar