| home / programming / javascript / gr / column4 / 1 |    [previous][next] |
|
|
|
The scroll indicator is displayed using a table with three rows, for above, visible and below. The cell heights are used here to give the impression of a scroll bar. Note that it is not valid to specify a cell height of zero, so instead we use a value of one.
// add the vertical
scroll bar
if ( i == 0 )
{
aStr.push('<td
rowspan=' + data.nRow + ' valign=top>');
aStr.push('<div
style="position:relative;height:' +
nHeight +
'px;width:20px;">');
// add the scroll
indicator
var nHeight =
data.nRow * data.nCellHeight + (data.nRow-1) * 2;
var nStartHeight = 1;
var nBarHeight =
Math.floor(nHeight * data.nRow / data.rowHeaders.length);
var nEndHeight =
nHeight - nStartHeight - nBarHeight;
aStr.push('<div
style="position:absolute;height=120px;">');
aStr.push('<table
width=20 height=' + nHeight +
' border=0
cellpadding=0 cellspacing=0>');
aStr.push('<tr><td
height=1><div></div></td></tr>');
aStr.push('<tr><td
height=' + nBarHeight +
'
bgcolor="#33cc33"
height=20><div></div></td></tr>');
aStr.push('<tr><td
height=' + nEndHeight + '><div></div></td></tr>');
aStr.push('</table>');
aStr.push('</div>');
// add the scroll
“buttons”
aStr.push('<div
style="position:absolute;height=' +
nHeight +
'px;width=20px;">');
aStr.push('<table
width=20 height=' + nHeight +
' border=0
cellpadding=0 cellspacing=0>');
aStr.push('<tr><td
width=' + nHeight/2 + ' valign=top align=center>' +
'<div
style="cursor:' + cursor + ';" ' +
'onclick="window.'
+ name + '.scroll(0,-1);">^</div></td></tr>');
aStr.push('<tr><td
width=' + nHeight/2 + ' valign=bottom align=center>' +
'<div
style="cursor:' + cursor + ';" ' +
'onclick="window.'
+ name + '.scroll(0,1);">v</div></td></tr>');
aStr.push('</table>');
aStr.push('</div>');
aStr.push('</div>');
aStr.push('</td>');
}
At the end of each row, we close with a </tr>.
strHTML.push('</tr>');
}
The horizontal scrollbar is added in much the same way as the vertical one:
// add the horizontal scroll bar
// the
scroll indicator part
var
nWidth = this.data.nCol * this.data.nCellWidth + (this.data.nCol-1) * 2;
var
nStartWidth = 1;
var
nBarWidth = Math.floor(nWidth * this.data.nCol /
this.data.colHeaders.length);
var
nEndWidth = nWidth - nStartWidth - nBarWidth;
aStr.push('<div
style="position:absolute;width=' +
nWidth
+ 'px;left:0px;top:0px">');
aStr.push('<table
width=' + nWidth + ' border=0 cellpadding=0 cellspacing=0>');
aStr.push('<tr>');
aStr.push('<td
width=1><div></div></td>');
aStr.push('<td
width=' + nBarWidth + ' bgcolor="#33cc33" ' +
'height=20><div></div></td>');
aStr.push('<td
width=' + nEndWidth + '><div></div></td>');
aStr.push('</tr>');
aStr.push('</table>');
aStr.push('</div>');
// the
scroll buttons
aStr.push('<div
style="position:absolute;width=' + nWidth + 'px;' +
'left:0px;top:0px">');
aStr.push('<table
width=' + nWidth + ' border=0 cellpadding=0 cellspacing=0>');
aStr.push('<tr>');
aStr.push('<td
width=' + nWidth/2 + ' align=left><div style="cursor:' + cursor +
';width:20px;"
onclick="window.' + this.name + '.scroll(-1,0);">' +
'<</div></td>');
aStr.push('<td
width=' + nWidth/2 + ' align=right><div style="cursor:' + cursor +
';width:20px;"
onclick="window.' + this.name + '.scroll(1,0);">' +
'></div></td>');
aStr.push('</tr>');
aStr.push('</table>');
aStr.push('</div>');
aStr.push(' ');
aStr.push('</div>');
aStr.push('</td>');
aStr.push('<td> </td>');
aStr.push('</tr>');
Finally the grid <table> is closed and the array is written to the document.
//
finally close off the table
aStr.push('</table>');
With the constructor call complete, the Grid should now be drawn on the browser page and look something like Fig 2 shown above. All that is left now is to handle the scroll button clicks.
If you look at how the scroll buttons were defined above, you’ll notice that they each contained an onclick handler something like the following:
“window.theGrid.scroll(1,0);”
‘theGrid’ is the name of the Grid object passed into the constructor.
This code retrieves the Grid object from the window object and calls a ‘scroll’ method passing in a couple of values that specify how much to scroll either horizontally or vertically. After the x and y offsets have been adjusted appropriately, the scroll method calls a ‘fill’ method to update the Grid.
Grid.prototype.scroll = function(x,y)
{
this.xOffset
+= x;
if (
this.xOffset < 0 )
this.xOffset
= 0;
if (
this.xOffset > this.data.colHeaders.length - this.data.nCol )
this.xOffset
= this.data.colHeaders.length - this.data.nCol;
this.yOffset
+= y;
if (
this.yOffset < 0 )
this.yOffset
= 0;
if (
this.yOffset > this.data.rowHeaders.length - this.data.nRow )
this.yOffset
= this.data.rowHeaders.length - this.data.nRow;
this.fill();
}
The fill method loops through the row and column header arrays and the two-dimensional value array, setting the values appropriately. The sizes of the vertical and horizontal scroll indicator sections are calculated and adjusted as well.
Grid.prototype.fill = function()
{
this.init();
// row
headers
for (
var i = 0; i < this.data.nRow; i++ )
this.aRowSpan[i].innerHTML
= this.data.rowHeaders[i + this.yOffset];
//
column headers
for (
var j = 0; j < this.data.nCol; j++ )
this.aColSpan[j].innerHTML
= this.data.colHeaders[j + this.xOffset];
//
values
for ( i
= 0; i < this.data.nRow; i++ )
for (
j = 0; j < this.data.nCol; j++ )
this.aCellSpan[i][j].innerHTML
=
this.data.values[i
+ this.yOffset][j + this.xOffset];
//
vertical scrollbar
var
nHeight = this.data.nRow * this.data.nCellHeight + (this.data.nRow-1) * 2;
var
nStartHeight =
Math.floor(nHeight
* this.yOffset / this.data.rowHeaders.length);
if (
nStartHeight == 0 ) nStartHeight++;
var
nBarHeight =
Math.floor(nHeight
* this.data.nRow / this.data.rowHeaders.length);
var
nEndHeight = nHeight - nStartHeight - nBarHeight;
if (
nEndHeight == 0 ) nStartHeight--, nEndHeight++;
this.aVerticalTD[0].height
= nStartHeight;
this.aVerticalTD[1].height
= nBarHeight;
this.aVerticalTD[2].height
= nEndHeight;
//
horizontal scrollbar
var
nWidth = this.data.nCol * this.data.nCellWidth + (this.data.nCol-1) * 2;
var
nStartWidth =
Math.floor(nWidth
* this.xOffset / this.data.colHeaders.length);
if (
nStartWidth == 0 ) nStartWidth++;
var
nBarWidth =
Math.floor(nWidth
* this.data.nCol / this.data.colHeaders.length);
var
nEndWidth = nWidth - nStartWidth - nBarWidth;
if (
nEndWidth == 0 ) nEndWidth++, nStartWidth--;
this.aHorizontalTD[0].width
= nStartWidth;
this.aHorizontalTD[1].width
= nBarWidth;
this.aHorizontalTD[2].width
= nEndWidth;
}
| home / programming / javascript / gr / column4 / 1 | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: March 17, 2004
URL: URL: http://webreference.com/programming/javascript/gr/column4/1
