scrolling issue. pleeeezzzz help...

Discussion in 'Javascript' started by Mel, Mar 23, 2005.

  1. Mel

    Mel Guest

    i have the following code and need to scroll the div to the bottom on each
    of the inserts.

    please help *&^%$#@

    <a href=# onclick="addtext('Wed Mar 23 11:23:58 AM Eastern Standard Time
    2005<BR>');">
    <b>HELLO</b>
    </a>
    <div id=MyDiv style=height:200;overflow:auto class=normal style="border:1px
    CCCCCC solid">
    </div>
    <script>

    <!--- Hide script from browsers that don't understand JavaScript

    function addtext(string) {
    var c = new Date();
    oDiv = document.getElementById("MyDiv");
    oDiv.innerHTML = oDiv.innerHTML + string;
    self.scroll(0, 50000);
    }

    addtext('1111595039<BR>');
    addtext('1111595040<BR>');
    addtext('1111595041<BR>');
    addtext('1111595042<BR>');
    addtext('1111595043<BR>');
    addtext('1111595044<BR>');
    addtext('1111595045<BR>');
    addtext('1111595046<BR>');
    addtext('1111595047<BR>');
    addtext('1111595048<BR>');
    addtext('1111595049<BR>');
    addtext('1111595050<BR>');
    addtext('1111595051<BR>');
    addtext('1111595052<BR>');
    addtext('1111595053<BR>');
    addtext('1111595054<BR>');
    // End hiding -->
    </script>
     
    Mel, Mar 23, 2005
    #1
    1. Advertising

  2. Mel

    kaeli Guest

    In article <42419a0e$>, enlightened
    us with...
    > i have the following code and need to scroll the div to the bottom on each
    > of the inserts.
    >
    > please help *&^%$#@
    >


    Tested in MSIE6 and Firefox 1.0

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    </head>

    <body>
    <a href=# onclick="addtext('Wed Mar 23 11:23:58 AM Eastern Standard Time 2005
    <BR>');">
    <b>HELLO</b>
    </a>
    <div id="MyDiv" style="width:400px;height:100px;overflow:scroll;border:1px
    CCCCCC solid">
    </div>
    <script type="text/javascript">
    function addtext(string)
    {
    var c = new Date();
    oDiv = document.getElementById("MyDiv");
    oDiv.innerHTML = oDiv.innerHTML + string;
    oDiv.scrollTop = oDiv.scrollHeight;
    }

    addtext('1111595039<BR>');
    addtext('1111595040<BR>');
    addtext('1111595041<BR>');
    addtext('1111595042<BR>');
    addtext('1111595043<BR>');
    addtext('1111595044<BR>');
    addtext('1111595045<BR>');
    addtext('1111595046<BR>');
    addtext('1111595047<BR>');
    addtext('1111595048<BR>');
    addtext('1111595049<BR>');
    addtext('1111595050<BR>');
    addtext('1111595051<BR>');
    addtext('1111595052<BR>');
    addtext('1111595053<BR>');
    addtext('1111595054<BR>');
    // End hiding -->
    </script>

    </body>
    </html>

    --
    --
    ~kaeli~
    A chicken crossing the road is poultry in motion.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Mar 23, 2005
    #2
    1. Advertising

  3. kaeli wrote:
    > In article <42419a0e$>, enlightened
    > us with...
    >
    >>i have the following code and need to scroll the div to the bottom on each
    >>of the inserts.
    >>
    >>please help *&^%$#@
    >>

    >
    >
    > Tested in MSIE6 and Firefox 1.0
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <head>
    > <title> New Document </title>
    > </head>
    >
    > <body>
    > <a href=# onclick="addtext('Wed Mar 23 11:23:58 AM Eastern Standard Time 2005
    > <BR>');">
    > <b>HELLO</b>
    > </a>
    > <div id="MyDiv" style="width:400px;height:100px;overflow:scroll;border:1px
    > CCCCCC solid">
    > </div>
    > <script type="text/javascript">
    > function addtext(string)
    > {
    > var c = new Date();
    > oDiv = document.getElementById("MyDiv");
    > oDiv.innerHTML = oDiv.innerHTML + string;
    > oDiv.scrollTop = oDiv.scrollHeight;
    > }


    Now the challenge is to only scroll to the bottom if the div is already
    at the bottom when the new text is added.

    Ie, if the user has used the mouse to look back at the history, the div
    just grows without changing the scrolling position.

    A nice feature which I've tried in the past and never got exactly right!
     
    ExGuardianReader, Mar 25, 2005
    #3
  4. Mel

    kaeli Guest

    In article <d21b27$5vm$>, enlightened
    us with...
    >
    > Now the challenge is to only scroll to the bottom if the div is already
    > at the bottom when the new text is added.
    >
    > Ie, if the user has used the mouse to look back at the history, the div
    > just grows without changing the scrolling position.
    >
    > A nice feature which I've tried in the past and never got exactly right!
    >
    >


    I think for that you'd have to use clipping, similar to the scroller in the
    link below, since you'd need to know the current position of things, when
    things were changed by the user, and where the bottom is (that's the most
    important part and I couldn't find a way to get whether something was at the
    bottom without using this method).
    More complicated, but quite possible.

    http://www.quirksmode.org/js/layerscroll.html


    --
    --
    ~kaeli~
    If God dropped acid, would he see people?
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Mar 25, 2005
    #4
    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. Replies:
    2
    Views:
    774
    Joshua Cranmer
    Mar 13, 2007
  2. John

    Scrolling Issue

    John, Sep 8, 2008, in forum: Javascript
    Replies:
    0
    Views:
    106
  3. John

    Scrolling Issue

    John, Sep 8, 2008, in forum: Javascript
    Replies:
    4
    Views:
    114
  4. Replies:
    2
    Views:
    138
  5. TK
    Replies:
    0
    Views:
    127
Loading...

Share This Page