Question

I’d like to create a numbered grid.The user puts in the number and the grid is generated. I’d like to do it in CSS, HTML or Jquery Mobile. This is for an ipad project. I’m not sure how to approach the problem. I would like the following result:

As it stands now, I have a div that repeats a grid image across the page. I have to regenerate an image for each background. i.e.: user wants a 40X60 feet area, I will have to generate a 40X60 image. (100px=5 feet on the grid) I’d much rather have the user input two numbers and have the grid and numbers auto generated.

<div style="background-image:url(/images/linegrid100.png);
width:980px;height:700px;
border:1px solid black;padding:10px;">

I’ve looked at a serious number of grid generators. I’ve thought about using a table rather than an image. Would that be better? How do I approach the math for the number generation? Seems like this should all be pretty straight forward, but I can’t find much information. (Googled for a couple of days now) These kinds of grids are done all of the time in graphics programs and CAD programs.

Any help would be appreciated.

TIA -Rachel

---

OK. Here is the result of your code. It is running 🙂 but not as expected. I’ve been working with the code all day. It is making more sense now, but I’m still lost with the loops and math. Any ideas? So nice to have help and this is fun. Thanks again -R

The code that seems to impact things is :

w = parseInt($square.css('width'), 10) + 2; //the width of each square + 2 pixels for the borders;

If I leave it just as you have it:

If I change the 10 to 100:

Answer 1

Let’s assume you have the following form where users enter the two numbers:

<form>
    <input type="text" id="x">
    <input type="text" id="y">
</form>

Then you can use jQuery to generate your grid as follows:

var x = parseInt($('#x').val(), 10),
    y = parseInt($('#y').val(), 10);

grid(x, y);

function grid(x, y) {
   var i = -1,
       j = -1,
       step = 5, //assuming that each grid unit = 5
       $grid = $('<div>', {'id':'grid'}),
       $square = $('<div>', {'class':'square'}),
       $label,
       w = parseInt($square.css('width'), 10) + 2; //the width of each square + 2 pixels for the borders;

  $grid.width(w * x);

  while(++i < x) {
       while(++j < y) {
        if(j === 0) {
        $label = $('<span>', {'class':'label'});
        $label.css('top', j * w).css('left', i * w).html(i * step);
        }
        if(i === 0 && j > 0) {
            $label = $('<span>', {'class':'label'});
        $label.css('top', j * w).css('left', i * w).html(j * step);
            }
            $grid.append($square.clone(), $label);
       }
       j = -1;
  }
  $('body').append($grid);
}

CSS:

#grid { overflow: hidden; border-left: 1px solid #000; border-top: 1px solid #000; position: relative; }
div.square { width: 50px; height: 50px; float: left; border-bottom: 1px dotted #000; border-right: 1px dotted #000; }
span.label { position: absolute; background: #fff; font-weight: bold; z-index: 10; }

Let’s say here’s our overlay (dialog box):

<div>
    <input type="text" id="x">
    <input type="text" id="y">
    <button id="build-grid" type="button">Build grid</button>
</div>

Then, you attach an onclick event to the build-grid button. So, when the button is clicked, we read the x and y values and build the grid.

$('#build-grid').on('click', function(e){
   e.preventDefault();
   var x = parseInt($('#x').val(), 10), //get our values from the input fields
       y = parseInt($('#y').val(), 10);

   grid(x, y); // build the grid
});