Geek Answers Handbook

Set div to random position on grid

I'm trying to make a grid that occupies 100% of the width of the browser window, firstly, I'm not sure how to do this, and secondly, I want the div to have a random position in this grid, but only fill the position if it already not busy.

I think my question is how I would do it and if it were possible.

I guess I need db to register all positions?

ps: When I say “grid”, I don't mean 960 grid or any of them with grid grid, I just want a simple square grid Like this

although I'm looking for each square to be 15px by 15px and the "border" to be only 1px

Thank you for your help.

EDIT: All the answers were great and everyone was acceptable. I chose the one that I have, because it is best suited for what I want to do, and what I used, I do not say that others did not work, because they worked just as well. My initial requirements were for fluid mesh, but have since changed, making the answer I chose to integrate more easily into my project. Thank you all for your help!

+4
source share
4 answers

You can set the <div> position using CSS:

 #div1 { position: absolute; left: 100px; top: 100px; width: 15px; height: 15px; }

must work. Then, knowing each div coordinate through their left / top (keep them somewhere), and how large they are, you can check for “collisions” when placing a new one with some simple math.

For example, to check if one New div is facing Existing , you can check if any of the New corners are in the Existing square, for example:

  • if LeftNew> = LeftExisting AND LeftNew <= (LeftExisting + WidthExisting), then collides
  • if TopNew> = TopExisting AND TopNew <= (TopExisting + HeightExisting), then collides
+3
source

To get started:

 <html> <head> <title>Grid</title> <style> TABLE { border-collapse : collapse; border : 5px solid black; background-color : #ffff99; } TD { border : 5px solid black; width : 30px; height : 30px; background-color :white; } TD.selected { background-color : gray; } </style> </head> <body> <table class="alerts"> <? $columns = 6; $column = rand(0,$columns-1); $rows = 10; $row = rand(0,$rows-1); for($y=0;$y<$rows;$y++) { echo '<tr>'; for($x=0;$x<$columns;$x++) { if($x == $column && $y == $row) { echo '<td class="selected">&nbsp;</td>'; } else { echo '<td>&nbsp;</td>'; } } echo '</tr>'; } ?> </table> </body> </html>

Returns something like this:

Grid

+1
source

You can use this JS to create a grid and an identifier for each square.

 w = $(document).width(); t = w/15; for(j=0;j<t;j++){ for(i=0;i<t;i++){ $('body').append("<div id='grid_"+j+"x"+ i+"'class='gridsquare'></div"); } }

After that, you can make an AJAX call to the PHP script (passing the number of squares per line), which does the following:

  • Fills in the occupied squares (if necessary)
  • Generates a random grid location, checks to see if it has been received, and then displays it in the appropriate grid.

The problem is that since you are dealing with different browser widths, your 15px squares will lead to networks of different sizes for different browsers, so you cannot really write your positions to the database, since each grid size will be in different places .

EDIT

Forgot to add

CSS

 .gridsquare { height: 15px; width: 15px; float: left; border: 1px solid black; }

JSFiddle:

http://jsfiddle.net/9KaKj/

0
source

Here is my general idea (sorry, but too short in time to show you all this):

  • Make a container div with the desired height and width; from your explanation, I understood 100% of both, covering the entire screen.
  • Ask the server to request a list of things you want to show in your json div (use json_encode() in your php.)
  • Get the area of ​​your container div in pixels, divide it into squares by simply dividing its length and height by the number of elements you want to display, and don't forget to take into account the 1px border. This is the size of each of your small grids.
  • In your JavaScript, create an array called grids. 0-pad is the required number of grids.
  • Type in the number of items you want. Inside the do-while loop, create a random number and check if such a grid element exists. If not, exit the loop and ...
    • Create a new div (with a grid class), make its contents a member of the previously selected json object (since you will get an array of elements, generating random numbers will ensure that nothing is extracted twice.) Add this div to the div container. The style is obvious, we examined it in the third stage.

That he ... is not too complicated and does not blink white dots.

Edit: failed to help myself and made a short example in jsfiddle: http://jsfiddle.net/tgwnV/

Please note that I did not have time to make a square shape (or, rather, for that matter), but I hope you catch my drift.

0
source

More articles:


All Articles