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