Start a horizontal scroll in the middle of a table?

Question

Hello,
My demanding users are at it again. Although I am learning alot but lest I digress;-) Lets say I have a tableview with 72 columns that is one month for each year spanning over 6 years. No biggie but instead of the horizontal scroll starting at the left most point I would like start the scroll in the middle (say at column 36 or something) of the tableview. So if my tableview starts at 03/2002 in column 1 and goes to 03/2008 in column 72 I want the horizontal scroll to start at 03/2005(current month)in column 36 each time the table is rendered. I am using MVC and the tableview iterator(which I love).
I was hopeing that I could find something similar to a dropdown i.e. pre-populate a selected value and the dropdown starts at that selection not the top most one. Any one have any ideas where I could begin? I have searched this forum for 'horizontal' and 'scrolling' but no hits.
TIA,
Rich

Answer 1

Hello!
I gave the example from Thomas Ritter to the JS person here and he got it working. I can't take credit but I wanted to share it with the forum. Basically what happens is that the horizontal scroll will scroll to the right till the date column that is close to the current date. I say close to because some of the columns are in months so if the current date is 21-MAR-05 then the horizontal scroll will scroll right until MAR-05. Either way here is the code. As I said before I take no credit for it. I do have another question though. Anyone have any ideas how to change it so that I can pass it a date and have it scroll there instead of the current date?
<code>function lockCol(tblID) {
     var table = document.getElementById(tblID);     
     var cTR = table.getElementsByTagName('tr');  //collection of rows
     var coords = { x: 0, y: 0 };
     var now = new Date();
     var strMonthArray = new Array(12);
     strMonthArray[0] = "Jan";
     strMonthArray[1] = "Feb";
     strMonthArray[2] = "Mar";
     strMonthArray[3] = "Apr";
     strMonthArray[4] = "May";
     strMonthArray[5] = "Jun";
     strMonthArray[6] = "Jul";
     strMonthArray[7] = "Aug";
     strMonthArray[8] = "Sep";
     strMonthArray[9] = "Oct";
     strMonthArray[10] = "Nov";
     strMonthArray[11] = "Dec";
     strMonth = strMonthArray[now.getMonth()];
     year = new String(now.getYear());
     var today = now.getDate() + "-" + strMonth + "-" + year.substr(2,2);
     if (table.rows[0].cells[0].className == '') {
          for (i = 1; i < cTR.length; i++) {
               var tr = cTR.item(i);
               if(i == 1){
                    tr.cells[0].className = 'firstLocked';
                    innerloop:
                    for (j = 2; j < 100 ; j++) {
                         if(compareDate(today, tr.cells[j].innerText)) {                         
                              elt = tr.cells[j];
                              while (elt) {
                                   coords.x += elt.offsetLeft;
                                   elt = elt.offsetParent;
                         break innerloop;
               else{tr.cells[0].className = 'locked'}
     else {
          for (i = 1; i < cTR.length; i++){
          var tr = cTR.item(i);
          tr.cells[0].className = '';
     document.getElementById('tbl-container').scrollLeft = coords.x - 69;
function compareDate(date1, date2){
     a = date1.split("-");
     b = date2.split("-");
     day1 = parseInt(a[0]);
     month1 = a[1];
     year1 = a[2];
     day2 = parseInt(b[0]);
     month2 = b[1];
     year2 = b[2];
     if(year1 == year2) {
          if(month1 == month2) {
               if((day2 >= day1)) {return true;}
               else {return false;}
          else {return false;}     
     else {return false;}
}</code>
Cheers,
Rich