Error when using media queries with jQuery

Question

I want to execute the code below when clicking on the next button while screen size is equal to 768px. The problem is when I want to change the screen size, it does not get back to the original style:

  $(document).ready(function() {
    alert();
    $(".billing-information").hide();
    $(".services-information").css("display", "none");
    $("#next").click(function() {
      alert();
      var mq = window.matchMedia("(max-width: 767px)");
      if (mq.matches) {
        $(".services").css("display", "block");
        $(".personal-detail").css("display", "none");
        $(".personal-detail").removeClass("give-color");
        $(".services").addClass("give-color");
        $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
        $(".services").css({ "opacity": "1", "color": "#fff" });
      } else {
          $(".personal-detail").removeClass("give-color");
          $(".services").addClass("give-color");
          $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
          $(".services").css({ "opacity": "1", "color": "#fff" });
      }
    });

Answer 1

The window.matchMedia() method:

runs the specified CSS media query and compares it to the current window state once. To use window.matchMedia() in a responsive manner, to make your code react to a CSS media query whenever the window state changes, you can use its methods/event handlers.

More here www.w3schools.com/win_matchmedia.

To add event listeners for the state change do this:

// media query handler function
function myCSS_handler(x)
{
    if (x.matches)
    {  
       // the screen width is less or equal to 767px
       $(".services").css("display", "block");
       $(".personal-detail").css("display", "none");
       $(".personal-detail").removeClass("give-color");
       $(".services").addClass("give-color");
       $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
    }
    else
    {
       // the screen width is greater than 767px
       $(".personal-detail").removeClass("give-color");
       $(".services").addClass("give-color");
       $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
       $(".services").css({ "opacity": "1", "color": "#fff" });
    }
}

// on DOM ready
$(document).ready(function()
{
    $(".billing-information").hide();
    $(".services-information").css("display", "none");

    $("#next").click(function()
    {
        var x = window.matchMedia("(min-width: 767px)")
        myCSS_handler(x) // Call listener function on button press
        x.addListener(myCSS_handler) // Attach listener function on state changes
    });
});

Or you can use the window resize function like this without the media queries (i added some example functions so the code is more readable):

// function to handle CSS on screen width change
function dynamic_CSS()
{
   // get window width
   var width = $( window ).width();
   // alert("window width is " + width);

   // if width is less or equal to 767px call function widthFrom_0_to_767()
   if(width <= 767) widthFrom_0_to_767();
   else if(width > 767 && width <= 990) widthFrom_767_to_990();
   else if(width > 990 && width <= 1300) widthFrom_990_to_1300();
   else if(width > 1300 && width <= 1600) widthFrom_1300_to_1600();
   else widthFrom_above_1600();
}

// example function for screen width up to 767px
function widthFrom_0_to_767()
{
   $(".personal-detail").removeClass("give-color");
   $(".services").addClass("give-color");
   // ...
}

// on DOM ready
$(document).ready(function()
{
     $(".billing-information").hide();
     $(".services-information").css("display", "none");

     // calls it upon click
     $("#next").click(function()
     {
         dynamic_CSS();
     });

     // on window resize
     $(window).resize(function() 
     {
         // also calls it upon window resize
         dynamic_CSS();
     });
});

Answer 2

If you put your logic in a function, you can call it whenever the screen resizes and when the user clicks the next button:

$( document ).ready( function () {
    alert();
    $( ".billing-information" ).hide();
    $( ".services-information" ).css( "display", "none" );
    $( "#next" ).click( next_button_function );
    $( window ).on( 'resize', next_button_function );


    var next_button_function = function () {
        alert();
        var mq = window.matchMedia( "(max-width: 767px)" );
        if ( mq.matches ) {
            $( ".services" ).css( "display", "block" );
            $( ".personal-detail" ).css( "display", "none" );
            $( ".personal-detail" ).removeClass( "give-color" );
            $( ".services" ).addClass( "give-color" );
            $( ".personal-detail" ).css( {
                "opacity": "0.5",
                "color": "black"
            } );
            $( ".services" ).css( {
                "opacity": "1",
                "color": "#fff"
            } );
        } else {
            $( ".personal-detail" ).removeClass( "give-color" );
            $( ".services" ).addClass( "give-color" );
            $( ".personal-detail" ).css( {
                "opacity": "0.5",
                "color": "black"
            } );
            $( ".services" ).css( {
                "opacity": "1",
                "color": "#fff"
            } );
        }

    }