scrolling an element
Moderator: General Moderators
scrolling an element
Is it possible to scroll a <div> ?
I'm setting up a chat, that I really don't want to place in an iframe. I can append the contents to the divide layer, but I can't seem to make the div scroll?
Is it possible?
I'm setting up a chat, that I really don't want to place in an iframe. I can append the contents to the divide layer, but I can't seem to make the div scroll?
Is it possible?
so this should work:
but.... it doesn't
the contents are being placed inside the inner div
Code: Select all
<td width="75%" height="300" valign="top">
<div height="100%" width="100%" style="overflow: auto;"><div id="chattext"></div></div></td>the contents are being placed inside the inner div
you actually don't even need two divs to create a scroll bar with a div.
Code: Select all
<div style="position:aboslute;width:200px;height:100px;overflow:auto;background:#FFFFFF;">
this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar this is my div watch me roar
</div>
Last edited by Burrito on Fri Aug 05, 2005 12:57 am, edited 1 time in total.
My final problem for this chat seems to be scrolling to the bottom after a message is appended
when the message is appended using a function, I have tried to also scroll the element to the bottom
I have
I know I'm on the right track.. just not too good with JS
when the message is appended using a function, I have tried to also scroll the element to the bottom
I have
Code: Select all
document.scrollTo(0,document.getElementById("chattext").offsetHeight);document.getElementById("chattext").scrollIntoView(false); worked beautifully for IE.
Muchos gracias!
Now begins the process of making this work in mozilla.
Edit: Perhaps it's worth noting that while I was testing out some features in mozilla, that when you use getElementById() in IE it will grab an element by a name, instead of id if the element id isn't specified. Mozilla will not do that. I had used the elements name instead of ID and that's why a feature wasn't working. I'm sure others have noticed this, but I found it interesting.
Muchos gracias!
Now begins the process of making this work in mozilla.
Edit: Perhaps it's worth noting that while I was testing out some features in mozilla, that when you use getElementById() in IE it will grab an element by a name, instead of id if the element id isn't specified. Mozilla will not do that. I had used the elements name instead of ID and that's why a feature wasn't working. I'm sure others have noticed this, but I found it interesting.
scrollIntoView() doesn't seem to be working in mozilla firefox (although I read that it was supported). Here's what I have:
Code: Select all
function insertMessages(content){
//place the new messages in a div
var newDiv = document.createElement("DIV");
newDiv.innerHTML = content;
//append the messages to the contents
document.getElementById("chattext").appendChild(newDiv);
//scroll the chatContents area to the bottom
document.getElementById("chattext").scrollIntoView(false);
}-
The Monkey
- Forum Contributor
- Posts: 168
- Joined: Tue Mar 09, 2004 9:05 am
- Location: Arkansas, USA
wow, that's beautiful.
Works in mozilla and ie
and the hours I spent playing around with scrollTop,scrollLeft,scrollRight,offsetHeight etc
Works in mozilla and ie
and the hours I spent playing around with scrollTop,scrollLeft,scrollRight,offsetHeight etc
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
-
The Monkey
- Forum Contributor
- Posts: 168
- Joined: Tue Mar 09, 2004 9:05 am
- Location: Arkansas, USA
Indeed it is great.
Then it always leads to the next problem
).
I have my chat in a popup window, the table aligned to the center, and when scrollIntoView() is executed the table is flushed to the left to view the contents that are being scrolled to
is there a workaround?
Edit: This is just acedemic now, as I made the window a full window instead of a popup. It would still be nice to know the answer though.
.
Then it always leads to the next problem
I have my chat in a popup window, the table aligned to the center, and when scrollIntoView() is executed the table is flushed to the left to view the contents that are being scrolled to
is there a workaround?
Edit: This is just acedemic now, as I made the window a full window instead of a popup. It would still be nice to know the answer though.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.