Javascript equation to display a pop-up grid

Question

I am trying to open all the pop-ups from the queue so that they have different sizes and positions depending on the number of elements in my queue array. When the pop-ups start up, the idea is that they will completely fill the user’s screen (using screen.width and screen.height) regardless of whether 2 pop-ups or 200 open. I calculated the width equation of each pop-up, but havent been able to to height, top and left positions. I believe that the height attribute is related to the width relative to the aspect ratio of the screen (screen.width / screen.height), but I could be wrong.

Here is the code, thanks for the help!

var queue = [someUrl, someUrl, someUrl, someUrl]; function popUp(){ //open popups var W=screen.width/Math.ceil(Math.sqrt(queue.length)); for(i=0; i<queue.length; i++) { window.open(queue[i],i,'width='+W+',height='???',toolbar=0, menubar=0,location=0,status=0,scrollbars=0,resizable=0,left='???' ,top='???''); } } 

W*i almost works for left= , however it cannot redistribute pop-ups as soon as one reaches the right side of the screen. Perhaps the conditional expression can be used for if (W*i>screen.width) .

Answer 1

looking at related questions from the outside, I found an answer (more or less) written in another language. Trick should first calculate the number of rows and columns your grid should have (depending on the length of your array), then run a loop inside the loop, where the first loop repeats your rows and second columns.

here is javascript translation of this other answer

 function popUp(){ // calculate number of rows and columns var cols = Math.ceil(Math.sqrt(queue.length)); var rows = Math.ceil(queue.length/cols); // calculate width and height based on number of cols && rows var W = screen.width / cols; var H = screen.height / rows; var item = 0; //item of the queue array for(i=0; i<rows; i++) { for(j=0; j<cols; j++) { window.open(queue[item],item,'width='+W+',height='+H+',toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left='+W*j+',top='+H*i+''); item++; //add 1 to item if(item >= queue.length) { break } //break out of loop once item reaches length of queue } } } 

this loop would always create the perfect grid, which may not always be what you want, if you have an odd number of elements, the last line should be missing a few cells, but this loop-ina-loop will create empty pop-ups to complete grid, so we add this last line to break out of the loop when the elements> = queue.length (that is, as soon as you reach the end of your queue)

UPDATE : here the loop is in reverse order (slightly easier to read here than in the comment)

  for(i=rows-1; i>=0; i--) { for(j=cols-1; j>=0; j--) { //pop up code } }