scrolling within div

Discussion in 'Javascript' started by stan@capitalcityrealty.ca, Jan 14, 2007.

  1. Guest

    This is a follow-up to an earlier posting - this time with sample code.

    In the code below, the jump within the div causes movement within the
    div and as well withing the page as a whole. I am looking for a way to
    restrict movement, triggered by the jump, to the area within the div
    only.

    Here is the code.

    <html>
    <head>
    <style type="text/css">
    ..sectionhead {
    text-align: left;
    background: #EBEBEB;
    height: 7.25em;
    width: 100%;
    border-style:ridge;
    border-width:thin;
    border-color:grey;
    float: left;
    margin-left:0px;
    margin-right:0px;
    overflow-y: auto;
    color: black;
    }

    </style>
    </head>
    <body>
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    <div class="sectionhead">
    <a href="#test">go to "test"</a><br>
    text in div<br>text in div<br>text in div<br>text in div<br>
    <a name="test"></a>
    more text in div<br>more text in div<br>more text in div<br>
    more text in div<br>more text in div<br>more text in div<br>
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    </div>
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    </html>

    ------------

    Stan
    , Jan 14, 2007
    #1
    1. Advertising

  2. ASM Guest

    a écrit :
    > This is a follow-up to an earlier posting - this time with sample code.
    >
    > In the code below, the jump within the div causes movement within the
    > div and as well withing the page as a whole. I am looking for a way to
    > restrict movement, triggered by the jump, to the area within the div
    > only.


    Do not understand ... and if 'test' is outside of viewport ?
    You have to scroll the page before to reach it, no ?

    <html>
    <head>
    <body id="cap">
    <a href="#test" onclick="setTimeout('self.location=\'#cap\'',0);">
    reach test
    </a>
    <div style="height: 400px; border:1px solid blue">
    filling up
    </div>
    <div style="height: 6em; overflow: auto">
    <p style="height:150px; border:1px solid red">
    some text
    </p>
    <h2 id="test"> place to reach</h2>
    <p style="height:150px; border:1px solid red">
    some more text
    </p>
    </div>
    <div style="height: 400px; border:1px solid blue">
    filling up
    </div>
    </body>
    </html>

    Works with my FF, Safari, Opera

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Jan 14, 2007
    #2
    1. Advertising

  3. Guest

    Thanks for your reply, but in the test example I provided, both the
    "from" and the
    "to" are within the div.

    To be clear, I am looking at a situation where:

    1) both the "from" and the "to" are within the div
    2) there is enough content on the page istelf to require page scrolling
    Note: In the code provided there is enough content provided to require
    page scrolling on a 17" screen at 1024 X 768.

    Stan

    ASM wrote:
    > a écrit :
    > > This is a follow-up to an earlier posting - this time with sample code.
    > >
    > > In the code below, the jump within the div causes movement within the
    > > div and as well withing the page as a whole. I am looking for a way to
    > > restrict movement, triggered by the jump, to the area within the div
    > > only.

    >
    > Do not understand ... and if 'test' is outside of viewport ?
    > You have to scroll the page before to reach it, no ?
    >
    > <html>
    > <head>
    > <body id="cap">
    > <a href="#test" onclick="setTimeout('self.location=\'#cap\'',0);">
    > reach test
    > </a>
    > <div style="height: 400px; border:1px solid blue">
    > filling up
    > </div>
    > <div style="height: 6em; overflow: auto">
    > <p style="height:150px; border:1px solid red">
    > some text
    > </p>
    > <h2 id="test"> place to reach</h2>
    > <p style="height:150px; border:1px solid red">
    > some more text
    > </p>
    > </div>
    > <div style="height: 400px; border:1px solid blue">
    > filling up
    > </div>
    > </body>
    > </html>
    >
    > Works with my FF, Safari, Opera
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date
    , Jan 14, 2007
    #3
  4. ASM Guest

    a écrit :
    > Thanks for your reply, but in the test example I provided, both the
    > "from" and the
    > "to" are within the div.
    >
    > To be clear, I am looking at a situation where:
    >
    > 1) both the "from" and the "to" are within the div


    Not a problem

    > 2) there is enough content on the page istelf to require page scrolling


    Yeap

    > Note: In the code provided there is enough content provided to require
    > page scrolling on a 17" screen at 1024 X 768.


    That's right, and ?


    Perhaps could you try to see if page was scrolled before to jump
    then after the jump re-scroll it to its previous position ?

    <script type="text/javascript">
    function rePlace() {
    var posy = window.pageYOffset? window.pageYOffset : document.body.scrollTop;
    setTimeout('scrollTo(0,'+posy+')',0);
    }
    </script>

    <a href="#test" onclick="rePlace()">go to "test"</a>

    In your CSS, as overflow-y:auto; isn't recognize in all browsers
    prefer overflow: auto;


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Jan 15, 2007
    #4
  5. Guest

    Thanks for the suggestion. I tried it but it is quite a jerky
    operation, scrolling one way and then back again. It woulld be nice to
    find a better way if possible.
    ASM wrote:
    > a écrit :
    > > Thanks for your reply, but in the test example I provided, both the
    > > "from" and the
    > > "to" are within the div.
    > >
    > > To be clear, I am looking at a situation where:
    > >
    > > 1) both the "from" and the "to" are within the div

    >
    > Not a problem
    >
    > > 2) there is enough content on the page istelf to require page scrolling

    >
    > Yeap
    >
    > > Note: In the code provided there is enough content provided to require
    > > page scrolling on a 17" screen at 1024 X 768.

    >
    > That's right, and ?
    >
    >
    > Perhaps could you try to see if page was scrolled before to jump
    > then after the jump re-scroll it to its previous position ?
    >
    > <script type="text/javascript">
    > function rePlace() {
    > var posy = window.pageYOffset? window.pageYOffset : document.body.scrollTop;
    > setTimeout('scrollTo(0,'+posy+')',0);
    > }
    > </script>
    >
    > <a href="#test" onclick="rePlace()">go to "test"</a>
    >
    > In your CSS, as overflow-y:auto; isn't recognize in all browsers
    > prefer overflow: auto;
    >
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date
    , Jan 15, 2007
    #5
  6. ASM Guest

    a écrit :
    > Thanks for the suggestion. I tried it but it is quite a jerky
    > operation, scrolling one way and then back again. It woulld be nice to
    > find a better way if possible.


    It is quite the same feature as given previously.

    Other way could be to scroll the overflow, if you know exactly how much
    pixels to slide down.
    Personally I can't calculate this, because user can ask to its browser
    to display text bigger than original size.


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Jan 15, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. stan
    Replies:
    0
    Views:
    433
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    707
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    164
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    283
    Martin Honnen
    Jun 26, 2005
  5. Replies:
    0
    Views:
    114
Loading...

Share This Page