SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get a div with overflow:auto to bring an inner div to the top

    Hi everyone.

    I have a div in a page with divs inside it and when an action happens in the page I want to bring an inner div to the top with script (depending on the action).

    Here is what the HTML looks like:

    Code:
    <div style="overflow: auto; height: 10px;" id="container">
    
    <div id="first">Content</div>
    <div id="second">Content</div>
    <div id="third">Content</div>
    <div id="fourth">Content<div>
    </div>
    Now how do I bring the div that has id == "fourth" into view via JavaScript?

    I tried to set the scrolltop to 0 for the div with id == "fourth" without success.

    Thanks.

    chrizbot

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to change scrollTop on #container, not #fourth.

    Do you really want the content to be invisible for anyone browsing with CSS on and JavaScript off?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't changing it to #container just scroll the container to the top rather than scrolling down to the #fourth container?

    Also, the nature of the site requires that people have CSS and JavaScript.

    Thanks!

    chrizbot

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again.

    I just tried doing the following in the function I would want to go to a particular section, but tried to test it to just go to the top:

    Code:
    document.getElementById('container').scrollTop = 0;
    It doesn't do anything...

    Is there something I am doing wrong here?

    I am imagining that I can use something like the following if this works:

    Code:
    document.getElementById('container').scrollTop = document.getElementById('fourth').top;
    Right?

    BTW, I am using Firefox 2.0 on the Mac (if that matters)...

    Thanks.

    chrizbot

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the scrollbar is already at the top, then setting scrollTop to 0 won't do anything.

    Close. Try this.
    Code:
    document.getElementById('container').scrollTop = document.getElementById('fourth').offsetTop;
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.

    I looked at another site that had this working and found they used the following:

    Code:
    document.getElementById('fourth').scrollIntoView();
    This seems to work for the function I need and it appears to be available for IE and Firefox, but I can't confirm that...

    Thanks.

    chrizbo

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scrollIntoView() is supported by IE5+/Win, Firefox, Netscape 7.0+, Opera 9+, and Safari 2. In Safari 2 it scrolls the <div> but only part way, so you have to click it a few times to scroll all the way to the bottom with that method.

    I prefer using the properties instead, because they work better in a larger number of browsers.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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