running jquery media query without reload

Question

i have three different divs red, blue, green and yellow. red contains an input box. am trying to hide yellow if the input box in red is clicked(focus) and if the screen size is below 500. it does work but only if i reload the page is there any way to make it work without reloading the page?

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>

js

    if ($(window).width() < 960) {
   $(function(){

   $(".s").on("focus",function()
   {
        $(".yellow").hide();
   });
   $(".s").on("blur",function()
   {
        $(".yellow").show();
   });

});
}
else {
}

css

    .red, .blue, .green, .yellow
{
    padding: 10px;
    border: 1px solid #f00;
}
.red{
    background: red;
}
.blue{
    background: blue;
}
.green{
    background: green;
}
.yellow{
    background: yellow;
}
.s:focus{
    border: 1px solid black;
}
.s:focus + yellow{
    display: none;
}

Answer 1

Instead of binding on load of the page, put the code in a function and call that function when you want it to be called. I added it in a function and called on click of a button for the demo.

Demo

$(document).ready(function () {
 $('button').on('click', function () {
    if (checkWidth()) { //checking width of window before binding the focus event
        onFocusHandling();  
    }
 });
});


function onFocusHandling() {
 //you can also add the checkWidth() here than above
 $(".s").on("focus", function () {
    $('.yellow').hide();
 });

 $(".s").on("blur", function () {
    $('.yellow').show();
 });
}

function checkWidth() {
 return ($(window).width() < 960);
}

Updated

Fiddle

Called the function onFocusHandling on window resize and on document ready

$(document).ready(function () {
 onFocusHandling();
 $(window).resize(function () {
    onFocusHandling();
 });
});

function onFocusHandling() {

  if (checkWidth()) {
    $(".s").on("focus", function () {
        $('.yellow').hide();
    });
    $(".s").on("blur", function () {
        $('.yellow').show();
    });
  }
  else {
   $(".s").off("focus").off("blur");        
  }
}

When the width is maximized unbind the focus and blur event.

Answer 2

The functionality you want can be done using a much simple way, here is my HTML

HTML

        <div class="red">
            <form>
                <input type="text" class="s" id="txt" placeholder="Search"/>
            </form>
        </div>
        <div class="blue">top</div>
        <div class="green">middle</div>
        <div class="yellow">bottom</div>

CSS

            .red, .blue, .green, .yellow {
                padding: 10px;
                border: 1px solid #f00;
            }
            .red {
                background: red;
            }
            .blue {
                background: blue;
            }
            .green {
                background: green;
            }
            .yellow {
                background: yellow;
            }
            .s:focus {
                border: 1px solid black;
            }
            .s:focus + yellow {
                display: none;
            }

MY JS:

              $(document).ready(function() {
                var width = $(window).width();
               $(window).resize(function() {
                    $(".s").trigger("blur");
                    $(".s").on("focus", function()
                    {
                        var width = $(window).width();
                        if (width < 960)
                        {

                            $(".yellow").hide();
                        }
                    });
                    $(".s").on("blur", function()
                    {
                        $(".yellow").show();
                    });
               });
            });

UPDATED JS:

                $(document).ready(function() {
                var width = $(window).width();
                   $(".s").trigger("blur");
                    $(".s").on("focus", function()
                    {
                        var width = $(window).width();
                        $("#det").text(width);
                        alert(width);
                        if (width < 960)
                        {
                       $(".yellow").hide();
                        }
                    });
                    $(".s").on("blur", function()
                    {
                        $(".yellow").show();
                    });
               $(window).resize(function() {
                    $(".s").trigger("blur");
                    $(".s").on("focus", function()
                    {
                        var width = $(window).width();
                        $("#det").text(width);
                        alert(width);
                        if (width < 960)
                        {
                         $(".yellow").hide();
                        }
                    });
                    $(".s").on("blur", function()
                    {
                        $(".yellow").show();
                    });
               });
            });

What i am doing here is ,

1. Used window.resize()function in order to detect the resize of the page
2. Once window is resized, i trigger a blur function to the textbox, using $(".s").trigger("blur")
3. Then, I find the width of the window, only when the user focuses on the text
4. Once input box gets into focus again, I hide the Yellow div.

Here is a DEMO for your reference