Order on Resize
const size = "";
const initsize = false;
window.addEventListener("resize", (e) => {
if(e.currentTarget.innerWidth < 1000 && (size == "notmobile" || initsize == false)) {
let grids = document.querySelectorAll(".grid-container");
grids.forEach(element => {
let images = element.querySelectorAll(".frame-type-image");
if(images.length > 0){
let orderfollowup = images.length;
for(a=0; a<images.length; a++){
images[a].parentElement.style.order = a + 1;
}
let rest = element.querySelectorAll(".frame:not(.frame-type-image)");
for(a=0; a<rest.length; a++){
orderfollowup = orderfollowup + 1;
rest[a].parentElement.style.order = orderfollowup;
}
}
})
size = "mobile";
initsize = true;
}
if((size == "mobile" || initsize == false) && e.currentTarget.innerWidth >= 1000) {
let grids = document.querySelectorAll(".grid-container");
grids.forEach(element => {
let frames = element.querySelectorAll(".frame");
for(a=0; a<frames.length; a++){
frames[a].parentElement.style.order = 0;
}
})
size = "notmobile";
initsize = true;
}
});
No Comments