Hi,
This javascript creates a table that has a header and side column that
do not move while scrolling through the table. I need to convert this
to vb script. Can anybody help, or do you have code in vb (asp) that
would do the same thing?
<html>
<head>
<title>Scrolling Grid Demo</title>
<script type="text/javascript">
function Grid(name, data)
{
// store arguments
this.name = name;
this.data = data;
var cursor = document.all ? "hand" : "pointer";
// persist object for later use.
window[name] = this;
// initialize internal properties.
this.xOffset = 0;
this.yOffset = 0;
// render table
var aStr = new Array;
aStr.push('<table border=1 cellpadding=0 cellspacing=0 id="' +
this.name + '">');
// column header row
aStr.push('<tr>');
aStr.push('<td> </td>');
for ( var j = 0; j < this.data.nCol; j++ )
{
aStr.push('<th width=' + this.data.nCellWidth + '><span>' +
this.data.colHeaders[j] + '</span></th>');
}
aStr.push('<td width=20> </td>');
aStr.push('</tr>');
// data rows
for ( var i = 0; i < this.data.nRow; i++ )
{
aStr.push('<tr>');
aStr.push('<th valign=top width=' + this.data.nCellWidth + '><span>'
+ this.data.rowHeaders[i] + '</span></th>');
for ( j = 0; j < this.data.nCol; j++ )
aStr.push('<td><span style="overflow:hidden;width:' +
this.data.nCellWidth + 'px;height:' + this.data.nCellHeight + 'px;
text-align:center;">' + this.data.values[i][j] + '</span></td>');
// add the vertical scroll bar
if ( i == 0 )
{
aStr.push('<td rowspan=' + this.data.nRow + ' valign=top>');
aStr.push('<div style="position:relative;height:' + nHeight +
'px;width:20px;">');
// add the scroll indicator
var nHeight = this.data.nRow * this.data.nCellHeight +
(this.data.nRow-1) * 2;
var nStartHeight = 1;
var nBarHeight = Math.floor(nHeight * this.data.nRow /
this.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.' +
this.name + '.scroll(0,-1);">^</div></td></tr>');
aStr.push('<tr><td width=' + nHeight/2 + ' valign=bottom
align=center><div style="cursor:' + cursor + ';" onclick="window.' +
this.name + '.scroll(0,1);">v</div></td></tr>');
aStr.push('</table>');
aStr.push('</div>');
aStr.push('</div>');
aStr.push('</td>');
}
aStr.push('</tr>');
}
// add the horizontal scroll bar
aStr.push('<tr>');
aStr.push('<td> </td>');
aStr.push('<td colspan=' + this.data.nCol + '>');
aStr.push('<div style="position:relative;width=' + nWidth +
'px;height=20px;">');
// 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 close off the table
aStr.push('</table>');
// write HTML to document.
document.write(aStr.join(''));
}
// locate all spans and control points
Grid.prototype.init = function()
{
// if already initialized, return
if ( this.oTable ) return;
this.oTable = document.getElementById(this.name);
// get all <span> elements within the table
var aSpan = this.oTable.getElementsByTagName('span');
var n = 0;
// the first few are all column headers
this.aColSpan = new Array;
for ( var j = 0; j < this.data.nCol; j++ )
this.aColSpan.push(aSpan[n++]);
// the remainder are row headers and cells
this.aRowSpan = new Array;
this.aCellSpan = new Array;
for ( var i = 0; i < this.data.nRow; i++ )
{
this.aRowSpan.push(aSpan[n++]);
this.aCellSpan.push(new Array());
for ( j = 0; j < this.data.nCol; j++ )
this.aCellSpan[i].push(aSpan[n++]);
}
// get all the <div> elements
var aDiv = this.oTable.getElementsByTagName('div');
// the vertical scroll is in aDiv[2]
this.aVerticalTD = aDiv[1].getElementsByTagName('td');
// the horizontal scroll is in aDiv[10]
this.aHorizontalTD = aDiv[9].getElementsByTagName('td');
}
// fill all the column/row headers and cell values
// and adjust the scroll bars
Grid.prototype.fill = function()
{
this.init();
// headers
for ( var j = 0; j < this.data.nCol; j++ )
this.aColSpan[j].innerHTML = this.data.colHeaders[j + this.xOffset];
for ( var i = 0; i < this.data.nRow; i++ )
this.aRowSpan[i].innerHTML = this.data.rowHeaders[i + this.yOffset];
// 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];
// scroll bars
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;
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;
}
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();
}
</script>
</head>
<body>
ggg
<script>
var currencies = ["ARS","ATS","AUD","BBD","BEF","BGL","BMD","BRL","B SD","CAD",
"CHF","CLP","CNY","CYP","CZK","DEM","DKK","DZD","E GP","ESP",
"EUR","FIM","FJD","FRF","GBP","GRD","HKD","HUF","I DR","IEP",
"ILS","INR","ISK","ITL","JMD","JOD","JPY","KRW","L BP","LUF",
"MXN","MYR","NLG","NOK","NZD","PHP","PKR","PLN","P TE","ROL",
"RUR","SAR","SDD","SEK","SGD","SKK","THB","TRL","T TD","TWD",
"USD","VEB","XAG","XAU","XCD","XDR","XPD","XPT","Z AR","ZMK"];
var data =
{
nCol:6,
nRow:10,
nCellWidth:70,
nCellHeight:20
};
data.colHeaders = currencies;
data.rowHeaders = currencies;
data.values = new Array();
for ( var i = 0; i < currencies.length; i++ )
{
data.values.push(new Array());
for ( var j = 0; j < currencies.length; j++ )
{
if ( i == j )
data.values[i].push('-');
else
data.values[i].push(Math.round(10000*Math.random() /
Math.random())/10000);
}
}
new Grid('theGrid', data);
</script>
Full scrolling grid example.
NB: The values in this table bear no relation to any currency, real
or imaginary.
</body>
</html>
