creating a "tail" like textarea ?

[Mel]

i need to create a unix like "tail" function on my site.

the question:
the text is displayed in a scrolled area and a new line is added at the
end and the entire text is scrolled down so that user can see the last item
added.

i am trying to avoid displaying an HTML file and have to scroll it down,
since it does not seem to work all the time

any pointer is highly appreciated

 

[kaeli]

i need to create a unix like "tail" function on my site.

the question:
the text is displayed in a scrolled area and a new line is added at the
end and the entire text is scrolled down so that user can see the last item
added.

Is there a reason the user can't find the End key?

End goes to the bottom.
Home goes to the top.
The keys are usually sitting in the middle section of the keyboard, above the
arrows.

If your application doesn't support End and Home, you may want to consider
fixing that. It's easier than coding JS scrolling.

--

 

[Mel]

user want to see the last line and does not have to page down every time a
line is inserted !!!

 

[RobG]

i need to create a unix like "tail" function on my site.

the question:
the text is displayed in a scrolled area and a new line is added at the
end and the entire text is scrolled down so that user can see the last item
added.

[..]

The following is rudimentary, it adds new lines to the top
rather than the bottom (which makes more sense to most users),
and displays a fixed number of entries so the bottom lines are
trimmed off.

If you want it to add to the bottom, that is possible too by
deleting the first element then adding the new one to the end.


<script type="text/javascript">
// Add more elements if a longer tail is required
var tail = new Array(10);
function tailIt(x,y){
tail.unshift(x);
tail.pop();
document.getElementById(y).innerHTML = tail.join('<br>');
}
</script>
<form action="">
<table border="1"><tr><td>
<input type="text" size="30" name="inText">
</td><td>
<input type="button" value="Add to tail" onclick="
tailIt(this.form.inText.value,'outputCell');">
</td><td id="outputCell" style="width: 20em;">
<script type="text/javascript">
document.write(tail.join('<br>'));
</script>
</td>
</tr>
</table>
</form>

 

[Tim Williams]

i need to create a unix like "tail" function on my site.

the question:
the text is displayed in a scrolled area and a new line is added
at the
end and the entire text is scrolled down so that user can see the
last item
added.

Textarea?

http://groups-beta.google.com/group...q=textarea+scroll+javascript#25af73464870f483

Tim

 

[kaeli]

user want to see the last line and does not have to page down every time a
line is inserted !!!

Is the user not adding the lines?
What is creating the text and what element is it in?

Have you looked at the scrollTo function?

--
--
~kaeli~
Murphy's Law #2030: If at first you don't succeed, destroy
all evidence that you tried.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Mel]

i am a newbee in JS

i did look at scrollTo function, but it does not inside a div for whatever
reason

i have :
<DIV id=MYDIV style=overflow:auto>
.....
</DIV>

i modify the contect of the div with javascript apend and that works, but
can not scroll the page down (something like a chat program)

thanks for your help

and as usual, code samples are Greeeeeeeeeeeeeeaaaaaaaaat

 

[Mel]

the problem with this approach is that the user looses the context. he can
not see the entire thing without the scrolling capabilities.

i need to create a unix like "tail" function on my site.

the question:
the text is displayed in a scrolled area and a new line is added at the
end and the entire text is scrolled down so that user can see the last item
added.

[..]

The following is rudimentary, it adds new lines to the top
rather than the bottom (which makes more sense to most users),
and displays a fixed number of entries so the bottom lines are
trimmed off.

If you want it to add to the bottom, that is possible too by
deleting the first element then adding the new one to the end.


<script type="text/javascript">
// Add more elements if a longer tail is required
var tail = new Array(10);
function tailIt(x,y){
tail.unshift(x);
tail.pop();
document.getElementById(y).innerHTML = tail.join('<br>');
}
</script>
<form action="">
<table border="1"><tr><td>
<input type="text" size="30" name="inText">
</td><td>
<input type="button" value="Add to tail" onclick="
tailIt(this.form.inText.value,'outputCell');">
</td><td id="outputCell" style="width: 20em;">
<script type="text/javascript">
document.write(tail.join('<br>'));
</script>
</td>
</tr>
</table>
</form>

 

[Lee]

Mel said:

the problem with this approach is that the user looses the context. he can
not see the entire thing without the scrolling capabilities.

Which is also why you should post your new text *after* a trimmed quote
of the message you're responding to. (and the word is "loses").

 

[kaeli]

i am a newbee in JS

i did look at scrollTo function, but it does not inside a div for whatever
reason

That's because it's for the window object, not a div.

i have :
<DIV id=MYDIV style=overflow:auto>
....
</DIV>

Try this.

document.getElementById("MYDIV").scrollTop = document.getElementById
("MYDIV").scrollHeight;

Not sure how cross-browser that is...


--
--
~kaeli~
If that phone was up your a$$, maybe you could drive a
little better!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[RobG]

the problem with this approach is that the user looses the context. he can
not see the entire thing without the scrolling capabilities.

And top posting does not have the same effect?

Sorry, I was more thinking of head than tail, I prefer to look at the
top of the div to see new stuff rather than the bottom (that's how I
order my mail, news, etc.).

Anyhow, enough excuses, try this (tested in IE and Firefox)


<script type="text/javascript">
var lineNo = 0; // Just a line number
</script>

<form action="">
<table border="1"><tr><td>
<input type="text" size="30" name="inText">
</td><td>

<input type="button" value="Add to tail" onclick="
var t = document.getElementById('outputCell');
t.innerHTML += (lineNo > 0)? '<br>' : '';
t.innerHTML += lineNo + ': ' + this.form.inText.value;
lineNo++;
if ('undefined' != typeof t.scrollTop) {
t.scrollTop = 0;
t.scrollTop = 5000; // some really big number
}
">

</td><td>
<div id="outputCell" style="height: 10em; width: 20em;
overflow: auto;"></div>
</td>
</tr>
</table>
</form>