Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Boxes
- Thread starter Montroze
- Start date
I'm at the internet cafe so there is no way for me to test this but let me give it a shot (I will take a look at it tomorow monday morning). People on this forum can correct my mistakes if they see this before I can test it.
var bgcolor = 'Teal'; // could be any color in RGB
var rows = 5;
var cols = 5;
var height = 10;
var width = 10;
var spacer = 2;
var html = "";
for (var i = 0; i < cols; i++)
{
for(var j = 0; j < rows; j++)
{
html += "<div style='position:absolute;"
+ "left:" + (j*width+spacer) + ";"
+ "top:" + (i*height+spacer) + ";"
+ "height:" + height + ";"
+ "width:" + width + ";"
+ "background-color:" + bgcolor + ";'>"
+ " "
+ "</div>";
}
}
document.write(html)
There we go. I believe that does the trick. Don't try it in NS4 but in another more recent browser. I'll correct it tomorow if there are any mistakes.
Hope this helps. Gary Haran
var bgcolor = 'Teal'; // could be any color in RGB
var rows = 5;
var cols = 5;
var height = 10;
var width = 10;
var spacer = 2;
var html = "";
for (var i = 0; i < cols; i++)
{
for(var j = 0; j < rows; j++)
{
html += "<div style='position:absolute;"
+ "left:" + (j*width+spacer) + ";"
+ "top:" + (i*height+spacer) + ";"
+ "height:" + height + ";"
+ "width:" + width + ";"
+ "background-color:" + bgcolor + ";'>"
+ " "
+ "</div>";
}
}
document.write(html)
There we go. I believe that does the trick. Don't try it in NS4 but in another more recent browser. I'll correct it tomorow if there are any mistakes.
Hope this helps. Gary Haran
It doesn't work with too small values for the width and height because of font problems. However with these numbers it should work.
<script>
var bgcolor = 'Teal'; // could be any color in RGB
var rows = 5;
var cols = 5;
var height = 50;
var width = 50;
var spacer = 10;
var html = "";
for (var i = 0; i < cols; i++)
{
for(var j = 0; j < rows; j++)
{
html += "<div style='position:absolute;"
+ "left:" + (j*(width+spacer)) + ";"
+ "top:" + (i*(height+spacer)) + ";"
+ "height:" + height + ";"
+ "width:" + width + ";"
+ "background-color:" + bgcolor + ";"
+ "border: 1px solid black ;'>"
+ " "
+ "</div>";
}
}
document.write(html)
</script>
Hope this helps. Gary Haran
<script>
var bgcolor = 'Teal'; // could be any color in RGB
var rows = 5;
var cols = 5;
var height = 50;
var width = 50;
var spacer = 10;
var html = "";
for (var i = 0; i < cols; i++)
{
for(var j = 0; j < rows; j++)
{
html += "<div style='position:absolute;"
+ "left:" + (j*(width+spacer)) + ";"
+ "top:" + (i*(height+spacer)) + ";"
+ "height:" + height + ";"
+ "width:" + width + ";"
+ "background-color:" + bgcolor + ";"
+ "border: 1px solid black ;'>"
+ " "
+ "</div>";
}
}
document.write(html)
</script>
Hope this helps. Gary Haran
If your application is Bingo-like you might want to use a table of tables. The master table is the card, each column (B,I,N,G,O) a separate table housed in a TD of the master table. The advantage is the HTML structure looks like the application which is a huge aid in debugging.
You can use CSS to assign width, height, (type face, color, ...) to the Column Headings (
), Column Contents (
).
Kinda hurried through this but hope it was helpful.
Code:
<table border="1" cellpadding="0" cellspacing="0" class="bCard">
<thead>
<tr>
<th class="bCol">B</th>
<th class="bCol">I</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="0" class="bCol">
<tbody>
<tr><td class="bCol">B1</td>
<tr><td class="bCol">B2</td>
...
</tbody>
</table>
</td>
...
</tr>
</tbody>
</table>You can use CSS to assign width, height, (type face, color, ...) to the Column Headings (
Code:
th.bCol {width: 30px; height: 50px; ...}
Code:
td.bCol {...}Kinda hurried through this but hope it was helpful.
- Status
Similar threads
