Convert javascript to vb script?

Discussion in 'Javascript' started by D Newsham, Jul 21, 2004.

  1. D Newsham

    D Newsham Guest

    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>&nbsp;</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>&nbsp;</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 + '</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[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>&nbsp;</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);">&lt;</div></td>');
    aStr.push('<td width=' + nWidth/2 + ' align=right><div
    style="cursor:' + cursor + ';width:20px;" onclick="window.' +
    this.name + '.scroll(1,0);">&gt;</div></td>');
    aStr.push('</tr>');
    aStr.push('</table>');
    aStr.push('</div>');

    aStr.push('&nbsp;');

    aStr.push('</div>');
    aStr.push('</td>');
    aStr.push('<td>&nbsp;</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.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.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[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","BSD","CAD",
    "CHF","CLP","CNY","CYP","CZK","DEM","DKK","DZD","EGP","ESP",
    "EUR","FIM","FJD","FRF","GBP","GRD","HKD","HUF","IDR","IEP",
    "ILS","INR","ISK","ITL","JMD","JOD","JPY","KRW","LBP","LUF",
    "MXN","MYR","NLG","NOK","NZD","PHP","PKR","PLN","PTE","ROL",
    "RUR","SAR","SDD","SEK","SGD","SKK","THB","TRL","TTD","TWD",
    "USD","VEB","XAG","XAU","XCD","XDR","XPD","XPT","ZAR","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.push('-');
    else
    data.values.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>
    D Newsham, Jul 21, 2004
    #1
    1. Advertising

  2. D Newsham

    kaeli Guest

    In article <>,
    enlightened us with...
    > 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.


    Why? ASP can use javascript (JScript) if you wanted it to run on the
    server. However, a lot of the stuff here uses client-side only things,
    like the height of page elements, which will not be available on the
    server. So, you must want it for client-side use. Converting it to
    vbscript for client-side use will work only in IE.

    What are you really wanting to do? Create something on the server, or
    the client?

    ASP, which runs on the server, creates html pages on the fly. It knows
    nothing of the client (usually a browser). It simply sends a response to
    whatever user agent sent it a request.

    --
    --
    ~kaeli~
    If at first you don't succeed, skydiving is not for you.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
    kaeli, Jul 21, 2004
    #2
    1. Advertising

  3. D Newsham

    McKirahan Guest

    "D Newsham" <> wrote in message
    news:...
    > 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?


    [snip]

    You did a multipost (separate copies to separate NGs) instead of a crosspost
    (one copy to more than one NG).

    Please do not multipost!
    McKirahan, Jul 21, 2004
    #3
  4. D Newsham

    D Newsham Guest

    I apologize for the multipost. I got an error in Google the first
    time I posted this, which said it hadn't been posted. Since the posts
    don't come up for several hours, I did not realize it had already
    posted.
    D Newsham, Jul 22, 2004
    #4
  5. D Newsham

    McKirahan Guest

    "D Newsham" <> wrote in message
    news:...
    > I apologize for the multipost. I got an error in Google the first
    > time I posted this, which said it hadn't been posted. Since the posts
    > don't come up for several hours, I did not realize it had already
    > posted.


    Multi-post means you the same message in different newsgroups, not the same
    message in one newsgroup at different times.

    You posted this same message in the "microsoft.public.scripting.vbscript"
    newsgroup (where I offered a partial solution).
    McKirahan, Jul 22, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    2,606
    replicant
    Jul 2, 2006
  2. Edward
    Replies:
    1
    Views:
    5,792
    ge0rge
    Apr 3, 2006
  3. Rajat
    Replies:
    3
    Views:
    677
    Jorgen Grahn
    Jan 8, 2010
  4. VYAS ASHISH M-NTB837
    Replies:
    2
    Views:
    539
    Jan Kaliszewski
    Jan 7, 2010
  5. joe
    Replies:
    3
    Views:
    353
    Jeremy J Starcher
    Apr 15, 2008
Loading...

Share This Page