Only execute function when screen size is above 992

Question

When I scroll down the bigger image disappears and the smaller image appears. However when I use this on a smaller screen it's crab so I want it to only work for screens that are above 992px.

I want the function to only be active when people have a resolution of 992px or above. I have no clue how to that.

$(window).resize(function() {
  if ($(this).width() > 992) {
    $(window).scroll(function() {
      if ($(window).scrollTop() < 20) {
        $('.navbar-brand').stop(true, true).fadeIn("slow");
        $('.image-scroll').css('display', 'None');
      } else {
        $('.navbar-brand').stop(true, true).fadeOut("slow");
        $('.image-scroll').css('display', 'block');
      }
    });
  }
});

My function doesn't work even though it right. – Benjamin45 Dec 05 '18 at 08:01 — Benjamin45, Dec 05 '18 at 08:01

J.vee · Answer 1 · 2018-12-05T08:08:37.813

1

You can use jquery

if ($(window).width() > 992) {
   alert('More than 992');
}
else {
   alert('Less than 960');
}

For your situation I guess your code should look something like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script> 
if ($(window).width() > 992) {
    alert('More than 992');
 $(window).scroll(function(){
   if($(window).scrollTop()<20){
         $('.navbar-brand').stop(true,true).fadeIn("slow");
        $('.image-scroll').css('display', 'None');
   } else {
         $('.navbar-brand').stop(true,true).fadeOut("slow");  
        $('.image-scroll').css('display', 'block');
   }
});
}else{
    alert('Less than 992');
}
  </script>

edited Dec 05 '18 at 08:08

answered Dec 05 '18 at 07:58

J.vee

623
1
7
26

But i want the function to be used by widths that are above 992 how am i can do that. – Benjamin45 Dec 05 '18 at 08:03
@Benjamin45 Something like this (my edit)? – J.vee Dec 05 '18 at 08:09
It kind of works but their is one problem is the resolution changes while the first visit it doesn't alter the resolution so the script thinks that the resolution is the same . – Benjamin45 Dec 05 '18 at 08:10
@Benjamin45 maybe it is a idea to execute the function then again – J.vee Dec 05 '18 at 08:12
Thanks for your help. – Benjamin45 Dec 05 '18 at 08:14

Mohamed-Yousef · Accepted Answer · 2018-12-05T08:18:19.653

1

While you want to execute the function on window resize and scroll .. it'll be better to create a function .. you need to put the if statement inside an event not the event inside the if

$(document).ready(function(){
  $(window).on('scroll resize' , Scroll_Action)
});

function Scroll_Action(){
    if($(window).scrollTop() < 20 && $(window).width() > 992){
        $('.navbar-brand').stop(true,true).fadeIn("slow");
        $('.image-scroll').css('display', 'None');
    } else {
        $('.navbar-brand').stop(true,true).fadeOut("slow");  
        $('.image-scroll').css('display', 'block');
    }
}

edited Dec 05 '18 at 08:18

answered Dec 05 '18 at 08:11

Mohamed-Yousef

23,946
3
19
28

Ow thanks it does work great. – Benjamin45 Dec 05 '18 at 08:13
Ow wait it doesn't went i have scrolled down allready. It keeps the small image. – Benjamin45 Dec 05 '18 at 08:16
logically I think updated answer it'll work fine @Benjamin45 .. and please don't accept an answer till you check that everything works good for you – Mohamed-Yousef Dec 05 '18 at 08:18
While it does work unless people zoom in or something like that. – Benjamin45 Dec 05 '18 at 08:21

Only execute function when screen size is above 992

2 Answers2