Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Scroll to LI element

    Hello Everyone,
    I am using an UL to list files and directories for a file manager. Each LI item corresponds to either a file or directory. When the user clicks on a list item, the proper backend data is processed, and the class of the list item is changed to "highlighted", highlighting the item allowing the user to know which file is being modified.
    The UL itself is placed in a DIV, and allowed to overflow, allowing the UL to be scrollable within a defined space. Everything works perfect, except, when a filename is clicked the page is refreshed, causing the UL to scroll back to the top. The correct item is highlighted, but if it falls below the viewable area, and needs to be scrolled to, it appears as though no file is selected.

    In short, is it possible on page reload, to scroll to the specific LI item which has just been clicked? It would have its own unique ID and Class. I would like the "highlighted" item to have focus in the scrollable UL.

    I hope this makes sense, Thank you for any assistance!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It will help if you give us your code or better still, a link. It is very difficult to get to the problem without seeing what you have already done.
    Use the # , above in the header, to enclose any code.

    Frank
    Last edited by effpeetee; 02-17-2009 at 10:56 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    http://www.webweaver.nu/html-tips/li...n-a-page.shtml

    Here is one method, which is basically a link which has the # mark in the URL to automatically go to an id.

    Also with smooth scrolling and JS

    http://www.sitepoint.com/article/scr...ly-javascript/ (many more online)
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •