JavaScript Math / Looping Dynamically Creating Rows and Columns

Question

So, I have this small bit of code that generates rows and columns of boxes with space in-between them.

It seems to work fine; however when I set the height and width of the boxes to 32 pixels and the space in-between them to 8 pixels, there are gaps that start to appear where boxes should be.

If I use just about any other numbers they work, but of course I had my mind set on 32 and 8.

I am wondering if it's the method in which I am looping through creating the boxes or if there's some underlying math going on that I don't understand.

Here's a jsFiddle set up with the code in question:

http://jsfiddle.net/dondon/zMnuK/

If you modify the 'spacing' in the JS section to say 7 or 9, the gaps vanish. What is it about 8 (or 4) that cause the gaps to appear?

Any input is appreciated! :)

Paul · Accepted Answer · 2012-05-09 03:06:18Z

4

It has to do with multiple boxes having the same id and the css being set on both of them such that they end up in the exact same position. For example, the third box created has x position (x is vertical with your looping order) 88px, and y position 8px. Then much later in the third row a box with y = 88px, and x = 8px. is reached, so 'box' + x + y; is identical for both these boxes. You can't have more than one element with the same id, so anything can happen after that.

The simple solution is to change:

var boxid = "box"+x+y;

To:

var boxid = "box"+x+'_'+y;

Updated JSFiddle

answered May 9, 2012 at 3:06

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nonrandom Over a year ago

Ahhh, yes, thanks! I was beginning to suspect something like that. As I started making the grid larger and larger I was seeing more and more gaps.

nvuono · Accepted Answer · 2012-05-09 03:09:25Z

0

It looks like there was aliasing when you assigned your boxid values and this was only occurring with a spacing equal to 8.

Originally you had:

var boxid = "box"+x+y;

So you could have two boxes with the same id

Change it to:

var boxid = "box"+x+"_"+y;

answered May 9, 2012 at 3:09

nvuono

3,39330 silver badges28 bronze badges

1 Comment

nvuono Over a year ago

I hit submit when I got the notification of 1 new answer... but history is written by the victors =(

Collectives™ on Stack Overflow

JavaScript Math / Looping Dynamically Creating Rows and Columns

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related