ALAVGUY ALAVGUY - 1 month ago 7
Javascript Question

Modifying an X and Y variable, based on position in For Loop

EDIT - I don't think I explained it very well the first time.

I have a lot of data - it's in an Array, with each item in the array being an object. In the system I am working in (a control system for A/V devices, which uses JavaScript as the programming language), I am generating buttons based on the length of the array. I want to be able to position a button, and essentially know the X and Y coordinates for each button in the array - with X and Y being Row/Column. (which I then translate to a X/Y pixel position on my UI.

My initial code, which is below, is within a for loop, and I manually calculated the button position. But this is tedious, as I use this same function to show off different groups/sizes of buttons.

Anywhere there is mirage.log = console.log.

The code below is part of a For Loop

button.element.style.position = 'absolute'; //Do to all Buttons.
if (i == 0) //First Item
{
button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = btn_Info.startTop + 'px';
}
else if (i <= btn_Info.numRow-1) //First Column.
{
mirage.log('Setting Position of First Column');
button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * i + btn_Info.startTop + 'px';
}
else if (i > btn_Info.numRow - 1 && i <= btn_Info.numRow * 2 - 1)
{
mirage.log('Setting Second column ' + i);
button.element.style.left = btn_Info.startLeft + btn_Info.width + btn_Info.hOffset + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i-btn_Info.numRow) + btn_Info.startTop + 'px';
}
else
{
mirage.log('Setting Third column ' + i);
button.element.style.left = btn_Info.startLeft + ((btn_Info.width + btn_Info.hOffset)*2) + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i - (btn_Info.numRow*2)) + btn_Info.startTop + 'px';
}


Thanks in advance for the help - I have grabbed so many answers from this forum over the last year, you guys are awesome!

EDIT -

I was able to get some adjustment if I generate rows first then columns:

I was able to get a little close with the help of a friend, and be able to adjust for a 2 column layout by doing the following:

encoder = {
'buttonVals':{'width':125,'height':50,'numCols':2,'numRows':null;'vOffset':10,'hOffset':10}

var posLeft;
var posTop;

posLeft = (i % encoder.buttonVals.numCols) * (encoder.buttonVals.width + encoder.buttonVals.hOffset) + encoder.buttonVals.startLeft;
posTop = Math.floor(i / encoder.buttonVals.numCols) * (encoder.buttonVals.height + encoder.buttonVals.vOffset) + encoder.buttonVals.startTop;

Answer

After working on this for a bit - here is the code that I got to work. This prints out both the row position, and the column position.

testFunction = function(incRow, incCol){
	  
	  var myFunc = {
	    'testLength':0,
	    'numRows':incRow,
	    'numCols':incCol,
	    'array':[],
	  };
	  myFunc.testLength = incRow * incCol;
	  
	  for(var c=0, posCol = 0, posRow = 0; c < myFunc.testLength; c++)
	  {
         var whichRow;        
         posRow = Math.floor(c/myFunc.numRows);
         whichRow = Math.floor(c/myFunc.numRows) + c;
         if (whichRow > myFunc.numRows)
         {
             whichRow = whichRow - (myFunc.numRows * posRow) - posRow;
             if (whichRow === 0)
             {
                 posCol = posCol + 1;
             }
         }
         console.log(c + ' : ' + whichRow + ' : ' + posCol);      
	  }
};


testFunction(6,4);

Comments