scrolling an element

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

scrolling an element

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

of course it is.. nest two divs, one div has the size and overflow settings, the second is positioned inside the first..
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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)..
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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>
Last edited by Burrito on Fri Aug 05, 2005 12:57 am, edited 1 time in total.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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);
}
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

Post by The Monkey »

I believe newDiv.scrollIntoView() will work in Firefox. I have not tested it out in IE, however.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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 :(
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

Post 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 :)
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
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.
Post Reply