Page 1 of 1

scrolling an element

Posted: Thu Aug 04, 2005 2:38 pm
by s.dot
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?

Posted: Thu Aug 04, 2005 4:50 pm
by feyd
of course it is.. nest two divs, one div has the size and overflow settings, the second is positioned inside the first..

Posted: Fri Aug 05, 2005 12:08 am
by s.dot
so this should work:

Code: Select all

<td width="75%" height="300" valign="top">
<div height="100%" width="100%" style="overflow: auto;"><div id="chattext"></div></div></td>
but.... it doesn't

the contents are being placed inside the inner div

Posted: Fri Aug 05, 2005 12:53 am
by feyd
I do believe I got my wires crossed, I was talking about something entirely different.. however the basics remain.. a correctly sized div (one with layout) and the overflow set correctly (it requires different settings for Mozilla versus IE)..

Posted: Fri Aug 05, 2005 12:57 am
by Burrito
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>

Posted: Fri Aug 05, 2005 12:57 am
by s.dot
I figured it out. Apparently <div height="300"> does not work (at least what I'm trying) but <div style="height: 300px;"> does work.

I'm not too familiar using divs, so perhaps this is the standard.

Posted: Fri Aug 05, 2005 1:08 am
by s.dot
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

Code: Select all

document.scrollTo(0,document.getElementById("chattext").offsetHeight);
I know I'm on the right track.. just not too good with JS

Posted: Fri Aug 05, 2005 1:19 am
by Burrito
look at the scrollIntoView() method.

you also might need to create a child text node and append it to your div...I had to do that when doing something similar to what you're trying to achieve.

Posted: Fri Aug 05, 2005 1:34 am
by s.dot
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.

Posted: Fri Aug 05, 2005 3:31 am
by s.dot
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);
}

Posted: Fri Aug 05, 2005 2:26 pm
by The Monkey
I believe newDiv.scrollIntoView() will work in Firefox. I have not tested it out in IE, however.

Posted: Fri Aug 05, 2005 3:18 pm
by s.dot
wow, that's beautiful.

Works in mozilla and ie

and the hours I spent playing around with scrollTop,scrollLeft,scrollRight,offsetHeight etc :(

Posted: Fri Aug 05, 2005 4:14 pm
by The Monkey
scrotaye wrote:wow, that's beautiful.

Works in mozilla and ie

and the hours I spent playing around with scrollTop,scrollLeft,scrollRight,offsetHeight etc :(
I know... the blessed sense of relief when you finally fix a bug like that is awesome :)

Posted: Fri Aug 05, 2005 6:35 pm
by s.dot
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. :P.