I would like to create a functionality where, when the width of .tabla_gs_gm surpasses the width of .content, .tabla_gs_gm disappears and another div appears in its place. While this is already working, there seems to be a screen flicker between the two divs during resizing. I believe this issue is related to the resize function but I'm unsure how to address it.
jQuery:
<script>
function jqUpdateSize(){
var content = $(".content").width();
var tabla_gs_gm = $(".tabla_gs_gm").width();
if(tabla_gs_gm >= content){
$(".grillas_mobile").css("display","block");
$(".grillas_desktop").css("display","none");
}else{
$(".grillas_desktop").css("display","block");
$(".grillas_mobile").css("display","none");
}
};
$(document).ready(jqUpdateSize);
$(window).resize(jqUpdateSize);
</script>
HTML:
<div class="content">
<div class="grillas_desktop">
<table>
//content
</table>
</div>
<div class="grillas_mobile">
<table>
//content
</table>
</div>
</div>
CSS:
.grillas_desktop, .grillas_mobile{
margin: 10px auto;
width: 100% !important;
height: auto;
overflow: hidden;
display: block;
}
table.tabla_gs_gm{
margin: auto;
width: 99%;
border-collapse: collapse;
}
.tabla_gs_gm td{
padding: 3px;
}
.tabla_gs_gm .class_label{
display: block;
vertical-align: middle;
text-align: center;
}
.grillas_mobile select{
margin: 3px 0px 10px 0px;
width: 100%;
padding: 3px 3px;
}