My ajax call is facing an issue where the CSS classes for a loader and overlay are only being applied in desktop view, not mobile view. I am unsure of what mistake I may be making. Can someone help me resolve this problem?
Here is the ajax call:
function filterAjax(s_url){
$.ajax({
type: "GET",
data : {is_ajax:1},
url: s_url,
beforeSend: function() {
initLoader();
},
success: function(data) {
killLoader();
updatePage(data);
filter();
$(".offcanvas-siderbars").removeClass("column-left-active");
},
error: function(jqXHR, textStatus, errorThrown) {
//console.log(errorThrown);
}
});
}
The functions in question are:
function initLoader() {
$('.mkmage-overlay').fadeIn(200, function(){
$('.mkmage-loader').show();
});
}
function killLoader() {
$('.mkmage-loader').hide();
$('.mkmage-overlay').fadeOut(200);
}
Here are the CSS classes used:
.mkmage-overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #363636;
z-index: 10000;
top: 0;
left: 0;
}
.mkmage-loader{
display: none;
width: 60px;
height: 60px;
position: fixed;
left: 50%;
top: 50%;
z-index: 1000000;
transform: translate3d(-50%,-50%,0)
}