CODEWITHSUNDEEP
phpjavascripthtml
user725913
user725913

Reputation:

Most efficient way to create a grid-look for my page

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

  1. PHP using the echo statemenet
  2. Javascript - my best option so far
  3. Manually construct the grid to fit a 800 x 800 space (would take WAY too long).

Unfortunately, even my best option was quite slow. Does anyone have a better plan for how I could create a grid made up of tiny squares in an efficient manner?

Upvotes: 4

Views: 680

Answers (4)

Cybercartel
Cybercartel

Reputation: 12592

You can take a look at the masonry jQuery plugin. Unfortunatley it's goal is to rearrange and animate a grid layout and not to print a tiny 2d layout but maybe it helps. It can also define a function for each of your brick or cell. It's algorithm is similar to the bin-packing.

Upvotes: 0

ben
ben

Reputation: 1936

Here's a little PHP to print out a 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>

Upvotes: 0

Indranil
Indranil

Reputation: 2471

On a 2x2 grid, I'm pretty sure you won't be showing any data. Even if you are, I think it'll not be inside each grid box.

So, you should create a 2x2 (or 3x3 with 1 pixel border) image in your image program, and create a div that you want to "grid-ify" and give the 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 edit

Now, since you want to click and drag to select an area, what you can do is try this to create a div on top of the .gridify div, and give the new "clicked-and-dragged" div a background that is darker and transparent... That will give the illusion of the boxes being selected.

Upvotes: 1

Eugen Rieck
Eugen Rieck

Reputation: 65284

This works for me (grid.gif is 3x3 with border, see http://stuff.drnet.at/stackoverflow/grid/ for 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 with FF & Chrome (both on Ubuntu Lucid) only, but idea should work.

Upvotes: 1

Related Questions