how to control jquery according to media screen?

Question

I want to use this jquery only on resposive template and want to disable it in desktop and laptop screen width

$(document).ready(function() {
    $('a.searchkey').click(function(){
    $('.search').slideToggle('fast');
    $(this).toggleClass('active');
});
});
$(window).scroll(function() {
    if ($(this).scrollTop() > 10){
          $('.search').hide('fast'); 
    }
});
 $(document).ready(function() {
            $(window).scroll(function() {
                if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
                   $('.bottom_menu').hide();
                }else {
                    $(this).scrollTop() > 10
                    $('.bottom_menu').show('fast');
                }
            });
        });

I want this code only work in windows width < 1000 and i have tried that code as well but it didn't work

$(window).resize(function() {
   if ($(this).width() < 1000) {
$(document).ready(function() {
    $('a.searchkey').click(function(){
    $('.search').slideToggle('fast');
    $(this).toggleClass('active');
});
});
$(window).scroll(function() {
    if ($(this).scrollTop() > 10){
          $('.search').hide('fast'); 
    }
});
 $(document).ready(function() {
            $(window).scroll(function() {
                if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
                   $('.bottom_menu').hide();
                }else {
                    $(this).scrollTop() > 10
                    $('.bottom_menu').show('fast');
                }
            });
        });
   }
});

check it out - http://stackoverflow.com/questions/6136193/jquery-if-statement-depending-on-width-in-px and http://stackoverflow.com/questions/7715124/jquery-do-something-if-screen-width-is-less-than-960-px — Anonymous, Sep 12 '14 at 12:11
@MaryMelody it's good i knew about that but my question is that how i can put that code in this code $(window).resize(function() { if ($(window).width() < 960) { how i can attach that code with this code i have tried it many of time but it's couldn't work ... i tried it like as check again my question i update it again — Muhammad Hamza Nisar, Sep 12 '14 at 12:24
@Tim i try it like as http://jsfiddle.net/Lpu2sxrh/ but it's not work maybe here is some error if you will check it and fix it for me ... maybe it will be work — Muhammad Hamza Nisar, Sep 12 '14 at 13:14
You have a problem with this line: `$(this).scrollTop() > 10`. — flowstoneknight, Sep 12 '14 at 13:20
@flowstoneknight i can remove this line then what i need to have to do ... — Muhammad Hamza Nisar, Sep 12 '14 at 13:35

score 0 · Answer 1 · answered Sep 12 '14 at 16:05

One way is to put an if statement inside each function that you want to restrict. So when the function is called, it first checks to see if the window is the appropriate size. Something like this:

function functionName() {
    if ($(window).width() < 1000) {
        //function code here
    }
}

Here's a fiddle.

how to control jquery according to media screen?

1 Answers1