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
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");