faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

33 of 65 people (51%) answered Yes
Recently 4 of 10 people (40%) answered Yes

Entry

(How) can I scroll content in a <div> (something like 'scrollTo' for win+doc)

Nov 29th, 2001 12:42
Dave Pedowitz, Janos Smith,


Here's a little step by step I did, hope this helps
PART 1 OF 4
<-- the following code is for the dhtml function : should go within the 
<head> tag -->
<!-- begin DHTML tag -->
<script language="JavaScript">
function nsBrowFix(){
if(pageWidth!=innerWidth || pageHeight!=innerHeight){
location.reload()
}
}
if(document.layers) {
pageWidth=innerWidth
pageHeight=innerHeight
window.onresize=nsBrowFix
}
</script>
<script languate="JavaScript">
var n = navigator;
var d = document;
var speed = 40;
var agent = n.userAgent.toLowerCase();
var tid, b;
//Browser sniff hash obj
var sniff = {
bw: {
ns:d.layers,
ie:d.all && !d.getElementById,
ie4:agent.indexOf("msie 4.") != -1,
ie5:agent.indexOf("msie 5.") != -1,
ie6:agent.indexOf("msie 6.") != -1,
dom:d.getElementById,
ns6:d.getElementById && agent.indexOf("gecko") != -1
},
os: {
win:agent.indexOf("win") != -1,
mac:agent.indexOf("mac") != -1
}
}; 
var distance = (sniff.os.mac && sniff.bw.ns6 || sniff.os.win && 
sniff.bw.ie4)?5:(sniff.os.mac && sniff.bw.ns)?6:4; 
function createScrollerObj(lyr1, lyr2) {
this.container = {
obj:(sniff.bw.ns)?d[lyr1]:sniff.bw.ie?d.all[lyr1]:d.getElementById
(lyr1),
css:(sniff.bw.ns)?d[lyr1]:sniff.bw.ie?d.all[lyr1].style:d.getElementById
(lyr1).style,
height:(sniff.bw.ns)?d[lyr1].clip.height:sniff.bw.ie?d.all
[lyr1].offsetHeight:d.getElementById(lyr1).offsetHeight
};
this.content = {
obj:(sniff.bw.ns)?d[lyr1].document[lyr2]:sniff.bw.ie?d.all
[lyr2]:d.getElementById(lyr2),
css:(sniff.bw.ns)?d[lyr1].document[lyr2]:sniff.bw.ie?d.all
[lyr2].style:d.getElementById(lyr2).style,
height:(sniff.bw.ns)?d[lyr1].document[lyr2].clip.height:sniff.bw.ie?
d.all[lyr2].offsetHeight:d.getElementById(lyr2).offsetHeight,
move:moveLyr,
top:0
};
this.prop = {
dif:this.container.height - this.content.height
};
return this;
} 
//move something
function moveLyr(x, y) {
this.css.left = x;
this.css.top = y;
} 
function scrollDown(num) {
var obj = (eval("scroller" + num));
b = true;
if (obj.container.height < obj.content.height) {
obj.content.move(0, (parseInt(obj.content.top) - distance));
if (parseInt(obj.content.top) >= parseInt(obj.prop.dif)) {
tid = setTimeout("scrollDown('" + num + "')", speed);
}
obj.content.top = parseInt(obj.content.top) - distance;
} else {
stop();
}
} 
function scrollUp(num) {
var obj = (eval("scroller" + num));
b = true;
if(parseInt(obj.content.top) != 0) {
obj.content.move(0, (parseInt(obj.content.top) + distance));
obj.content.top = parseInt(obj.content.top) +distance;
tid = setTimeout("scrollUp('" + num + "')", speed);
}
} 
function stopScroll() {
clearTimeout(tid);
b = false
} 
function createObj() {
scroller1 = new createScrollerObj('divContainer', 'divContent');
}
</script>
<!-- end DHTML tag -->
PART 3 OF 4
<!-- Add the following between the <head> tags -->
<style type="text/css">
#divUpControl{position:absolute; left:10; top:55;}
#divDownControl{position:absolute; left:10; top:320;}
#divContainer{position:absolute; width:320; height:240; 
overflow:hidden; top:80; left:10; clip:rect(0,320,240,0); 
visibility:visible;}
#divContent{position:absolute; top:0; left:0}
</style>
PART 3 OF 4
<!-- Be sure that the <body> tag of your page includes the following -->
<body onLoad="createObj()"> 
PART 4 OF 4
<!-- place the following code directly below the <body> tag before any 
other content -->
<!-- begin absolutely positioned scrollable area object -->
<div id="divUpControl">
<a href="#" onMouseOver="scrollUp('1')" onMouseOut="stopScroll()">
[scroll up]</a><br>
</div>
<div id="divDownControl">
<a href="#" onMouseOver="scrollDown('1')" onMouseOut="stopScroll()">
[scroll down]</a><br>
</div>
<div id="divContainer">
<div id="divContent">
<!-- This is where the scrolling content would go -->
Scroll Area Content Start<br>
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam 
nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam erat 
volupat.<br> 
Et harumd dereud facilis est er expedit distinct. Nam liber a tempor 
cum soluta nobis eligend optio comque nihil quod a impedit anim id quod 
maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor 
repellend. Temporem autem quinsud et aur office debit aut tum rerum 
necesit atib saepe eveniet ut er repudiand sint et molestia non este 
recusand.<br> 
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam 
nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam erat 
volupat.<br> 
Et harumd dereud facilis est er expedit distinct. Nam liber a tempor 
cum soluta nobis eligend optio comque nihil quod a impedit anim id quod 
maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor 
repellend. Temporem autem quinsud et aur office debit aut tum rerum 
necesit atib saepe eveniet ut er repudiand sint et molestia non este 
recusand.<br> 
Scroll Area Content End
</div></div> 
<!-- end absolutely positioned scrollable area object -->