wrap code in a function. noob here

Question

I'm trying to wrap this code:

if($(window).width() > 980) {
   $(window).on("scroll", function() {
      if($(window).scrollTop() > 20) {
        //add black background
        $(".x-navbar").addClass("active");
        $(".x-navbar .desktop .x-nav li  a").addClass("small-bar");
      } 
      else {
        //remove background
        $(".x-navbar").removeClass("active");
        $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
      }
   });
}

in a function, so that I can disable it under 980px width.

The thing I'm trying to achive is something like this:

create a function as here under:

navBar = function () {
     // the whole code goes here.
}

and then "disable" it in the mobile under 980px width like this:

if($(window).width() < 980) {
    // DON'T run the funcion called "navBar". 
}

The problem I'm having is that if the window gets resized to a width under 980px the code above will not listen to the resize and it will run anyway.

i can't try that because if i wrap the whole code into navBar nothing happens now... — Paolo, Nov 07 '15 at 00:48

Mohamed-Yousef · Accepted Answer · 2015-11-07T00:54:13.963

1

as I mentioned in comment

$(window).on("scroll resize", function() {
     if($(window).width() > 980) {
      if($(window).scrollTop() > 20) {
        //add black background
        $(".x-navbar").addClass("active");
        $(".x-navbar .desktop .x-nav li  a").addClass("small-bar");
      } 
      else {
        //remove background
        $(".x-navbar").removeClass("active");
        $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
      }
     }else{
         // if window width < 980
         //remove background
        $(".x-navbar").removeClass("active");
        $(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
     }
   });

edited Nov 07 '15 at 00:54

answered Nov 07 '15 at 00:48

Mohamed-Yousef

23,946
3
19
28

looks good! but how do i say if window width is < 980 don't run the addClass code? – Paolo Nov 07 '15 at 00:51
@PaoloMangia answer updated .. you should remove class after resize – Mohamed-Yousef Nov 07 '15 at 00:54

score 0 · Answer 2 · answered Nov 07 '15 at 00:52

0

You can register a function that will be called when window.resize method is triggered.

$(window).resize(function () {
    //Here you can check the width
});

Hope this helps.

answered Nov 07 '15 at 00:52

Ele

33,468
7
37
75

score 0 · Answer 3 · answered Nov 07 '15 at 00:52

0

This is because once you instantiate a listener, it will not be removed until you explicitly remove it. Check out jQuery's off function to remove a listener. You can then switch between off() and on() depending on the window size.

answered Nov 07 '15 at 00:52

Marwan Sulaiman

79
2
6

wrap code in a function. noob here

3 Answers3

Linked