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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow Scrolling Code Adjustment

    Firstly, can I just say I'm a new poster and hope this is in the right place. Also, when reading the problem please keep in mind everything I know about html java etc is self taught so I'm sure there are giant gaps in my knowledge of the subject.

    I'm trying to create a scrolling vertical typwriter code. The important features are:
    - Must scroll vertically
    - Text must appear 1 letter at a time
    - When a line has been typed it must scroll up 1 line space to allow the next line to be typed
    - When the box is full of typed lines, the box must stay focused on the bottom.

    For instance, I've found elsewhere on the web something similar but each line appears and when the box is full of typed lines, it stays fixed on the top. Despite a scrollbar coming up on the side. This isn't much use as I want the user to see the most recently typed line not the 1st lines.

    Again, I've found elsewhere one that does all this except it extends the size of the box instead of scrolling.

    I have got 2 versions so far but neither match what I want entirely and I'm struggling to get them that last bit.

    http://www.freewebs.com/football_aca...lantaradio.htm

    The 1st one (green box) is good except when the box is full it clears and continues in a fresh box. I want it to scroll as said above, not to do this. This is java script I got and edited from elsewhere.

    The 2nd one is the grey box at the bottom and is one I've written in html code myself after reading up on various things. This isn't typewriter and doesn't jump up a line at a time. It is a smooth continuous scroll that I've added pauses to to simulate jumping each line. This one is in fact the old one I'm trying to replace because if you watch it long enough, it starts jumping half lines instead.

    Can anyone help? Or am I a lost cause?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Something like this?

    Text is "typed" 1 char at a time line by line starting at the top. When the textarea is full, it automatically scrolls up 1 line showing the next typed line on the bottom.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #scrn {
                    margin: 30px auto 20px auto;
                    padding: 10px 10px 10px 10px;
                    border: 15px inset green;
                    overflow: auto;
                    line-height: 1.5em;
                }
                #btnPause {
                    width: 100px;
                }
            </style>
            <script type = "text/javascript">
                var str = "This line 1\nThis line 2\nThis line 3\nThis line 4\nThis line 5\nThis line 6\nThis line 7\nThis line 8\nThis line 9\nThis line 10\nThis line 11\nThis line 12\nThis line 13\nThis line 14\nThis line 15\n";
                var curChar = 0;
                var timer;
                function startScroll(){
                    oScrn.value += str.charAt(curChar);
                    oScrn.scrollTop = oScrn.scrollHeight;
                    if(++curChar > str.length){clearInterval(timer);}
                }
                window.onload=function(){
                    oScrn = document.getElementById('scrn');
                    timer = setInterval(startScroll,100);
                    document.getElementById('btnPause').onclick=function(){
                        if(timer){
                            clearInterval(timer);
                            timer = false;
                        } else {
                            timer = setInterval(startScroll,100);
                        }
                        this.innerHTML = (this.innerHTML == 'Pause')? 'Continue' : 'Pause';
                    }
                }
            </script>
        </head>
        <body>
            <textarea id="scrn" readonly="readonly" cols="50" rows="5"></textarea>
            <div>
                <button id="btnPause">Pause</button>
            </div>
        </body>
    </html>
    Last edited by bullant; 04-08-2011 at 02:36 AM.

  • Users who have thanked bullant for this post:

    welshdragon (04-08-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Fantastic, thanks very much. I posted on other coding forums and so far they've either not replied or not come up with a solution that matches the request, so many thanks.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Tags for this Thread

    Posting Permissions

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