jquery - Moving the scrolling bar up or down -


as going through extjs examples came across behavior http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/array-grid.html

when click on row , begin moving cursor or down,the scrolling bar moves along , when arrive @ last record,the scrolling bar down there you.

the example using keyboard events in example,i attempting highlight row , understand how done.

this example http://jsfiddle.net/thiswolf/pheax/

this how got scrolling bars

.tableholder{border:2px solid red; overflow-y:auto;height:300px} 

what making scrolling bars move along move or down rows?.

checkout fiddle. uses following code in addition code mimic basic version of table control you're aiming

        var cntnr = $('.tableholder');         var cntnr_height = cntnr.height();         var cntnr_top = cntnr.offset().top;         var cntnr_scrolltop = cntnr.scrolltop();         var all_rows = $('tr', cntnr)         var row_height = $(all_rows.get(0)).height();          $('.tableholder').click(function (ev) {            var t = ev.target;            if (t.tagname != 'td' && t.tagname != 'tr')               return;             var the_row = t.tagname == 'tr' ? $(t) : $(t.parentnode)            all_rows.removeclass('current')            the_row.addclass('current');         })          $('#deselect').click(function () {            all_rows.removeclass('current');         })          $(document).click(function (ev) {            /*if ($(ev.target) != cntnr && $(ev.target).parents().filter(cntnr).length == 0 && $(ev.target).hasclass('container'))             all_rows.removeclass('current');*/         }).keydown(function (ev) {                //don't scroll if no rows selected               if (all_rows.filter('.current').length == 0) {                  return;               }                var keycode = ev.which;                if ([38, 40].indexof(keycode) !== -1) {                  ev.preventdefault();               }               else {                  //we scroll on up/down arrow                  return;               }                var the_row = all_rows.filter('.current');               var next = the_row.next();               var prev = the_row.prev();                //check if reached extremes of table               if (                  keycode == 40 && !next.length                     || keycode == 38 && !prev.length                  )                  return false;                the_row.removeclass('current');                if (keycode == 40) {                  if (next.offset().top + row_height + 10 - cntnr_top > cntnr_height + cntnr.scrolltop()) {                     cntnr.scrolltop(cntnr.scrolltop() + row_height);                  }                  next.addclass('current');                  setdatafromrow(next)               }               else {                  if (prev.offset().top < cntnr.scrolltop()) {                     cntnr.scrolltop(cntnr.scrolltop() - row_height);                  }                  prev.addclass('current');                  setdatafromrow(prev)               }            });          function setdatafromrow(row) {            if (!row instanceof jquery)               row = $(row)             ip_id.val($('td:nth-child(1)', row).html());            ip_firstname.val($('td:nth-child(2)', row).html());            ip_lastname.val($('td:nth-child(3)', row).html());            ip_country.val($('td:nth-child(4)', row).html());            ip_city.val($('td:nth-child(5)', row).html());            ip_town.val($('td:nth-child(6)', row).html());            ip_gender.val($('td:nth-child(7)', row).html());          }          var curr = $("tr").eq(1);         curr.addclass("current");          /*$('#id').val('0');          $('#firstname').val('firstname');          $('#lastname').val('lastname');          $('#country').val('country');          $('#city').val('city');          $('#town').val('town');          $('#gender').val('gender');*/          var ip_id = $('#id'),            ip_firstname = $('#firstname'),            ip_lastname = $('#lastname'),            ip_country = $('#country'),            ip_city = $('#city'),            ip_town = $('#town'),            ip_gender = $('#gender');           setdatafromrow(curr);          /* event handlers buttons here  */ 

please note code might not perfect in ways. havn't touched event handling code goes wrong @ points :d hope starting point , direction code


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -