Anchor Cycler / Dropdown to import school class data periodically

Question

SO,

I\'ve been working on some html/javascript/css recently to create an online table for my students to view details, scores and various bits of information but I\'ve

Answer 1

Lets see (scroll down for update)

(demo at http://jsfiddle.net/u7UkS/2/)

1. Left & Right Table Scrollers (Fixing the overscroll?)
   You need to animate the scrollLeft instead of the margin. It will automatically take care of excess values, as it cannot scroll more than allowed..

   $("a.abc").click(function () {
       $('#container').animate({
           "scrollLeft": "-=204"
       }, 200);
   });
   
   $("a.def").click(function () {
       $("#container").animate({
           "scrollLeft": "+=204"
       }, 200);
   });
   

2. Anchor Cycler / Dropdown List to jump to each class?
   You can loop over the a elements, get their id and popuplate a select element. Then handle the change event and animate to the selected position with your scrollToAnchor class

   
       -select class-
   
   

   and

   // gather CLASS info
   var selector = $('.class-selector').on('change', function(){
       var id = this.value;
       if (id!==''){
           scrollToAnchor(id);
       }
   });
   $('a[id^="CLASS"]').each(function(){
       var id = this.id,
           option = $('',{
               value: this.id,
               text:this.id
           });
       selector.append(option);
   });
   

3. Column autosizing?
   Just set white-space:nowrap to the th/td elements

   td, th {
       white-space:nowrap;
   }
   

4. Loading/Updating class sections from JSON.
   You have not provided any code for this. So i will just describe how to do it..
   For the repeating AJAX request use a timeout and once you handle its result fire a new one

   function handleData(data){
      //loop over data and edit the DOM
      $.each(data, function(index, item){
        // variable item refers to the current CLASS of the iteration
        // assuming that the JSON is an array of CLASS groups describing the rows..
   
        //find the DOM section with the current class info and update data..
      });
      setTimeout(checkData, 30000);
   }
   function checkData(){
       $.getJSON('the-url-to-your-json', handleData);
   }
   // initiate the first timeout
   setTimout(checkData, 30000); // 30000 ms is 30sec.
   

5. Cookies? to remember and restore selected rows
   No need to use cookies, just in step #4 do not remove the whole row and reinsert, but instead edit the contents of the td elements. This way the tr will maintain its class and the styling will persist. Alternatively, before overwriting the row chack if it has the selected class, and if so add it to the row you are about to insert..

Demo at http://jsfiddle.net/u7UkS/2/

---

I have also edited your scrollToAnchor and removed 80 from the scrollTop to account for the heading

function scrollToAnchor(aid) {
    var aTag = $("a[id='" + aid + "']");
    $('html,body').animate({
        scrollTop: aTag.offset().top - 80
    }, 1);
}

---

---

Update

Assuming from your update to the question, that you do not need to show all classes all the time nor update all of them

you could show/hide the CLASSes depending on the selection to the dropdown with this css and code

#container tbody, #container thead {
    display:none;
}
#container tbody.current {
    display:table-row-group;
}
#container thead.current {
    display:table-header-group;
}

and

    var classSelector = $('.class-selector');

    // gather CLASS info
    classSelector.on('change', function () {

        var id = this.value;
        $('#container').find('thead, tbody').removeClass('current');
        if (id !== '') {
            //scrollToAnchor(id);
            var group = $('#' + id).closest('thead');
            group.add(group.next('tbody'))
                .addClass('current');
        }

        // since we changed the current CLASS, initiate a checkdata() so that we can update as soon as possible.. 
        checkData();
    }).trigger('change');

Now when we do an AJAX request we can send with it some data to the server to limit the returned info. So in the checkData we do

function checkData() {
        var currentId = classSelector.val();

        if (currentId !== ''){
            // Start AJAX request
            alert('starting ajax request for ' + currentId);
            // change /echo/json/ with the url to your json
            // delay should be removed, it just for jsfiddle..
            jsonRequest = $.getJSON('/echo/json/', {'delay':2,'class' : currentId}, handleData);        
        }
    }

and handleData

function handleData(data) {
    alert('handling data');
    //loop over data and edit the DOM        
    var classBody = $('#container').find('tbody.current');
    $.each(data, function (index, item) {
        // variable item refers to the current CLASS of the iteration
        // assuming that the JSON is an array of CLASS groups describing the rows..

        // populate classBody with the JSON data

    });
    jsonTimeout = setTimeout(checkData, 10000); // change the 10000 to whatever you want.. i set it to 10 seconds to see the repeating..
}

You will notice the jsonTimeout = setTimeout(..) and jsonRequest = $.getJSON(..). We store those in variable so we can abort them when we change the current CLASS to avoid excess processing

This is done by adding

    if (jsonTimeout) clearTimeout(jsonTimeout);
    if (jsonRequest) jsonRequest.abort();

to the change handler of the dropdown.

Updated Demo at http://jsfiddle.net/u7UkS/4/