I am trying to make a grid that takes up 100% of the width of the browser window, firstly i am not sure on how to go about this grid and secondly I am wanting a div to have a random position within that grid, but will only fill the position if it is not occupied already.
I guess my question is, how would I go about it and if its even possible.
I'm guessing I would need a db to log all positions?
ps: When I say grid I don't mean 960 grid or any of them framework grids i'm just wanting a simple square grid
although i'm looking for each square to be 15px by 15px and the 'border' to be only 1px
Thanks for your help.
EDIT: All answers were great and all were acceptable I have chosen the one I have because it is the one that works best for what I want to do and the one that I used, I'm not saying that the others didn't work because they worked just as well. My initial requirements were for a fluid grid but have since changed which has made the answer I picked to be easier to integrate within my project. Thank you everyone for your help!
I am trying to make a grid that takes up 100% of the width of the browser window, firstly i am not sure on how to go about this grid and secondly I am wanting a div to have a random position within that grid, but will only fill the position if it is not occupied already.
I guess my question is, how would I go about it and if its even possible.
I'm guessing I would need a db to log all positions?
ps: When I say grid I don't mean 960 grid or any of them framework grids i'm just wanting a simple square grid
although i'm looking for each square to be 15px by 15px and the 'border' to be only 1px
Thanks for your help.
EDIT: All answers were great and all were acceptable I have chosen the one I have because it is the one that works best for what I want to do and the one that I used, I'm not saying that the others didn't work because they worked just as well. My initial requirements were for a fluid grid but have since changed which has made the answer I picked to be easier to integrate within my project. Thank you everyone for your help!
Share Improve this question edited Apr 18, 2011 at 22:51 Elgoog asked Apr 16, 2011 at 22:49 ElgoogElgoog 2,2757 gold badges37 silver badges48 bronze badges 6- I was looking at the attached picture for a min and started to see circles. Was your question a prank?! – András Szepesházi Commented Apr 16, 2011 at 22:51
- 4 Anyone else seeing fake white dots? :P – Zirak Commented Apr 16, 2011 at 22:52
- lol yea I see them too, but no... not a prank just a simple optical illusion. The question is real. – Elgoog Commented Apr 16, 2011 at 22:53
- YEAAAAAAAAAAAAAARRRRRRRRGHHHHHHH!!!! – Blender Commented Apr 16, 2011 at 22:53
- Now seriously. Are you using a framework like jQuery or MooTools? I'm thinking of generating the divs dynamically, asking the server for images or whatever, and randomly assigning them to different grid positions. – Zirak Commented Apr 16, 2011 at 22:56
4 Answers
Reset to default 3You can set a <div>'s position with CSS:
#div1 {
position: absolute;
left: 100px;
top: 100px;
width: 15px;
height: 15px;
}
should work. Then, knowing each div's coordinates via their left/top (store those somewhere) as well as how big they are, you can check for "collisions" when placing a new one with some simple math.
For example, to check if a single div New collides with an Existing one you can check if any of New's corners is within the Existing's square, for example:
- if LeftNew >= LeftExisting AND LeftNew <= (LeftExisting + WidthExisting) then collides
- if TopNew >= TopExisting AND TopNew <= (TopExisting + HeightExisting) then collides
To get you 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"> </td>';
} else {
echo '<td> </td>';
}
}
echo '</tr>';
}
?>
</table>
</body>
</html>
Returns something like this:
You can use this JS to create the grid and ID 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 could make an AJAX call to a PHP script (passing the number of squares per row) which does the following:
- Fills in the occupied squares (if necessary)
- Generates a random grid location, checks to see if it is taken, and then displays it in the appropriate grid.
The problem here is that since you are dealing with a variety of browser widths, your 15px squares will result in different sized grids for different browsers, therefore you can't really log your positions to a database, since each grid size will result in different locations.
EDIT
Forgot to add
CSS:
.gridsquare {
height: 15px; width: 15px; float: left; border: 1px solid black;
}
JSFiddle:
http://jsfiddle/9KaKj/
Here's my overall idea (sorry, but too short on time to show you the whole thing):
- Make a container div with the desired height and width; from your explanation I figured 100% both, covering the whole screen.
- Prompt the server asking it for a list of stuff you want to show in your div in json format (use
json_encode()in your php.) - Get the area of your container div in pixels, dissect it into squares by simply dividing its length and height by the amount of items you want displayed AND don't forget to take into account the 1px border. That's the size of each of your smaller grids.
- In your JavaScript, make an array called grids. 0-pad it to the amount of grids necessary.
- Loop over the amount of items you want. Inside a do-while loop, mock up a random number, and check if such a grid member already exists. If not, get out of loop, and...
- Create a new div (with a class of say grid), make its contents a member of the previously fetched json object (since you'll get an array of items, the random number generation will make sure nothing gets fetched twice.) Append this div to the container div. The style is obvious, we covered it in the 3rd step.
That's it...not too plex, and without flashing white dots.
Edit: Couldn't help myself and made a short example in jsfiddle: http://jsfiddle/tgwnV/
Note that I didn't have time to make it a square-shape (or pretty for that matter), but hopefully you catch my drift.