#1
  1. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2009
    Posts
    22
    Rep Power
    0

    How to scroll a div section on an html page?


    I have a website faq page. With all the faqs displayed it looks "too much".

    So I have all the faqs at the top of the page and all the faq answers in a div below them with a scroll bar.

    What I want to do is when a user clicks a faq, the div will scroll down (or up) so the corresponding answer is displayed.

    I have:
    - a name link at the top of the page like <a name="top"></a>
    - one on each of the answers like <a name="faq15"></a>
    - a link on each faq like
    <a href="javascript:void(0); onclick="window.location='#faq15'; window.location='#top';">faq 15 question</a>.

    So what happens when a faq is clicked is
    - The answer is pulled to the top of the div (which is good)
    - Then the div is pulled to the top of the page, (which is not so good as it hides all the faqs)
    and then the page is repositioned with the top of the page at the top of the browser window (and we can see all the faqs again).

    Which works ok except that the page jumps twice during this process which is a bit annoying.

    Any suggestions for a way where I can just get the div to scroll without repositioning the page would be appreciated.

    Thanks.
  2. #2
  3. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    You can try little old trick: have hidden textbox near every answer.
    Instead of your current code, have code that is doing the following:
    1. show the proper textbox
    2. set focus to the proper textbox
    3. hide the textbox again

    Hopefully, setting focus will achieve what you want in smoother way.
    Let me know if you need help implementing the code, will try to pull
    something together when I'll have some time.
  4. #3
  5. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2009
    Posts
    22
    Rep Power
    0
    Awesome. That works well.

    Few problems though.

    1. I did have to add another textbox at the end of the faq answers to focus on first otherwise the faq answer wold be displayed with the title at the bottom of the display div(when the div scroll position was above the faq answer).

    2. In the case that the user has their paged zoomed in to make everything bigger and the faq answer display div is not completely on the page then the paged gets moved (obscuring the faqs) so the display div is fully on the screen.

    I tried using scroll() to take the page back to it's original position when the faq was clicked but then we get the page jumping again.

    Am I able to lock the page to stop it moving when a faq is clicked?

    The focus() method is pretty well supported in all the browsers isn't it?

    Cool.
  6. #4
  7. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    Yeah, focus() was there from the very beginning and will most probably
    stay to the very end.

    Regarding your problem, not sure I understand.. can you post link or
    attach the full code so I can reproduce and see for myself?
  8. #5
  9. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2009
    Posts
    22
    Rep Power
    0
    Ok Thanks shadow wizard.

    I have sort of solved the problem by putting the faqs down the LHS and the anser display box on the RHS.

    Still what happens is when Iput the focus on to one of thos textboxes in the display div, the whols page will move so that all of the display box is displayed on the screen.

    Go to http://planetcarpool.co.nz/faqs.asp, zoom in the page so you can see the faqs and part of the faq answer display box.

    Then when you click on one of the faqs, the whole page will scroll up or down in the browser window to try and fit the complete answer display box in the browser window.
  10. #6
  11. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    Sorry, can't see any way around what you describe.
    In "ordinary" view does everything work fine though?
  12. #7
  13. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2009
    Posts
    22
    Rep Power
    0
    What do you think? I am comfortable with it.

    I just thought that there may be some way of temporarily locking the scroll position of the parent page while the display div was positioned.

    Your original advice worked well. Thanks
  14. #8
  15. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    Originally Posted by BobBob
    What do you think? I am comfortable with it.

    I just thought that there may be some way of temporarily locking the scroll position of the parent page while the display div was positioned.

    Your original advice worked well. Thanks
    Nope, nothing that I know can lock the scrolling.
    Maybe disabling the whole div element, but it will also make it
    grayed out and I guess you prefer to avoid this?

    Cheers anyway, glad I could help.

Similar Threads

  1. How to hightlight a word in HTML page?
    By kamalakannan_ss in forum ASP Development
    Replies: 2
    Last Post: February 8th, 2006, 10:14 AM
  2. Replies: 5
    Last Post: February 4th, 2006, 07:08 PM
  3. Save aspx page screen-rendered as Html Type
    By cnevas in forum .NET Development
    Replies: 2
    Last Post: January 5th, 2006, 11:06 AM
  4. Emailing data from a database (not a form)
    By yetiboy in forum ASP Development
    Replies: 18
    Last Post: December 19th, 2005, 01:42 PM

IMN logo majestic logo threadwatch logo seochat tools logo