#44 new
Mike Boone

Autocompleter Scroll Problem

Reported by Mike Boone | July 9th, 2008 @ 11:03 PM

I'm seeing a scrolling problem in several browsers: if you try to scroll up an autocomplete list on a page that has enough content to scroll, the whole page "jumps" around: abrupt page scrolling.

I have created a page to demonstrate the issue:

http://boonedocks.net/ac_test/in...

Type something for the autocompleter and scroll up and down the list. Then click the "Extend" link and try it again. The page will jump up, at least it did in FF3, IE7, and Safari for Windows, and FF2 on Ubuntu.

The Javascript in this demo is using the latest commit from Github:

http://github.com/madrobby/scrip...

I can make the problem go away by commenting out lines 214 and 220 in controls.js. These lines call scrollIntoView(). I have no idea what the side-effects of that change may be.

I also note that the working autocompleter demo (http://demo.script.aculo.us/ajax... is using a version of controls.js that has a 2005 copyright date, and the markPrevious/markNext do not contain the scrollIntoView line.

Comments and changes to this ticket

  • namotco

    namotco July 21st, 2008 @ 07:02 PM

    I'm having the same problem

  • airportyh

    airportyh July 21st, 2008 @ 10:05 PM

    I ran into this problem as well, mucked with the code, have a fix for it. Patch attached.

  • leonardo_999

    leonardo_999 July 26th, 2008 @ 03:59 PM

    Hello

    I have also this descripted problem. Thanks airportyh to the patch, but i can't use it.

    I don't know what to do with this lines of code.

    I think the lines beginning with "<" means delete the line </p><p> an ">" suggest you to insert this line.

    I don't find those lines in controls.js.

    here is the version of controls.js:

    // script.aculo.us controls.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008

    thanks for help

  • airportyh

    airportyh July 27th, 2008 @ 07:19 AM

    Try the patch command line tool: http://en.wikipedia.org/wiki/Pat...

    I guess it's more proper to use git, but I haven't gotten around to learning it. Hope you guys don't mind.

  • leonardo_999

    leonardo_999 July 27th, 2008 @ 07:01 PM

    Hello,

    i had read the manpages, wiki put i can't get it work. here what i have done:

    create patch file "controls.js" with content:

    --- BOF ---

    214,218c214

    < var entry = this.getEntry(this.index);

    < var doff = document.viewport.getScrollOffsets();

    < var eoff = entry.cumulativeOffset();

    < if (eoff[1] < doff[1])

    < entry.scrollIntoView(true);

    ---

    this.getEntry(this.index).scrollIntoView(true);

    224,228c220

    < var entry = this.getEntry(this.index);

    < var doff = document.viewport.getScrollOffsets();

    < var eoff = entry.cumulativeOffset();

    < if (eoff[1] + entry.getHeight() > doff[1] + document.viewport.getHeight())

    < entry.scrollIntoView(false);

    ---

    this.getEntry(this.index).scrollIntoView(false);

    --- EOF ---

    os: macos 10.5.4

    via terminal(bash) i did this with following results:

    powerbook:prototype-aculo leonardo$ ls

    builder.js effects.js sound.js

    controls.js prototype.js unittest.js

    controls.patch scriptaculous.js

    dragdrop.js slider.js

    powerbook:prototype-aculo leonardo$ cp controls.js controls.js_

    powerbook:prototype-aculo leonardo$ patch ./controls.js ./controls.patch

    patching file ./controls.js

    Reversed (or previously applied) patch detected! Assume -R? [n]

    Apply anyway? [n]

    Skipping patch.

    patch unexpectedly ends in middle of line

    patch: **** unexpected end of file in patch at line 15

    powerbook:prototype-aculo leonardo$ patch ./controls.js ./controls.patch

    patching file ./controls.js

    Reversed (or previously applied) patch detected! Assume -R? [n] y

    Hunk #1 succeeded at 216 (offset 2 lines).

    patch unexpectedly ends in middle of line

    patch: **** unexpected end of file in patch at line 15

    powerbook:prototype-aculo leonardo$

    this is my first use of patch command, i'm not sure i have done all things well.

    thanks for help

  • Thabo

    Thabo August 21st, 2008 @ 10:58 AM

    Hallo airportyh, i had exactly the sampe problem and applied your patch. The page doesn't jump anymore, that is working but now a new problem exists. In case the div has the style "overflow:auto" with a scrollbar, the content scrolls out of view. Could you please take a look at this problem Thx Thabo

  • Thabo

    Thabo August 21st, 2008 @ 12:21 PM

    Rollback: We are using protoculuos and it seems that we have an old version. I overwrite the method with the method fron controls.js and it is working just fine. Thank you

  • jrochkind

    jrochkind August 30th, 2008 @ 12:33 AM

    I too have this problem. In Firefox2 and Firefox3.

    Oddly, I ran into this problem a long time ago (a year or so ago), and ended up abandoning Autocompleter because of it, but this time I don't want to give up. Surprised more people aren't seeing this, and the bug was only reported fairly recently.

    Anyone have any opinion on that patch included here? Does it cause more problems than it solves? Is it a good idea?

  • Scott Windsor

    Scott Windsor August 30th, 2008 @ 01:23 AM

    The patch worked for me, but only with prototype 1.6. I had an older rails app still using prototype 1.5 (rails 1.2.6, specifically), and document.viewport wasn't introduced until prototype 1.6.

    The only thing this patch doesn't fix on prototype 1.6 is when the autocompletion list wraps around. So, if you're on the last item on the list, and you press the down arrow, and the top of the list is outside your view, and it wraps around, it doesn't scroll up to the top. It's a bit of an edge case, but it would be nice if the patch fixed that as well.

  • Mike Boone

    Mike Boone August 30th, 2008 @ 06:18 PM

    I used the following patch to fix both this problem and a lot of problems I was having using an autocomplete with a scrolling list. This code was culled from other people's patches on Trac and mailing lists. So I don't take credit for these changes, nor do I fully understand how it all works.

    So this patch includes fixes to make that work, including a kludge to make IE not hide the list when the user clicks on the list scrollbar. Unfortunately, I was never able to get this working in Safari: it still hides the list if a user clicks the list scrollbar.

    Sad to say, I eventually gave up fighting with this and switch to a jQuery autocompleter in my app. It has been rock-solid, but at the cost of the user having to download more JS code.

    (http://bassistance.de/jquery-plu...

    I'm looking forward to seeing these autocomplete bugs solved so I can go back to just one JS library.

  • Mike Boone

    Mike Boone August 30th, 2008 @ 06:20 PM

    BTW, you can see the patch applied to my original URL that demonstrates this ticket's issue:

    Broken: http://boonedocks.net/ac_test/in...

    Working (at least for me): http://boonedocks.net/ac_test/in...

  • Oscar Hiboux

    Oscar Hiboux September 17th, 2008 @ 10:09 PM

    • Tag changed from autocompleter, controls, scrolling to autocompleter, controls, scrolling

    Hi!

    (This is my very first post! Weeeeee!! ^^)

    I'd like to share my code for that problem too. I replaced the methods with the following fragments. I'm using the completer with "max-height: ...; overflow-y: auto" and the specifiactions of the project I work on tells that the keyboard navigation should allow the user to browse the choices.

    Note: there's a threshold for the overlapping that might be tweaked. It's alright for me with 10%.


    markPrevious: function() {

    this.index = (this.index > 0) ? this.index - 1 : this.entryCount-1;
    /* this way makes the window scrolling brutally in addition of the list scrolling
    this.getEntry(this.index).scrollIntoView(true); */
    var entry = this.getEntry(this.index);
    var layer = entry.up(1); // "update" element (suggestions list)
    var position = entry.positionedOffset();
    var overlap = {
      top: layer.scrollTop - position[1],
      bottom: (position[1] + entry.getHeight()) - (layer.getHeight() + layer.scrollTop)
    }
    var threshold = (0.1 * entry.getHeight());
    if(overlap.top > threshold) {
      layer.scrollTop = position[1];
    }
    else if(overlap.bottom > threshold) {
      layer.scrollTop += overlap.bottom;
    }
    
    

    },

    markNext: function() {

    this.index = (this.index < this.entryCount - 1) ? this.index + 1 : 0;
    /* this way makes the window scrolling brutally in addition of the list scrolling
    this.getEntry(this.index).scrollIntoView(false); */
    var entry = this.getEntry(this.index);
    var layer = entry.up(1); // "update" element (suggestions list)
    var position = entry.positionedOffset();
    var overlap = {
      top: layer.scrollTop - position[1],
      bottom: (position[1] + entry.getHeight()) - (layer.getHeight() + layer.scrollTop)
    };
    var threshold = (0.1 * entry.getHeight());
    if(overlap.top > threshold) {
      layer.scrollTop = position[1];
    }
    else if(overlap.bottom > threshold) {
      layer.scrollTop += overlap.bottom;
    }
    
    

    }


  • Jason Gill

    Jason Gill January 21st, 2009 @ 12:34 AM

    • Tag changed from autocompleter, controls, scrolling to autocompleter, controls, jump, scrolling

    I just made my own solution to the problem before seeing Oscar's which is somewhat similar.

    Mine can be found here: http://blog.gilluminate.com/2009...

  • Scottt

    Scottt May 19th, 2009 @ 09:46 PM

    I implemented the fixes as suggested by Jason Gill and they are working great.

    I tested them on:
    FireFox v3.0.10 Win XP FireFox v3.0.8 Mac OS X 10.5 Safari v4 public beta Win Xp Safari v3.2.3 Mac OS X 10.5 IE7 IE8 IE7's quarks mode (IE6 emulation? have not downloaded a new IE6 VM from MS so cannot truly comment on IE6 usability)

    Similar to Scott Windor's comment if the screen is reduced in size to cause the suggestion list to go off the page, scrolling through the list does not keep the current selection within view. It appears like the original code might have keep the current selection on in view, but as Scott has also mentioned, that may be more of an edge case.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

Pages