jqueryresponsive-designremoveclass

A better way to remove classes for responsive design (may be without media queries)


my code works, but its not that "professional" because it has some drawbacks like it loads the page every time it resizes the browser window, but what if some one entered data(it will be gone after resizing... The aim should be to remove some classes in the responsive design and than add them back after resizing it back to a desktop pc size.(may be it can be solved without media queries)

The code:

     //remove classes for responsive
    var ww = document.body.clientWidth;

    //to be there on page load(without resizing the browser, to get the responsive view)
    $(function () {
        if (ww < 768) {
            //alert("size" + ww);
            console.log(ww);
            $("*").removeClass("BWPaddingLeft");
            $("*").removeClass("BWPaddingRight");
            $("*").removeClass("BWTextLeft");
            $("*").removeClass("BWTextRight");
            $("*").removeClass("BWPaddingLeftRight");
            $("*").removeClass("BWOverFlowNews");
        }
    });


    $(window).resize(function () {
        var ww1 = document.body.clientWidth; //to get the current width
        if (ww1 > 767 ) {
            window.location.href = document.URL; //load the page to get the removed classes after resizing
            //Problem it will not just once..(after resizing the browser)
        }
        else {
            //removing not needed classes for responsive design
            $("*").removeClass("BWPaddingLeft");
            $("*").removeClass("BWPaddingRight");
            $("*").removeClass("BWTextLeft");
            $("*").removeClass("BWTextRight");
            $("*").removeClass("BWPaddingLeftRight");
            $("*").removeClass("BWOverFlowNews");
        }
    });

Ty, for helping


Solution

  • Maybe instead of removing classes you will replace them with other?

    //to remove class
    $(".BWPaddingLeft").removeClass("BWPaddingLeft").addClass("BWPaddingLeft-inactive"); 
    
    //to add class again
    $(".BWPaddingLeft-inactive").removeClass("BWPaddingLeft-inactive").addClass("BWPaddingLeft");