Scrolling Code Adjustment

welshdragon

04-07-2011, 04:42 PM

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_academy21/atalantaradio.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? :(

bullant

04-08-2011, 12:56 AM

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.

<!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>

welshdragon

04-08-2011, 11:10 AM

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. :thumbsup:

bullant

04-09-2011, 09:28 AM

you're welcome :)