spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / gr / column4 / 1 To page 1current pageTo page 3
[previous][next]

Senior Consultant/Information Security - permanent position (TX)
Next Step Systems
US-TX-Irving

Justtechjobs.com Post A Job | Post A Resume
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

Use JavaScript to Create a Scrolling Grid

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
   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 the grid <table> is closed and the array is written to the document.

   // finally close off the table
   aStr.push('</table>');

   // write HTML to document.
   document.write(aStr.join(''));
}

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 To page 1current pageTo page 3
[previous][next]

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V
Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware
Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
  PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle

Created: March 27, 2003
Revised: March 17, 2004

URL: URL: http://webreference.com/programming/javascript/gr/column4/1