Loading ...
Sorry, an error occurred while loading the content.

RE: [ydn-javascript] Maintain scroll position after list expansion

Expand Messages
  • Kevin Fish
    I have a similar problem - I m just using an icon/image link to toggle some items between visible/invisible state within a big scrollable DIV (the div is
    Message 1 of 3 , Sep 30 12:24 AM
    • 1 Attachment
    • 26 KB
    I have a similar problem - I'm just using an icon/image link to toggle some
    items between visible/invisible state within a big scrollable DIV (the div
    is populated by asynchronous calls). That div will not maintain it's
    vertical scroll position no matter what I try. It keeps popping back to the
    top position after I click my toggle icons. I am definitely returning
    "false" after my toggle function. I've tried using anchors, divs, spans,
    just the image - nothing is working. Any ideas?



    <span style="cursor:pointer" onclick="toggle(container1);return false;"><img
    src="images/box_blue.gif"></span>



    <a href="#" onclick="toggle(container1);return false;"><img
    src="images/box_blue.gif"></a>



    The code above has been stripped down a bit - but the "toggle" is working
    properly in both scenarios. If I take out the call to "toggle" and just do
    a straight "return false;" (see below) the scrolling issue goes away. Also,
    the div itself has scrolling always on (not auto).



    <a href="#" onclick="return false;"><img src="images/box_blue.gif"></a>



    Found a few hacks on the web, but nothing is working... any help would be
    much appreciated!



    -Kevin



    From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com]
    On Behalf Of Amity Binkert
    Sent: Friday, February 20, 2009 2:20 PM
    To: ydn-javascript@yahoogroups.com
    Subject: [ydn-javascript] Maintain scroll position after list expansion



    I have a list of YUI Modules that are hidden at load time. The user
    can click on a link that is above a particular Module to show it.
    When the user has scrolled down the page and then clicks to show or
    hide one of these Modules, the page scrolls back to the top. Is there
    any way to prevent this from happening?

    I've stepped through the code and noted that it will successfully show
    the Module and update the CSS class before changing the scroll
    position back to the top of the screen, so it seems to me this must be
    happening after the event handler or something?

    Below is my code setting up the Module, the fnToggle function that
    shows and hides the YUI Module and changes the class associated with
    it. The CSS class just changes a background image.

    function fnToggle(e, obj) {
    /* 'this' refers to the YUI module to show or hide */
    if(YAHOO.util.Dom.hasClass(this, 'collapsed')) {
    obj.show();
    YAHOO.util.Dom.replaceClass(this, 'collapsed', 'expanded');
    } else {
    obj.hide();
    YAHOO.util.Dom.replaceClass(this, 'expanded', 'collapsed');
    }
    }

    YAHOO.util.Event.onDOMReady(function () {

    YAHOO.verbatim.container.understand_group = new
    YAHOO.widget.Module("understand_group", { visible: false });
    YAHOO.verbatim.container.understand_group.render();

    YAHOO.util.Event.addListener("understand_show","click",fnToggle2,YAHOO.verba
    tim.container.understand_group);


    });

    <html>
    ...
    <li class="togglegroup">
    <a href="#" id="understand_show" class="collapsed">Understanding</a>
    <div id="understand_group">
    <div class="hd">
    <small>(multiple selections will show answers with any of
    those selected)</small>
    </div>
    <div class="bd">
    <fieldset class="multigroup">
    <ol class="multiselect">
    <li><label for="understandcode1">Very strong</label>
    <input type="checkbox" name="understandcode1"
    id="understandcode1"></li>
    <li><label for="understandcode2">Strong</label>
    <input type="checkbox" name="understandcode2"
    id="understandcode2"></li>
    </ol>
    </fieldset>
    </div>
    <div class="ft"></div>
    </div>
    </li>
    ...

    </html>
Your message has been successfully submitted and would be delivered to recipients shortly.