How to display a row

bench · Jul 31, 2001

Ok, this is what I want to accomplish. I am creating a popup window that will display thumbnail of pictures. I am dynamically displaying these pictures from an array. Now, I want to be able to display for example if have 26pictures and want to display 4pictures in each rows in a table and then be able to detect that I will have 6 rows with two pictures remaining. I then want to center these last pictures. How do I achieve this? I know I will have to use modular algorithm. for example:

Code:

 var remainVal=NumOfPic.length%4.

to get the remaining pictures.
I also want to use for loop. I starting something below but I don't know if I was on the right track. But I don't know how to complete this. Help, please help!!!!!!!!!!!!!!!!!

Example of what i'm trying to accomplish:

pic1 pic2 pic3 pic4
pic5 pic6 pic7 pic8
pic9 pic10 pic11 pic12
pic13 pic14 pic15 pic16
pic17 pic18 pic19 pic20
pic21 pic22 pic23 pic24
pic25 pic26

Code:

var max = 2;  var m = 0;	// local variables

for (j=0; j<1; j++) 		// number of rows
{                               //begin j loop
for (k=0; k< max; k++) 		// across row
  { 				//begin k loop across row
if (k== max)
{     

 }                                     // end for n loop
    }                                       // end if of k            

 m++;
  if (m % max == 0) {} // end of row
  } //end k loop  // across row
} //end j loop  // number of rows

Your prompt response will greatly be appreciated.

DigitalBoy · Jul 31, 2001

Bench,

I think that you're making this way too hard on yourself. Try creating a table dynamically and then pull all of the variables that you want from it via code.

- DB Web Developer
Digital Video Arts, LTD.

http://www.dval.com/

AIM: dgtlby
ICQ: 68300740

dianal · Aug 1, 2001

Hello,
See a sample code:

<BODY>
<script language="JavaScript">
numPics = 26;
numPicsInARow = 4;
picArray = new Array(numPics);
picArray[0] = "image0.gif";
picArray[1] = "image1.gif";
picArray[2] = "image2.gif";
picArray[3] = "image3.gif";
// etc.
numRows = parseInt(numPics / numPicsInARow); // parseInt is in order to get integer
remaining = numPics % numPicsInARow; // % returns only integer
fromleft = parseInt((numPicsInARow - remaining)/2);
fromright = numPicsInARow - fromleft -remaining;
//alert(numRows);
//alert(remaining);
//alert("fromleft"+fromleft);
//alert(fromright);
str = "";
str += "<table border='1'>";
for (row=0; row<=numRows; row++) {
str += "<tr>";
begin = row * numPicsInARow // it comes from arithmetic progression
end = begin + numPicsInARow
if (end > numPics) end = numPics; // you don't need more pics
if (row == numRows) { //last row
for (i=0; i<fromleft; i++) { // empty cells from left
str += "<td> </td>";
}
for (pic=begin; pic<end; pic++) {
str += "<td>";
str += "<img src='" + picArray[pic] + "' alt='"+pic+"'>";
str += "</td>";
}
for (i=0; i<fromright; i++) { // empty cells from right
str += "<td> </td>";
}
}
else { // other, normal rows
for (pic=begin; pic<end; pic++) {
str += "<td>";
str += "<img src='" + picArray[pic] + "' alt='"+pic+"'>";
str += "</td>";
}
}
str += "</tr>";
}
str += "</table>";
document.write(str);
</script>
</BODY>

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!

How to display a row

bench

Technical User

DigitalBoy

Programmer

dianal

Instructor

Similar threads

Part and Inventory Search

Sponsor