faqts : Computers : Internet : Web : HTML

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

27 of 35 people (77%) answered Yes
Recently 8 of 10 people (80%) answered Yes

Entry

can i create a div with scroll in the top

May 28th, 2003 14:01
Alan Weber, micky csasznik, http://webfx.eae.net/dhtml/syncscroll/demo1.html
 


Check out this demo....  
http://webfx.eae.net/dhtml/syncscroll/demo1.html You can't force the 
scroll bars to the top of a 
div... but you can put a div (with just scroll bars on the bottom) on 
top of the div you want to scroll.... then sync them up with 
Javascript... 
If the link doesn't work, paste this code into a new page... 
btw, I didn't figure this stuff out... but I can copy n paste with the 
best of em ;-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Synchronized Scroll Demo 1</title>
<link rel="StyleSheet" type="text/css" href="../../webfx.css">
<style type="text/css">
div {
	border: 1px solid black;
	padding: 2px;
	position: absolute;
	width: 100px;
	height: 100px;
}
#div1 {
	overflow: auto;
	left: 20px;
	top: 20px;
}
#div2 {
	overflow: hidden;
	left: 20px;
	top: 140px;
}
#div3 {
	overflow: hidden;
	left: 140px;
	top: 20px;
}
#div4 {
	overflow: hidden;
	left: 140px;
	top: 140px;
}
</style>
<script type="text/javascript" src="syncscroll.js"></script>
<script type="text/javascript">
window.onload = function () {
	addScrollSynchronization(document.getElementById("div2"), 
document.getElementById("div1"), "horizontal");
	addScrollSynchronization(document.getElementById("div3"), 
document.getElementById("div1"), "vertical");
	addScrollSynchronization(document.getElementById("div4"), 
document.getElementById("div1"), "both");
};
</script>
</head>
<body>
<div id="div1">
	<nobr>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	Scroll me and see the other divs being updated. Scroll me and 
see the other divs being updated.<br>
	</nobr>
</div>
<div id="div2">
	<nobr>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	This div has synchronized horizontal scrolling with the first 
div. This div has synchronized horizontal scrolling with the first 
div.<br>
	</nobr>
</div>
<div id="div3">
	<nobr>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	This div has synchronized vertical scrolling with the first 
div. This div has synchronized vertical scrolling with the first 
div.<br>
	</nobr>
</div>
<div id="div4">
	<nobr>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	This div has synchronized both vertical and horizontal 
scrolling with the first div.<br>
	</nobr>
</div>
</body>
</html>