# HG changeset patch # User Dan # Date 1219521812 14400 # Node ID 077887be639deedecb220011299b8393d2262d49 # Parent e492511e31ea9b2b1ea737296b50ed4f1f941a62 More work on auto-completion - it auto-scrolls now and limits result divs to 300px height diff -r e492511e31ea -r 077887be639d includes/clientside/static/autofill.js --- a/includes/clientside/static/autofill.js Sat Aug 23 16:03:13 2008 -0400 +++ b/includes/clientside/static/autofill.js Sat Aug 23 16:03:32 2008 -0400 @@ -152,6 +152,7 @@ // Create results var results = document.createElement("div"); $(results).addClass('tblholder').css('z-index', getHighestZ() + 1).css('margin-top', 0); + $(results).css('clip', 'rect(0px,auto,auto,0px)').css('overflow', 'auto').css('max-height', '300px'); // Create jQuery object for results // var $results = $(results); @@ -241,7 +242,8 @@ case 13: // return if( selectCurrent() ){ // make sure to blur off the current field - $input.get(0).blur(); + // (Enano edit - why do we want this, again?) + // $input.get(0).blur(); e.preventDefault(); } break; @@ -297,6 +299,33 @@ lis.removeClass("row2"); $(lis[active]).addClass("row2"); + + // scroll the results div + // are we going up or down? + var td_top = $dynano(lis[active]).Top() - $dynano(results).Top(); + var td_height = $dynano(lis[active]).Height(); + var td_bottom = td_top + td_height; + var visibleTopBoundary = getScrollOffset(results); + var results_height = $dynano(results).Height(); + var visibleBottomBoundary = visibleTopBoundary + results_height; + var scrollTo = false; + console.debug('td top = %d, td height = %d, td bottom = %d, visibleTopBoundary = %d, results_height = %d, visibleBottomBoundary = %d, step = %d', + td_top, td_height, td_bottom, visibleTopBoundary, results_height, visibleBottomBoundary, step); + if ( td_top < visibleTopBoundary && step < 0 ) + { + // going up: scroll the results div to just higher than the result we're trying to see + scrollTo = td_top - 7; + } + else if ( td_bottom > visibleBottomBoundary && step > 0 ) + { + // going down is a little harder, we want the result to be at the bottom + scrollTo = td_top - results_height + td_height + 7; + } + if ( scrollTo ) + { + console.debug('scrolling the results div to %d', scrollTo); + results.scrollTop = scrollTo; + } // Weird behaviour in IE // if (lis[active] && lis[active].scrollIntoView) { @@ -485,8 +514,6 @@ var row = data[i]; if (!row) continue; - console.debug('row good ', row); - if ( typeof(row[0]) != 'string' ) { // last ditch resort if it's a 1.1.4 autocomplete plugin that doesn't provide an automatic result. diff -r e492511e31ea -r 077887be639d includes/clientside/static/functions.js --- a/includes/clientside/static/functions.js Sat Aug 23 16:03:13 2008 -0400 +++ b/includes/clientside/static/functions.js Sat Aug 23 16:03:32 2008 -0400 @@ -452,10 +452,16 @@ object.filter = "alpha(opacity=" + opacity + ")"; } -function getScrollOffset() +function getScrollOffset(el) { var position; - if (self.pageYOffset) + var s = el || self; + el = el || document; + if ( el.scrollTop ) + { + position = el.scrollTop; + } + else if (s.pageYOffset) { position = self.pageYOffset; } diff -r e492511e31ea -r 077887be639d includes/template.php --- a/includes/template.php Sat Aug 23 16:03:13 2008 -0400 +++ b/includes/template.php Sat Aug 23 16:03:32 2008 -0400 @@ -1947,7 +1947,7 @@ function username_field($name, $value = false) { $randomid = md5( time() . microtime() . mt_rand() ); - $text = '