javascript - code execute perfectly in window resize but with window restore button it causes different results

Question

I created my own version of a CSS grid because some browsers don't support that so I created a solution that works on all the browsers that I want it to work on to explain more what I mean I basically wanted to create a way for images to not

leave unnecessary space when you shrink it's parent container in other words the space in the parent and around the images is calculated to readjust every time when you resize the window so it acts like if it's using CSS grid or a flex structure like this

So I realize I wanted to focus having this work with a parent div with a scrollbar but this time the parent container will have a set height so after a while of adding more code to make this possible I thought I did it successfully

then I press the restore button

unaware of the unknown results of returning to a previous window size that have the parent container with a scrollbar calculated perfectly with my grid simulation. I start to notice that my grid simulation method stop working every time I use the restore button to resize to a previous window size

so as soon as I resize the window by dragging with the mouse my script starts working again. This is what i'm noticing by dragging to resize the window. It generates a certain width size in the DOM. Look where it says id='photo-gallery'

the restore button changes it's width

In my experience the

window.addEventListener('resize',function name);

works with the restore button and by resizing the window by dragging how can I solve this guys? I basically want the restore situation to work the same as by resizing the window by dragging.

Please no suggestions on using other CSS methods. Like I said I chosen this method because this works in certain browsers that have no support for the CSS grid method and the CSS flex method.

Here is my code

document.addEventListener('DOMContentLoaded',function(){

/*<Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/

/*
Note: CSS grid or flex don't work right or don't work at all
for the DOM in some browsers e.g certain versions of IE 
and other browsers etc... so this is a fix to have a simulated grid 
like structure in JS. To have it work on browsers 
that don't work right or that don't 
work at all with CSS grid or the 
flex structure.
*/

  
//<Get the browser scrollbar width measurement>

//Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measurement";
document.body.appendChild(scrollDiv);
//

//Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
//

//Delete the DIV 
document.body.removeChild(scrollDiv);
//

/*Reference this global variable as a numeric data type 
so it can be use in that condition below that calculates 
the browser scrollbar width combine with the 
simulated grid*/
var scrollbarWidthResult= Number(scrollbarWidth);
/**/

//</Get the browser scrollbar width measurement>


//<check for a vertical scrollbar presence inside the photo gallery container>

window.addEventListener('resize',checkIfAVerticalScrollbarIsPresence);

function checkIfAVerticalScrollbarIsPresence() {

var photoGallery = document.querySelector('#photo-gallery');

 if (photoGallery.scrollHeight > photoGallery.clientHeight) {

 var scrollbarWidthResult= Number(scrollbarWidth);
 
/*The scrollbar is detected in the photo gallery container. Generate a JS simulation 
of a grid and calculate with the width size of the scrollbar*/
  var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
  var times = Math.round(w / 150);
  var iw = w / times;
  
  Array.prototype.forEach.call( 
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
  photo_engine.style.width = iw + 'px';
  
  document.querySelector('#photo-gallery').style.width = (iw * times + 1 + scrollbarWidthResult) + 'px';

}
);
/**/

}

else {

/*No vertical scrollbar is detected in the photo gallery container. Generate a 
grid like simulation without a scrollbar calculation*/
  var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
  var times = Math.round(w / 150);
  var iw = w / times;
  
  Array.prototype.forEach.call( 
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
  photo_engine.style.width = iw + 'px';  
  document.querySelector('#photo-gallery').style.width = (iw * times + 1) + 'px'; 
}
);
//

}

}

checkIfAVerticalScrollbarIsPresence();

//</check for a vertical scrollbar presence inside the photo gallery container>

/*</Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/

});

.scrollbar-measurement {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px; /*<-- way the hell off screen */
}
  
#photo-gallery {
  width: 60%;
  height: 205px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

img {
 background-color: pink;
  height: 150px;
  width: 150px;
  float: left;
}

<div id='photo-gallery'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
</div><!--</photo-gallery>-->

Answer 1

This is a nice post. I agree CSS is the solution for things like this but in certain situations where the targeted browser don't have support for certain CSS methods then I can see how JavaScript will be helpful to use to simulate unsupported CSS methods.

I solved that restore button problem now. It should now work.

I also notice there was another problem with this script I discovered it unintentionally. I notice on page load when you have the window in a certain window size it prevents that grid script from executing so I also provided a solution to that by having that grid script run again by a timeout.

document.addEventListener('DOMContentLoaded',function(){

/*<Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/

/*
Note: CSS grid or flex don't work right or don't work at all
for the DOM in some browsers e.g certain versions of IE 
and other browsers etc... so this is a fix to have a simulated grid 
like structure in JS. To have it work on browsers 
that don't work right or that don't 
work at all with CSS grid or the 
flex structure.
*/

  
//<Get the browser scrollbar width measurement>

//Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measurement";
document.body.appendChild(scrollDiv);
//

//Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
//

//Delete the DIV 
document.body.removeChild(scrollDiv);
//

/*Reference this global variable as a numeric data type 
so it can be use in that condition below that calculates 
the browser scrollbar width combine with the 
simulated grid*/
var scrollbarWidthResult= Number(scrollbarWidth);
/**/

//</Get the browser scrollbar width measurement>


//<check for a vertical scrollbar presence inside the photo gallery container>

window.addEventListener('resize',checkIfAVerticalScrollbarIsPresence);

function checkIfAVerticalScrollbarIsPresence() {

var photoGallery = document.querySelector('#photo-gallery');

 if (photoGallery.scrollHeight > photoGallery.clientHeight) {

 var scrollbarWidthResult= Number(scrollbarWidth);
 
/*The scrollbar is detected in the photo gallery container. Generate a JS simulation 
of a grid and calculate with the width size of the scrollbar*/
  var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
  var times = Math.round(w / 150);
  var iw = w / times;
  
  Array.prototype.forEach.call( 
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
  photo_engine.style.width = iw + 'px';
  
  document.querySelector('#photo-gallery').style.width = (iw * times + 1 + scrollbarWidthResult) + 'px';

}
);
/**/

}

else {

/*No vertical scrollbar is detected in the photo gallery container. Generate a 
grid like simulation without a scrollbar calculation*/
  var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
  var times = Math.round(w / 150);
  var iw = w / times;
  
  Array.prototype.forEach.call( 
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
  photo_engine.style.width = iw + 'px';  
  document.querySelector('#photo-gallery').style.width = (iw * times + 1) + 'px'; 
}
);
//

}

}

checkIfAVerticalScrollbarIsPresence();

//</check for a vertical scrollbar presence inside the photo gallery container>

//<Fix for grid simulation does not execute by the window restore button>

window.addEventListener('resize',executeTheGridStructureByTheWindowRestoreButton(function(e){
 checkIfAVerticalScrollbarIsPresence();
}));

function executeTheGridStructureByTheWindowRestoreButton(execute){
  var timer;
  return function(event){
    if(timer) clearTimeout(timer);
    timer = setTimeout(execute,100,event);
  };
}

//</Fix for grid simulation does not execute by the window restore button>

//<Fix for grid simulation does not execute on page load in certain window sizes>

setTimeout(function(){checkIfAVerticalScrollbarIsPresence();},1);

//</Fix for grid simulation does not execute on page load in certain window sizes>

/*</Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/

});

.scrollbar-measurement {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px; /*<-- way the hell off screen */
}
  
#photo-gallery {
  width: 60%;
  height: 205px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

img {
 background-color: pink;
  height: 150px;
  width: 150px;
  float: left;
}

<div id='photo-gallery'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
</div><!--</photo-gallery>-->