-1

I am creating a grid and I need to append items into it from an array of Javascript objects.

The grid <div id="grid"> simply a div container which needs to have 4 columns and infinite rows (to accommodate a varying quantity of objects that may be inserted into the grid).

The grid items, which will also be divs, are based on objects that have attributes specifying their columns, row, width & height within the grid. They look like this:

c: 1
r: 3
x: 1
y: 1

columns: Just like a table this defines which column the item starts at, and expands to the right according to the item's x value.

row: The row the item is on.

x: The width of item in columns. The item width is always less than or equal to 4.

y: The height of the item in rows. The item height is always less than or equal to 2.

I need to write some javascript that will order, position and append these items within the grid based on these attributes. If it helps, the json data is coming from a similar grid created with the gridster.js library.

jQuery can be used.

ac360
  • 7,735
  • 13
  • 52
  • 91
  • Nice plugin :) Are you trying to do the opposite of the serialize method? –  Oct 22 '13 at 17:35
  • wared - Pretty much, except the data has been modified from what the serialize method produces, and this is going into an embeddable widget, which won't have access to the gridster.js library since it will be loaded on someone else's website. – ac360 Oct 22 '13 at 17:45
  • Ok, so there is quite a few things to do ;) I'm sorry, you should at least provide us the desired HTML/CSS structure and try something in Javascript. You can use http://jsfiddle.net/ in order to share your work in progress in case you need support. –  Oct 22 '13 at 18:06

1 Answers1

0

Ok, after a day I was able to do this quite simply...

The key to making a grid was simple CSS positioning.

Making sure the parent container (the #grid) was position:relative; and all of the grid boxes used position:absolute and top:;left:; I was able to accurately position the items within the grid based on their JSON properties.

For each grid item in the JSON array I received, I set their height, width, row and column by giving them preprogrammed css classes:

.item .widthx1  { width: 85px  !important;   }
.item .widthx2  { width: 180px !important;   }
.item .heighty1 { height: 85px !important;   }
.item .heighty2 { height: 180px !important;  }

.item .col1 {  left:10px   !important; }
.item .col2 {  left:105px  !important; }
.item .col3 {  left:200px  !important; }
.item .col4 {  left:295px  !important; }

.item .row1 {  top:10px   !important; }
.item .row2 {  top:105px  !important; }
.item .row3 {  top:200px  !important; }
.item .row4 {  top:295px  !important; }

Note - My CSS rows go up to .row24 as I didn't anticipate any more rows than this. If you have more rows, you can always write some javascript to calculate the top attribute by multiplying the number of rows by the height dimension of each grid object. Same goes for columns and the left attribute. Just multiply the number columns by the width dimension of the grid object. Then you could possibly inject the top and left attributes into a simple style tag on the object.

Since each item object in my JSON array looked like this, specifying columns, rows, x width and y height:

c: 1
r: 3
x: 1
y: 1

I iterated through each item and appended HTML that looks like this, and wah-lah!

$(itemsArray).each(function(index, item) {
     var itemHtml = "<div class='item widthx" + item.x + " heighty" + item.y + " row" + item.r + " " + "col" + item.c + "'>" + image + "</div>"
     $('#grid').append(itemHtml)
});
ac360
  • 7,735
  • 13
  • 52
  • 91