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!
You 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.net/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 complex, and without flashing white dots.
Edit: Couldn't help myself and made a short example in jsfiddle: http://jsfiddle.net/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.
Related
I have been able to use the documentation here to set the border thickness of each cell of the table using 'tableCell' with CSS (via "cssClassNames"). However I cannot figure out how to make a border around the entire table without effecting the individual cells.
I am not sure if this supported, if someone knows how to do this please let me know.
I am using JSON with PHP to generate my data in case that is relevant.
Set a border on the table's container div in CSS:
#myTableDiv {
border: 2px solid #8367d9;
}
[edit]
If you set the dimensions of the Table in the Visualization's options, you either need to use a more specific selector in the css:
#myTableDiv > div > div {
border: 2px solid #8367d9;
}
or you need to set the container div to display as an inline-block:
#myTableDiv {
border: 2px solid #8367d9;
display: inline-block;
}
I would recommend going with the second approach if it is viable in your case, as the first needs refining to make it work when you have a scrollable table.
I can't find the answer to this question but it must have been done before.
I have four lines of small images forming "keys" in a sort of kyboard layout (see link):
http://bestmarketingnames.com/Tbanneredit_v53.php
In order to improve SEO the client would like me to use css to create buttons rather than the images that are being used presently.
The client likes the fact that the buttons (or keys) line up perfectly with the vertical margin on the left side and right side of the container. For this reason I assume the css/php/mysql must either store width information for the keys or an appropriate percentage must be used that will cause the buttons resize approriately to fill cause the images to exactly fill the container div. Also, if possible, the client would prefer that the keys somewhat match the total width of the words in them.
I am generating the dynamic parts of the page with php/mysql, and am using a single mysql table with 5 columns.
Is there an easy way to use css to create the buttons? I would prefer to not have to store the css button image widths in the database, but if I have to I can.
Thanks in advance
Tom
Check working DEMO http://jsfiddle.net/yeyene/UfVhD/3/
Calculation
button counts in each row = ( number of your buttons/4 )
then,
each button width = ( your content width/button counts in each row) - ( button counts in each row * left right margin 2px )
CSS
ul#myButtons {
background:#d6d6d6;
padding:5px;
float:left;
width:920px;}
ul#myButtons li {
list-style:none;
float:left;
width:100px;
margin:1px; /*Try deleting this float float:left; */
}
ul#myButtons li a {
display:block;
background:#aaa;
color:#444;
padding:2px 6px;
font:normal 12px Arial;
text-decoration:none;
text-align:center;
margin-bottom:1px;
}
ul#myButtons li a:hover {
background:#f0f0f0;
}
HTML
<ul id="myButtons">
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<!-- links go on -->
</ul>
I have designed an html iframe where I want to use the word-wrap property, i.e., it should break long words onto the next line. But what happens instead is that for long words, it adds a horizontal scroll-bar rather than breaking the word onto the next line.
I tried hiding the scroll bar by using "overflow:hidden" property , but nothing happens.
I could use some help here.
Here's the html code for iframe:
<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>
The CSS is:
div#main_frame
{
float: left;
margin-top:198px;
margin-left:5px;
float:left;
position:relative;
width:100%;
height:900px;
z-index: 0;
word-wrap:break-word;
}
iframe#main_frame
{
float:left;
margin-left: 30px;
margin-right: 300px;
float:left;
border:none;
word-wrap:break-word;
width: 78%;
height:70%;
z-index: 1;
}
Thanks for the reply #tyriar, I have set the word-wrap property to the original page now. Still nothing happens.
<div id="display_posts">
<?php //php echoes some text here ?>
</div>
The CSS code is:
#display_posts
{
word-wrap:break-word;
}
You defined same ID 2 times , but ID must be unique , you can not declare it twice.
So use class instead of using ID
Also iframe call other page and you defined word-wrap in original page so its not apply.
Try
word-break:break-word
or
word-break:break-all
And try using class instead of ID because ID should be unique.
You can't apply word-wrap to an iframe, it's a completely separate page and styles from your original page won't apply. You would need to change the styles on the page where the iframe points.
Also id attributes must be unique, you have set id="main_frame" on both an iframe and a div.
Update
If word-wrap:break-all is on the iframe then maybe the width of the page is introducing the scroll bar. Make sure that your elements scale down correctly with the page. If you load up the page in your iframe in your browser you should be able to reduce the window size without a horizontal scroll bar appearing. If one does then it's an issue with the minimum width of that page.
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
}
</style>
</head>
<body>
<div>The property allows to Create Chess Boxes.</div>
how to repeat the above div rounded boxes until reach max width specified or according to table width or resolution & go down to next line and until reach max-height of the screen or as specified (time-table time) so that there is no need to scroll both width wise & height wise ? help needed
You can't - PHP as a server side component has no notion of browser dimensions. You need to handle something like this client-side using JavaScript.
To get your boxes to fill the width of the browser, use float: left in your css. To dynamically add boxes until they fill the page, copy the div using element.cloneNode(true), and continue until the bottom point of the div is below the bottom point of the container.
For example, something like this: jsfiddle.net/rUUuW/1/
It's a little easier with jQuery: jsfiddle.net/rUUuW/2/
I am trying to think of the best way to make a really small thermometer image, that can be easily edited by typing in a number (dollar value) and having the image change based on the value.
The simplest way to achieve this is the best. It will be going online onto a site that is using a CMS called spip.
Does anything small like this exist? and if i have to create it myself what's the best way to go about it?
The basic concept here is very simple; check out this fiddle. It's a basic nested div:
<div id='thermometer'>
<div id='level'>
</div>
</div>
which takes input from some form element:
<input type='text' id='fill'>
and some simple styling:
#thermometer { height: 15px; width: 100px; margin:5px; padding:0; border: #cccccc solid 1px; }
#level { height: 15px; width: 40px; margin: 0; padding:0; border-right: 1px solid #666666; background: #ffcccc; }
and a tiny bit of javascript:
$('#fill').keyup(function() {
$('#level').css('width',this.value);
});
Granted, this has no error checking, and could use a lot more work to make it robust, but it does what you ask it to do.
Layer two divs, each having part of the thermometer image, and hide parts of the red indicator bit div.
html 5 canvas + jquery or, a vary simple method will be to use divs, one on top of the other to simulate the thermometer levels. and simply change the background to red when the value increase or decrease
Something like this should work:
<?php
$goal = 100; // need to raise $100
$done = 78; // got $78 so far, e.g. 78% done
$full_size = '200'; // 200px
?>
<style type="text/css">
#thermometer {
width: <?php echo floor($full_size * ($done / $goal)) ?>px;
height: 1em;
color: red;
}
</style>
<div id="thermometer"></div>
Create a small text input form element that the user can enter a dollar amount into. Use jQuery and hook that element's onblur event, and within that hook, redraw the image as you want, scaling and all.
Don't have an example, but some simple steps for a PHP + CSS solution.
Use PHP to calculate the percentage of your goal met.
Use this percentage to calculate a CSS background-position property to show more or less of the thermometer background image by setting the style attribute inline with PHP.
UPDATE
For everyone that is gawking at doing this with PHP - how do you think JavaScript is getting the value to begin with? If PHP generates the page output and calculates the value, having PHP output the style directly is perfectly acceptable and keeps this at the source.