All geek questions in one place

The most effective way to create a grid is to view my page

I would like to create a grid on my page consisting of tiny tiny boxes - (say, height and width are 2 pixels or 2x2). I had a few thoughts on how to do this - all of this one way or another failed:

  • PHP using echo-statemenet
  • Javascript is my best option so far
  • Manually build the grid to fit 800 x 800 (WAY too long).

Unfortunately, even my best option was rather slow. Does anyone have a better plan on how I can effectively create a grid consisting of tiny squares?

+4
source share
4 answers

This works for me (grid.gif - 3x3 with border, see http://stuff.drnet.at/stackoverflow/grid/ for the working version):

<html><head> <script language="JavaScript"> function mm (e) { if (!e) e=window.Event; var o=document.getElementById('grid'); var x=e.clientX-o.offsetLeft; var y=e.clientY-o.offsetTop; document.getElementById('coords').innerHTML=''+x+'/'+y; } </script> </head> <body onload="document.getElementById('grid').onmousemove=mm;"> <div id="grid" style="position:absolute; left:10px; top:10px; width:800px; height:600px; background: url(grid.gif) repeat left top; border:1px solid black; padding:0px; margin:0px;"></div> <div id="coords" style="position:absolute; left:10px; top:620px;"></div> </body> </html>

Tested only with FF and Chrome (both on Ubuntu Lucid), but the idea should work.

+1
source

On a 2x2 grid, I am sure that you will not show any data. Even so, I think it will not be inside each grid.

So, you have to create a 2x2 image image (or 3x3 with 1 pixel) in your graphics program and create the div you want "grid-ify" and give div a background

 .gridify { background: url(image/grid.jpg) repeat left top; }

Where gridify is the class of your div / span / what have you.

Further editing

Now, since you want to click and drag to select an area, you can try this to create a div on top of the .gridify div, and give the new “clicked and dragged” div a darker and more transparent background ... This will give the illusion of selecting boxes .

+1
source

Here is some PHP to print the grid:

 <?php $size = 5; $total = 100; ?> <html> <head> <style> .box { width:<?php echo $size; ?>px; height:<?php echo $size; ?>px; float:left; } .black { background-color:black; } .white { background-color:white; } </style> </head> <body> <?php echo "<div style='width:{$total}px;height:{$total}px;'>\n"; $start_color = true; for($i = 1; $i <= floor($total/$size); $i++) { $start_color =! $start_color; $current_color = $start_color; for($j = 1; $j <= floor($total/$size); $j++) { echo "<span class='box ".(($current_color) ? 'black' : 'white')."' id='box_{$i}_{$j}'></span>\n"; $current_color =! $current_color; } } echo "</div>"; ?> </body> </html>
0
source

You can see the jQuery plugin for masonry. Unfortunately, the goal is to rebuild and animate the grid layout, rather than printing a tiny 2d layout, but maybe this helps. It can also define a function for each of your bricks or cells. The algorithm is similar to bin packaging.

0
source

Source: https://habr.com/ru/post/1387044/

More articles:


All Articles