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

Preface

In an attempt to cover all of your questions I've tried to include demos in all the answers. Unfortunately I'm only one man and I could not create demos for all the answers. If anyone feels that hes has something to contribute please feel free to comment or edit this.

Updates

In response to @DennisSylvian's updated question here are my updates.

Answers

1. 1. To scroll the overflow you would be better off using:

      $('.table-wrapper')[0].scrollLeft += 50;
      

      DEMO here

   2. If you want to position elements in simple manner using css you can define the parent as position: relative; and then give each element a position: absolute; to "throw" them out into each corner:

      .controller-wrapper { position: relative; } .top-left, .top-right, .bottom-left, .bottom-right { position: absolute; } .top-left { top: 0; left: 0; } .top-right { top: 0; right: 0; } // ...

   Update: DEMO here

2. 1. You can add any offset you have to the scrolling function:

      var offset = 80; // Or any other calculation
      $('html,body').animate({
          scrollTop: aTag.offset().top + offset
      }, 1);
      

   2. I'm not entirely sure you mean class as in css .class or class as in school class but if it's the latter then you can place an id on each td you would like to scroll to:

      Title
      
      Title
      

      You can then build your list out of these id's using:

      var anchorList = [];
      
      $('.scrollto').each(function(){
      
        anchorList.push( ''+ this.id +'' );
      
      });
      
      // This is an empty select menu
      $('#anchor-list')
        .append( anchorList.join('') )
        .change(function(){
      
          scrollToAnchor( $(this).val() );
      
        });
      

      This would require a slight change to your scrollToAnchor function:

      // Put this line
      var aTag = $('#' + aid);
      
      // Instead of this one:
      var aTag = $("a[id='" + aid + "']");
      

      DEMO here

3. This is slightly tricky as the browsers rendering engine does not calculate the columns value based on the contents of the largest cell.

   You would have to either use a plugin (since the code for writing this is much more than this answer can cover), or manually set the width based on the logic of the column data i.e if you have a column that has names in it you can manually set the first td width to the longest name in the list.

   Update: Another option suggested by @sijav is to use:

   table td { white-space: nowrap; }
   

4. Update:

   You can pull a single page using a drop down and $.get():

   
     Class 1
   
   

    

   $('#class-list').change(function(){
     $.get('/server/data/class', { class: $(this).val() }, function(data){
       $('#container').html( data );
     });
   });
   

   With the above example your server side code would render the html and send in the table ready to be inserted into the dom. Since all the table is being created on the fly you would have to use event bubbling (binding the event to an element that is not rendered from the ajax call).

   Example the highlight row button would have to be written like this:

    $('#container').on('click', 'tr', function(){
      var $this = $(this);
   
      $this
        .addClass('highlight')
        .siblings('tr')
        .removeClass('highlight');
    });
   

   ---

   The data does not necessarily have to come in JSON format (although it would be more agile if at a future point you would need to do something else with the data).

   You can output your data as HTML instead of JSON from your server code.

   To check if the data is updated or not you could poll for a flag that your server code should output.

   // Poll every minute
   setTimeout(function(){
   
     // Check for changed content
     $.get('/server/data/changed', function( data ){
   
       // Server indicates content has changed get the content and update
       if ( data.flag ){
   
         $.get('/server/data/get', function( data ){
           updateHtml( data );
         });
   
       }
   
     });
   }, 1000 * 60);
   

   The above code is an example of a polling technique for updating your content.

5. To "remember" the row that was clicked you can use localStorage.

   There are several ways to do this this is one of them:

    // On page ready
    jQuery(function( $ ){
   
      var rowIndex = localStorage.getItem('rowIndex');
   
      if ( rowIndex ) {
   
        $( 'table tr' ).eq( rowIndex ).addClass('highlight');
   
      }
   
      // Save the row to localstorage based on it's index in the table
      var saveRow = function ( index ) {
   
        localStorage.setItem( 'rowIndex', index );
   
      };
   
      // Highlight the row and save it
      $( 'table tr' ).click(function(){
   
        var $this = $(this);
   
        $this
          .addClass('highlight')
          .siblings('tr')
          .removeClass('highlight');
   
        saveRow( $this.index() );
   
      });
   
      // On page exit/reload/change check for highlighted row and "save" it to localstorage
      $(window).on('beforeunload', function(){
   
        saveRow( $('.highlight').index() );
   
      });
   
    });
   

   DEMO here