interrupt a loop at each 16 repetitions... [Archive]

View Full Version : interrupt a loop at each 16 repetitions...

shlagish

05-06-2003, 02:06 AM

Here is the code I made:

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>

<table style="border-color: black;" align="center" width="" border="1" cellpading="0" cellspacing="0">
<tr>

<script type="text/javascript">

</script>

</tr>
</table>

</body>
</html>

There are two problems that I see:
1)
<td width="8px"....
The table data's are NOT 10px wide, why?

2)
What is displayed with this code is every shade of grey that has a hex value from #000000 to #FFFFFF.
But it displayes this in a straight line...
What I want is that there be a new table row created after 16 repetitions of the script. After 16 others also, do you see what I mean?

What I'm trying to get at is to create a box of 16 by 16 squares.
In each square, the shade gets lighter (going from top left to bottom right)

BrainJar

05-06-2003, 05:23 AM

1. Try
<td style="width:8px;height:10px;">
instead.

2. You can use the modulo operator which gives the remainder after division: x % 16 gives a number between 0 and 15. For example:

// start the first row.
document.writeln("<tr>");

for (i = 0; i < 255; i++)
{
if (i %16 == 0)
// i is a multiple of 16, so end the current row and start a new one.
document.writeln("</tr><tr>");
// ... do the cell ...
}

// end the last row.
document.writeln("</tr>");

shlagish

05-07-2003, 01:05 AM

<td style="width.... etc...
didn't change anything, but it's ok now. It didn't adjust because there wasn't the change of line and the total line it formed was going to far to the right. It leaved the screen so it coulnd't adjust the width... lol, I know I'm not clear here, oh well
But you were right for the other thing, thanks :)

Here is the complete script now that it's done

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>

<table align="center" border="0" cellpading="0" cellspacing="1">
<tr>

<script type="text/javascript">

</script>

</tr>
</table>

</body>
</html>

shlagish

05-07-2003, 01:24 AM

Now that I think about it, I would like to make a boxy thing like the one above, but with colors, all of them... Do you know how I would go to do this?
Thanks

eggman

05-09-2003, 05:20 PM

shlagish

05-09-2003, 11:36 PM

lol, I can't even make your code work... I don't understand how and when and where to call wich function with wich attributes (arguments, whatever)

eggman

05-10-2003, 03:10 PM

Cut and paste the following into a new document. Most newer browsers should have no problem with it.

<html>
<head>
<style type=text/css>
TD
{
width:50px;
height:50px;
}
</style>
</head>
<body onload="test()">
<table id=myTable align=center border=0 cellpadding=0 cellspacing=0>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
</td>
<script language=Javascript>
function gradientArray(sColor,eColor,steps)
{
function getColorValue(colorValue,index)
{
return hex.indexOf(colorValue.charAt(index))*16+hex.indexOf(colorValue.charAt(index+1))
}
var hex="0123456789abcdef"
var colorArray=[]
var colorValue=[]
var colorChange=[]
for(var i=j=0;i<3;i++)
{
j=i*2+1
colorValue[i]=getColorValue(sColor,j)
colorChange[i]=(getColorValue(eColor,j)-colorValue[i])/(steps-1)
}
for(var i=0;i<steps-1;i++)
{
colorArray[i]="#"
for(var j=0;j<3;j++)
{
colorArray[i]+=hex.charAt(colorValue[j]/16)+hex.charAt(colorValue[j]%16)
colorValue[j]+=colorChange[j]
}
}
colorArray[steps-1]=eColor
return colorArray
}
function gradient(table,sColor,eColor,direction)
{
var mostColumns=0
with (table)
{
for(var i=0;i<rows.length;i++)
if(rows[i].cells.length>mostColumns)
mostColumns=rows[i].cells.length
switch(direction)
{
case 0:
colors=sColor
for(var r=0;r<rows.length;r++)
{
if(r)
if(sColor==rows[r-1].cells[0].bgColor)
colors=eColor
else
colors=sColor
for(var c=0;c<rows[r].cells.length;c++)
{
rows[r].cells[c].bgColor=colors
if(colors==sColor)
colors=eColor
else
colors=sColor
}
}
break
case 1:
var colors=gradientArray(sColor,eColor,rows.length+mostColumns-1)
for(var j=0,r=rows.length-1;r>=0;r--,j++)
for(var i=j,c=0;c<rows[r].cells.length;c++,i++)
rows[r].cells[c].bgColor=colors[i]
break
case 2:
var colors=gradientArray(sColor,eColor,rows.length)
for(var i=0,r=rows.length-1;r>=0;r--,i++)
for(var c=0;c<rows[r].cells.length;c++)
rows[r].cells[c].bgColor=colors[i]
break
case 3:
var colors=gradientArray(sColor,eColor,rows.length+mostColumns-1)
for(var j=0,r=rows.length-1;r>=0;r--,j++)
for(var i=j,c=rows[r].cells.length-1;c>=0;c--,i++)
rows[r].cells[c].bgColor=colors[i]
break
case 4:
var colors=gradientArray(sColor,eColor,mostColumns)
for(var r=0;r<rows.length;r++)
for(var i=c=0;c<rows[r].cells.length;c++,i++)
rows[r].cells[c].bgColor=colors[i]
break
case 5:
if (rows.length>mostColumns )
var colors=gradientArray(sColor,eColor,Math.round(rows.length/2+.4))
else
var colors=gradientArray(sColor,eColor,Math.round(mostColumns/2+.4))
for(var r1=0,r2=rows.length-1;r1<=r2;r1++,r2--)
for(var i=c1=0,c2=rows[r1].cells.length-1;c1<=c2; c1++,c2--)
{
rows[r1].cells[c1].bgColor=colors[i]
rows[r1].cells[c2].bgColor=colors[i]
rows[r2].cells[c1].bgColor=colors[i]
rows[r2].cells[c2].bgColor=colors[i]
if ( i<r1) i++
}
break
case 6:
gradient(table,eColor,sColor,4)
break
case 7:
gradient(table,eColor,sColor,3)
break
case 8:
gradient(table,eColor,sColor,2)
break
case 9:
gradient(table,eColor,sColor,1)
break
}
}
}
function test()
{

var table=document.getElementById("myTable")
var red="#ff0000"
var blue="#0000ff"
var direction=3
gradient(table,red,blue,direction)
}
</script>
</body>
</html>

shlagish

05-10-2003, 07:04 PM

That's not all the colors, and it's even longer than writting it out:
<td bgcolor="#FF0000">test</td>
<td bgcolor="#FE0000">test</td>
etc...