Run JQuery only on small screens

Question

I'm trying to get my jquery to only run when the screen size is mobile. Now of course it's very easy to do this with css but for some reason as soon as I try detecting the screen size with jquery it doesn't work. Anyone know where I'm going wrong here?

<script src="JAVASCRIPT/jquery-3.1.0.min.js"></script>
<script>
  if ( $(window).width() > 600) {     
  }
  else {
    $(".tbinputArea").focus(function() {
      $("#footer").hide();
    });

    $(".tbinputArea").focusout(function() {
      $("#footer").show();
    });
  }
</script>

score 1 · Accepted Answer · answered Sep 16 '16 at 14:06

Can you try like this:

var isMobileView = false; //global variable

$(document).ready(function () {

    function setScreenWidthFlag() {
        var newWindowWidth = $(window).width();
        if ( $(window).width() > 600) {   
            isMobileView = false;
        }
        else {
            isMobileView = true;
        }
    }

    $(".tbinputArea").focus(function() {
        if(isMobileView)
            $("#footer").hide();
    });

    $(".tbinputArea").focusout(function() {
        if(isMobileView)
            $("#footer").show();
    });

    setScreenWidthFlag();

    $(window).on("resize", function (e) {
        setScreenWidthFlag();
    });
});

I have a quick question, is there a simple way to delay the `$("#footer").show();` I tried this but it didn't work. `$("#footer").delay(5000).show();` — Matt Hutch, Sep 16 '16 at 14:38
@MattHutch with [setTimeout](https://stackoverflow.com/questions/12721029/use-jquery-to-show-a-div-in-5-seconds) — GusMilc, Jul 01 '21 at 20:42

Ehsan · Answer 2 · 2016-09-16T14:13:46.847

1

Try this :

$(document).ready(function(){

    if ( $(window).width() > 600) {   

                //Your code....
    }


    $(".tbinputArea").on("focusin",function(){

        if($(window).width() <= 600)

            $("#footer").hide();       

    })


    $(".tbinputArea").on("focusout",function(){

        if($(window).width() <= 600)

            $("#footer").show();             
    })

})

edited Sep 16 '16 at 14:13

answered Sep 16 '16 at 14:07

Ehsan

12,655
3
25
44

Run JQuery only on small screens

2 Answers2