Grid numbering with CSS in jQuery mobile design

Question

Grid numbering with CSS in jQuery mobile design

Looking to create a numbered grid where the user inputs a number and the grid is generated. I am considering using CSS, HTML, or Jquery Mobile for an iPad project. I'm unsure of the best approach at the moment. I would like the grid and numbers to auto generate based on user input.

Currently, I have a div that repeats a grid image across the page, requiring a new image for each background. For example, if a user wants a 40X60 feet area, a 40X60 image must be generated. I would prefer a simpler method where the user can input two numbers for automatic grid and number generation.

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

I have explored various grid generators and considered using a table instead of an image. I am unsure about the approach for number generation and have not found much information online even after days of searching. Grids like these are commonly used in graphics and CAD programs.

Any assistance would be greatly appreciated.

Thank you in advance -Rachel

After implementing your code, the result is not as expected. I have been working on it all day and it is starting to make more sense, but I am struggling with the loops and math. Any suggestions? I appreciate the help and find this process enjoyable. Thanks once again -R

The code snippet that seems to be impacting the outcome is:

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

If I keep it as is:

If I change the 10 to 100:

css html jquery-mobile grid

Answer 1

Answer №1

Assuming that users input two numbers in the form below:

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

You can then utilize jQuery to create a grid based on the numbers provided:

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, //each grid unit equals 5
       $grid = $('<div>', {'id':'grid'}),
       $square = $('<div>', {'class':'square'}),
       $label,
       w = parseInt($square.css('width'), 10) + 2; //width of each square + 2 pixels for 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; }

For the overlay (dialog box) we have:

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

By attaching an onclick event to the build-grid button, we can generate the grid with the x and y values entered by the user:

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

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

Answer 2

Assuming that users input two numbers in the form below:

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

You can then utilize jQuery to create a grid based on the numbers provided:

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, //each grid unit equals 5
       $grid = $('<div>', {'id':'grid'}),
       $square = $('<div>', {'class':'square'}),
       $label,
       w = parseInt($square.css('width'), 10) + 2; //width of each square + 2 pixels for 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; }

For the overlay (dialog box) we have:

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

By attaching an onclick event to the build-grid button, we can generate the grid with the x and y values entered by the user:

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

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

Grid numbering with CSS in jQuery mobile design

Answer №1

Similar questions

How to align text to the left and image to the right using CSS

Choose the grandparent of an element's parent

Storing JavaScript Array for Future Use in a Separate File

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

Sorting rows dynamically with jQuery Tablesorter

Select multiple options by checking checkboxes in each row using React

Capturing text content in an HTML attribute - using Selenium

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

Using jQuery for slide shows in Ruby on Rails framework

Exporting Canvas data without the alpha channel

How can I speed up the loading time of my background image?

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

JavaScript's failure to properly handle UTF-8 encoding

Looking for a straightforward way to incorporate a "Read more" and "Show Less" functionality into a Wordpress site using Javascript?

Use flex-grow and flex-wrap to split elements onto separate lines

Trouble arises with kids when trying to adjust the display to block mode

Emphasize cells and headers when a cell's value deviates from its initial value

What is the reason behind the inability of this YouTube instant search script to enable fullscreen mode?

Ensure that column headers remain fixed when scrolling side to side

What is the best way to overlay elements with a gray background?