QuestionAsk Questions?
View Answers
May 22, 2008 at 7:37 PM
hi,
<html>
<head>
<title>div and scrollbar</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<script language="JavaScript">
var scroll, scroll1, isIE4, isNN4, isIE6CSS;
// Initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
if (document.images) {
scroll = (document.body && document.body.style) ? true : false;
scroll1 = (scroll && document.getElementById) ? true : false;
isIE4 = (scroll && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
}
}
// Set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
}
// into a valid element object reference
function getRawObject(obj) {
var theObj;
if (typeof obj == "string") {
if (scroll1) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
}
function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && scroll) {
theObj = theObj.style;
}
return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if (theObj) {
if (scroll) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
}
<html>
<head>
<title>div and scrollbar</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<script language="JavaScript">
var scroll, scroll1, isIE4, isNN4, isIE6CSS;
// Initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
if (document.images) {
scroll = (document.body && document.body.style) ? true : false;
scroll1 = (scroll && document.getElementById) ? true : false;
isIE4 = (scroll && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
}
}
// Set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
}
// into a valid element object reference
function getRawObject(obj) {
var theObj;
if (typeof obj == "string") {
if (scroll1) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
}
function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && scroll) {
theObj = theObj.style;
}
return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if (theObj) {
if (scroll) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
}
May 22, 2008 at 7:38 PM
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
var theObj = getObject(obj);
if (theObj) {
if (scroll) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
}
// Set the background color of an object
function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (scroll) {
theObj.backgroundColor = color;
}
}
}
// Set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
}
// Set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
}
function shiftBy(obj, deltaX, deltaY) {
var theObj = getObject(obj);
if (theObj) {
if (scroll) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
}
// Set the background color of an object
function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (scroll) {
theObj.backgroundColor = color;
}
}
}
// Set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
}
// Set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
}
May 22, 2008 at 7:38 PM
function getObjectTop(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element's clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element's clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
}
</script>
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element's clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element's clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
}
</script>
May 22, 2008 at 7:39 PM
<script language="JavaScript">
var scrollEngaged = false;
var scrollInterval;
var scrollBars = new Array();
function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleAttr];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "");
return compStyle.getPropertyValue(CSSStyleAttr);
}
return "";
}
function scrollBar(ownerID, ownerContentID, upID, dnID) {
this.ownerID = ownerID;
this.ownerContentID = ownerContentID;
this.index = scrollBars.length;
this.upButton = document.getElementById(upID);
this.dnButton = document.getElementById(dnID);
this.upButton.index = this.index;
this.dnButton.index = this.index;
this.ownerHeight = parseInt(getElementStyle(this.ownerID, "height", "height"));
this.contentElem = document.getElementById(ownerContentID);
this.contentFontSize = parseInt(getElementStyle(this.ownerContentID,
"fontSize", "font-size"));
this.contentScrollHeight = (this.contentElem.scrollHeight) ?
this.contentElem.scrollHeight : this.contentElem.offsetHeight;
this.initScroll = initScroll;
}
function initScroll() {
this.upButton.onmousedown = handleScrollClick;
this.upButton.onmouseup = handleScrollStop;
this.upButton.oncontextmenu = blockEvent;
this.dnButton.onmousedown = handleScrollClick;
this.dnButton.onmouseup = handleScrollStop;
this.dnButton.oncontextmenu = blockEvent;
var isIEMac = (navigator.appName.indexOf("Explorer") != -1 && navigator.userAgent.indexOf("Mac") != -1);
if (!isIEMac) {
document.getElementById("innerWrapper0").style.overflow = "hidden";
}
}
function handleScrollStop() {
scrollEngaged = false;
}
function blockEvent(evt) {
evt = (evt) ? evt : event;
evt.cancelBubble = true;
return false;
}
function handleScrollClick(evt) {
var fontSize;
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var index = target.index;
fontSize = scrollBars[index].contentFontSize;
fontSize = (target.className == "lineup") ? fontSize : -fontSize;
scrollEngaged = true;
scrollBy(index, parseInt(fontSize));
scrollInterval = setInterval("scrollBy(" + index + ", " +
parseInt(fontSize) + ")", 100);
evt.cancelBubble = true;
return false;
}
function scrollBy(index, px) {
var scroller = scrollBars[index];
var elem = document.getElementById(scroller.ownerContentID);
var top = parseInt(elem.style.top);
var scrollHeight = parseInt(scroller.contentScrollHeight);
var height = scroller.ownerHeight;
if (scrollEngaged && top + px >= -scrollHeight + height && top + px <= 0) {
shiftBy(elem, 0, px);
} else {
clearInterval(scrollInterval);
}
}
</script>
var scrollEngaged = false;
var scrollInterval;
var scrollBars = new Array();
function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleAttr];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "");
return compStyle.getPropertyValue(CSSStyleAttr);
}
return "";
}
function scrollBar(ownerID, ownerContentID, upID, dnID) {
this.ownerID = ownerID;
this.ownerContentID = ownerContentID;
this.index = scrollBars.length;
this.upButton = document.getElementById(upID);
this.dnButton = document.getElementById(dnID);
this.upButton.index = this.index;
this.dnButton.index = this.index;
this.ownerHeight = parseInt(getElementStyle(this.ownerID, "height", "height"));
this.contentElem = document.getElementById(ownerContentID);
this.contentFontSize = parseInt(getElementStyle(this.ownerContentID,
"fontSize", "font-size"));
this.contentScrollHeight = (this.contentElem.scrollHeight) ?
this.contentElem.scrollHeight : this.contentElem.offsetHeight;
this.initScroll = initScroll;
}
function initScroll() {
this.upButton.onmousedown = handleScrollClick;
this.upButton.onmouseup = handleScrollStop;
this.upButton.oncontextmenu = blockEvent;
this.dnButton.onmousedown = handleScrollClick;
this.dnButton.onmouseup = handleScrollStop;
this.dnButton.oncontextmenu = blockEvent;
var isIEMac = (navigator.appName.indexOf("Explorer") != -1 && navigator.userAgent.indexOf("Mac") != -1);
if (!isIEMac) {
document.getElementById("innerWrapper0").style.overflow = "hidden";
}
}
function handleScrollStop() {
scrollEngaged = false;
}
function blockEvent(evt) {
evt = (evt) ? evt : event;
evt.cancelBubble = true;
return false;
}
function handleScrollClick(evt) {
var fontSize;
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var index = target.index;
fontSize = scrollBars[index].contentFontSize;
fontSize = (target.className == "lineup") ? fontSize : -fontSize;
scrollEngaged = true;
scrollBy(index, parseInt(fontSize));
scrollInterval = setInterval("scrollBy(" + index + ", " +
parseInt(fontSize) + ")", 100);
evt.cancelBubble = true;
return false;
}
function scrollBy(index, px) {
var scroller = scrollBars[index];
var elem = document.getElementById(scroller.ownerContentID);
var top = parseInt(elem.style.top);
var scrollHeight = parseInt(scroller.contentScrollHeight);
var height = scroller.ownerHeight;
if (scrollEngaged && top + px >= -scrollHeight + height && top + px <= 0) {
shiftBy(elem, 0, px);
} else {
clearInterval(scrollInterval);
}
}
</script>
May 22, 2008 at 7:39 PM
<script type="text/javascript">
function initScrollers() {
scrollBars[0] = new scrollBar("outerWrapper0", "innerWrapper0", "lineup0","linedown0");
scrollBars[0].initScroll();
}
</script>
</head>
<body style="height:400px" onload="initDHTMLAPI(); initScrollers()">
<h1><center>Div using scrollbar example</center></h1>
<hr/>
<div id="pseudoWindow0" style="position:absolute; top:100px; left:45%">
<div id="outerWrapper0" style="position:absolute; top:0px; left:0px;
height:150px; width:200px; overflow:hidden; border-top:4px solid #666666;
border-left:4px solid #666666; border-right:4px solid #cccccc;
border-bottom:4px solid #cccccc; background-color:#ffffff">
<div id="innerWrapper0" style="position:absolute; top:0px; left:0px; padding:5px;
font:10px Arial, Helvetica, sans-serif">
<p style="margin-top:0em"> In jsp when we have to create a method or variable we usually declare it inside the declaration tag. If we declare it inside the declaration directive then then the scope of the variables will be applicable in the whole page. This works like a instance variable. <em id="myem">dolore</em>
Now consider a situation where we have to declare a variable as local, then we should declare the methods and variables in tag except the declaration directive. In this example we are declaring a variable in the scriptlet directive, so the scope of the variable remains upto the scriptlet directive itself. To print the variable on the browse we will use the out implicit object.
</p>
</div>
</div>
<img id="lineup0" class="lineup" src="scrollUp.gif" height="16" width="16"
alt="Scroll Up" style="position:absolute; top:10px; left:212px" />
<img id="linedown0" class="linedown" src="scrollDn.gif" height="16" width="16"
alt="Scroll Down" style="position:absolute; top:128px; left:212px" />
</div>
</body>
</html>
function initScrollers() {
scrollBars[0] = new scrollBar("outerWrapper0", "innerWrapper0", "lineup0","linedown0");
scrollBars[0].initScroll();
}
</script>
</head>
<body style="height:400px" onload="initDHTMLAPI(); initScrollers()">
<h1><center>Div using scrollbar example</center></h1>
<hr/>
<div id="pseudoWindow0" style="position:absolute; top:100px; left:45%">
<div id="outerWrapper0" style="position:absolute; top:0px; left:0px;
height:150px; width:200px; overflow:hidden; border-top:4px solid #666666;
border-left:4px solid #666666; border-right:4px solid #cccccc;
border-bottom:4px solid #cccccc; background-color:#ffffff">
<div id="innerWrapper0" style="position:absolute; top:0px; left:0px; padding:5px;
font:10px Arial, Helvetica, sans-serif">
<p style="margin-top:0em"> In jsp when we have to create a method or variable we usually declare it inside the declaration tag. If we declare it inside the declaration directive then then the scope of the variables will be applicable in the whole page. This works like a instance variable. <em id="myem">dolore</em>
Now consider a situation where we have to declare a variable as local, then we should declare the methods and variables in tag except the declaration directive. In this example we are declaring a variable in the scriptlet directive, so the scope of the variable remains upto the scriptlet directive itself. To print the variable on the browse we will use the out implicit object.
</p>
</div>
</div>
<img id="lineup0" class="lineup" src="scrollUp.gif" height="16" width="16"
alt="Scroll Up" style="position:absolute; top:10px; left:212px" />
<img id="linedown0" class="linedown" src="scrollDn.gif" height="16" width="16"
alt="Scroll Down" style="position:absolute; top:128px; left:212px" />
</div>
</body>
</html>
Related Pages:
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
