I am attempting to utilize jQuery to modify some css styles when the screen size is smaller than a specific threshold (essentially, recreating "@media screen and (max-width: 1024px)", but with consideration for older versions of IE that do not support this). I have encountered an issue where this functionality is not working as expected in Internet Explorer.
The css modifications are functioning properly in all browsers except for IE. It seems to be working only partially in IE, where some css changes are applied correctly, while others do not reflect on the page, although the console logs show that the values have been changed.
Below is the code snippet:
$(window).resize(function () {
if ($(window).width() <= 1154) {
$(".a").css("display", "none");
$(".b").css("right", "0px");
} else {
$(".a").css("display", "inline");
$(".b").each(
function (itemIndex, item) {
var a = $(item).parents(".c").children(".a");
$(item).css("right", a.css("width"));
}
);
}
});
The purpose of this code is to hide elements with the class "a" when the screen is smaller and adjust elements with the class "b" to occupy the space left by the hidden elements "a".
While "a" elements are hidden correctly in all browsers, in certain versions of IE (specifically 9 and earlier), the "right" property of "b" elements is not set accurately and doesn't seem to update. However, when logging the element id (each "b" has a unique id) and the "right" property after each change, unexpected results are observed. The resize event appears to be triggered twice whenever the screen size changes (maximizing/unmaximizing), resulting in a misleading behavior of the "right" property.
setting b0 right=0px ... Actual value: 0px
setting b0 right=0px ... Actual value: 0px
setting b0 right=180px ... Actual value: 0px
setting b0 right=180px ... Actual value: 180px
setting b0 right=0px ... Actual value: 0px
setting b0 right=0px ... Actual value: 0px
setting b0 right=180px ... Actual value: 0px
setting b0 right=180px ... Actual value: 180px
Furthermore, when inspecting the "right" properties in the HTML tab, it consistently displays 180, despite the discrepancies observed.
Thank you in advance for any assistance you can provide!