#81 new
Peter

Effect.Scrollto(...)

Reported by Peter | September 4th, 2008 @ 01:37 PM | in 1.8.3 bugfix release

Hi,

This is just to let you know that Opera (9.52) executes Effect.Scrollto() wrongly: it scrols up when it is suppose to scroll down. Actually in all cases it scrolls up.

Here is the test page:

http://jollyhell.com/lab/scrollT...

I'm working under Windows XP.

Please advise,

Peter

Comments and changes to this ticket

  • Peter Brown

    Peter Brown September 18th, 2008 @ 07:47 PM

    • Tag changed from scrolling to scrolling

    Here's a temporary workaround for anyone who's affected by this:

    window.opera ? Element.scrollTo(element) : Effect.ScrollTo(element);

  • Nick Stakenburg

    Nick Stakenburg September 18th, 2008 @ 10:23 PM

    This is not a bug, validate your document, you have unclosed p tags.

    http://validator.w3.org

  • Peter

    Peter September 19th, 2008 @ 06:01 AM

    Nick,

    The problem has nothing to do with unenclosed p tags. Now the testing page is OK (validated) but the problem still persists.

    Peter

  • Peter

    Peter September 19th, 2008 @ 09:13 AM

    Hi Peter,

    This problem is present in Firefox (2 & 3) and Opera. It is caused by floating elements on your website. The calculation of Effect.ScrollTo is buggy in Firefox and Opera if elements float (resulting in a vertical offset of 0px or even negative numbers), causing the browser to scroll up.

    You can fix this by fixing the scriptaculous library. On line 514, the variable max is defined by a calculation. This calculation is where it goes wrong in Firefox and Opera.

    If you change the original calculation with the following, your problem should be fixed:

    max = document.viewport.getScrollOffsets[0] - document.viewport.getHeight();

    Peter (another one ;))

  • Nick Stakenburg

    Nick Stakenburg September 19th, 2008 @ 09:24 AM

    Use Prototype from git, it'll solve the issue, no need to modify scriptaculous.

    Peter: p tags aren't allowed in p tags. Try using the HTML validator plugin for firefox it'll show you things like that.

  • Peter

    Peter September 19th, 2008 @ 09:17 PM

    Hi another Peter,

    Your suggestion works but the scrolling down effect is not the same. It stops suddenly unlike scrolling up, which stops reducing slowly the speed.

    P.

  • Peter

    Peter September 19th, 2008 @ 10:42 PM

    Peter,

    The ScrollTo effect is fixed by changing the calculation. What you are saying sounds like scrolling to an anchor close to the bottom of your document, so it suddenly stops scrolling at the end of your document (not being able to get the target element at the top of your screen).

    Whatever you are going to do with the effect, be sure to check your script and xhtml. It really depends on how you implement it (depending on other effects, when it triggers, etc). The effect should be fixed.

    Good luck!

  • Peter

    Peter September 19th, 2008 @ 11:20 PM

    Thank you guys!

    Obviously I have to start learning the Prototype Philosophy instead of asking stupid questions. :)

    Peter

    2008/9/19 Lighthouse support@lighthouseapp.com

  • monkiki

    monkiki October 12th, 2008 @ 08:58 PM

    To Peter,

    I had the same problem and used your work around. It works great! However is there any draw backs in other browsers??? I am current using the following to avoid changing the max value for Safari etc...

    max = (window.height || document.body.scrollHeight || document.viewport.getScrollOffsets[0]) - document.viewport.getHeight();

    Thx for the great tip anyway!!!

  • monkiki

    monkiki October 12th, 2008 @ 09:03 PM

    Just found out that if I use

    max = document.viewport.getScrollOffsets[0] - document.viewport.getHeight();

    it actually fixes the problem with multiple effects like, Effect.toggle then Effect.ScrollTo, because ScrollTo did not scroll to the exact position after toggle but if I change the max value as above then it does! Amazing... Hope it doesn't affect other unknown or older browsers...

  • Peter

    Peter October 13th, 2008 @ 08:40 AM

    I haven't found any problems, and i don't expect any to occur.

    Good luck!

  • Yaffle

    Yaffle November 19th, 2008 @ 07:38 AM

    Oh, Who would be a hero and make good scrollTo and smoothscroll code? than will work on this example?




    Prototype ScrollTo
    #red
  • Yaffle

    Yaffle November 19th, 2008 @ 07:40 AM

    
    
    Oh, Who would be a hero and make good scrollTo and smoothscroll code?
    than will work on this example?
    <html>
    <head>
    <script type="text/javascript" src="http://hostel6.ru/cht/js/
    prototype.js"></script>
    </head>
    <body>
    <br><br><br>
    <div style="height:100px; background-color:white; overflow:auto;">
    <div id="blue" style="height:100px; background-color:blue;"></div>
    <div id="red" style="height:100px; background-color:red;"></div>
    </div>
    <a href="#" onclick="$('red').scrollTo();">Prototype ScrollTo</a><br>
    <a href="#red">#red</a><br>
    </body>
    </html>
    
  • ronin-15560 (at lighthouseapp)

    ronin-15560 (at lighthouseapp) November 20th, 2008 @ 04:55 PM

    • Milestone set to 1.8.3 bugfix release
  • Radovan Kepák

    Radovan Kepák January 12th, 2010 @ 10:25 AM

    Your example working with my modified version of prototype, you can download it here:
    http://storage.kepak.eu/prototype.js

    I will try to do some test, but if everythink work ok, i will put the patch here :-)

  • Jason

    Jason March 18th, 2010 @ 05:37 PM

    Now give me a .scrollTo that will scroll more than just the window. Say I have a nice long DIV -- be able to scroll that DIV window to a specific anchor/element in it. Essentially scrolling the DIVs viewport.

    .scrollTo (element, target_element); --- scrolls the element to the target_element. .scrollTo (my_big_long_div_with_scrollbars, another_object_inside_it);

    Bringing "another_object_inside_it" into view in the "my_big_long_div"s viewport.

    One can dream.

  • Radovan Kepák

    Radovan Kepák July 21st, 2010 @ 11:49 AM

    • Importance changed from “” to “Low”

    I give you one :-)
    Add this after your prototype.js file

    this will modify your prototypejs scrollTo function, now it will scroll as it should not the buggy window style

    /*

    PrototypeJS scrollTo fix
    
    
    
    
    */ Element.addMethods({
    scrollTo: function(element){
        element = $(element);
    
        var parent = element.getScrollParent();
        var x = element.offsetTop || 0;
        var y = element.offsetLeft || 0;
    
        if(parent.tagName.match(/^(?:body|html)$/i)){
            window.scrollTo(x, y);
        }else{
            parent.scrollTop = x;
            parent.scrollLeft = y;
        }
    
        return element;
    },
    
    getScrollParent: function(element){
        while((element = element.parentNode) &amp;&amp; element != document.body){
        if(Element.getStyle(element, 'overflow') != 'visible')
            return $(element);
        }
    
        return $(document.body);
    }
    
    
    
    
    });
  • Radovan Kepák

    Radovan Kepák July 21st, 2010 @ 11:51 AM

    huh, change && for &&
    i attached the file with modification

  • chenlina1
  • Sievier

    Sievier March 10th, 2018 @ 11:38 AM

    Given all the information pertaining to spectrum tv APK. Spectrum Login Furthermore, Spectrum provides the web with business house purposes.

  • Duccoldany469

    Duccoldany469 March 13th, 2018 @ 12:32 PM

    We will discuss those later up in the article as well. Musical.ly Sign In Below are the options as well as the information in order to help

  • gta san andreas apk and data

    gta san andreas apk and data June 5th, 2018 @ 04:51 PM

    Thanks for sharing this valuable information to our vision. Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me. http://gtasanandreass.com/

  • chenjinbei

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.

Attachments

Tags

Pages