PDA

View Full Version : SOLVED:attaching a scroll bar to a div tag?



slammer
July 20th, 2005, 04:18 PM
hey, not sure if this should be in the DOM section or in here, so sorry if its in the wrong place. I have dynamic data being put into a div tag, using innerhtml and this is updated via xmlhttprequest. I need to be able to make this area of text scrollable, as there is a text box below that i need to stay in position and not get bumped down below. Not sure if its possible to attach a scroll bar to a div tag? i really dont want to use iframes for this. also if this is possible, i need to have the scrollbars default position at the bottom. so that it will always show the bottom of the text and you can scroll to the top if u wish to.

I hope someone can help me out here.

Thanks
Slammer

vwphillips
July 20th, 2005, 04:30 PM
in the style class
overflow:auto;

or in JavaScript
or style.overflow='auto';


assums width and height have been assigned

slammer
July 20th, 2005, 04:44 PM
works perfectly! :D buuuuuut, how do i make it always stay with it fully scrolled to the bottom? :S

Beagle
July 20th, 2005, 05:17 PM
in javascript:

mydiv.scrollTop = mydiv.scrollHeight;

But that only keeps it scrolled down, I haven't been able to get it to start in the fully scrolled position.

Johnny Lang
July 20th, 2005, 05:23 PM
.....

slammer
July 20th, 2005, 05:30 PM
i dont need it to be visually scrolling johnny, i just need it to display the scroll bar, which ive got working, but have it fully scrolled as default, so the user has the option of scrolling to the top if they wish, but it is default to fully scrolled.

vwphillips
July 20th, 2005, 06:00 PM
Johnny Langs script is easily modified to appear if the div is fully scrolled to begin with



<HTML>
<Head>
<Script Language=JavaScript>

var n = 0;
var currPos = 0;
var newPos = 1;
var isDiv = "";


function startScroll(){
if (newPos > currPos){
currPos = isDiv.scrollTop;
isDiv.scrollTop = 500;
newPos = isDiv.scrollTop;
startScroll();
}
}

function toBottom(){
isDiv = document.getElementById('div1');
isDiv.scrollTop = 0;
startScroll();
}

window.onload=toBottom;

</Script>
</Head>
<Body>
<Div id='div1' style='overflow:auto;border:solid black 1px;height:200px;width=350px;padding:10px;padding-bottom:10px;text-align:justify'>
U.S. Census 2000 pegged Lakewood's population at 56,646. This tally represents a 5.1% DECREASE from 1990. Lakewood is the 14th largest city in Ohio and second largest suburb in Cuyahoga County. 21% of Lakewood's population is under age 18. In racial/ethnic categories census figures show: 52,723 White (93%); 1,116 Black (1.9%); 139 American Indian; 815 Asian; 349 other; 1,504 multi-racial; 1,269 Hispanic. The 1999 effective residential property tax is $77.67 per $1,000 of tax valuation. Cuyahoga County assesses residential property at 35% of the current market value. The average sale price for a home in Lakewood for 1999, the latest year for which data is available, was $121,200. The income tax rate is 1.5%. U.S. Census 2000 pegged Lakewood's population at 56,646. This tally represents a 5.1% DECREASE from 1990. Lakewood is the 14th largest city in Ohio and second largest suburb in Cuyahoga County. 21% of Lakewood's population is under age 18.
</Div>

</Body>
</HTML>

slammer
July 20th, 2005, 06:15 PM
got it working now, thanks for your help :)