Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa Java-Beginners div to scrollbar
Login         

View Questions and Answers by Category

Advertisements


 
Have Programming Question? Ask it here!
 
 
 


r
div to scrollbar
5 Answer(s)      6 years and 7 months ago
Posted in : Java Beginners



Advertisement
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)
}
}
}


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);
}


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>


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>


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>


Related Tutorials/Questions & Answers:
div to scrollbar - Java Beginners
vertical scrollbar. for this i am using a css for that div in which i tried to add... who replied my answer.  hi, div and scrollbar html...","linedown0"); scrollBars[0].initScroll(); } Div using scrollbar
scrollbar
scrollbar  I add a scrollbar to my Frame and its not working
Advertisements
Java Scrollbar
Java Scrollbar   What is the difference between a Scrollbar and a ScrollPane
vertical scrollbar but without a horizontal scrollbar
vertical scrollbar but without a horizontal scrollbar  How do I make a frame with a vertical scrollbar but without a horizontal scrollbar
Horizontal Scrollbar
Horizontal Scrollbar  How can I implement a horizontal scrollbar
Scrollbar
Scrollbar       A scrollbar is represented by a "slider" widget. The characteristics of it are specified by integer values which are being set at the time of scrollbar
CSS ScrollBar Properties
CSS ScrollBar Properties  How can i set ScrollBar properties in CSS? I am using HTML, CSS and Div in my code. Thanks!!   overflow: scroll; overflow-y: scroll; overflow-x: scroll; overflow:-moz-scrollbars-vertical
frame with a vertical scrollbar but without a horizontal scrollbar.
frame with a vertical scrollbar but without a horizontal scrollbar.  How do I make a frame with a vertical scrollbar but without a horizontal scrollbar
Horizontal Scrollbar
Horizontal Scrollbar  I am creating a JSF project that has a print("<af:table/>"); the table is too wide to display in the browser. I was wondering if there was anyway to implement a horizontal scrollbar in this table so
scrollbar in JPanel
scrollbar in JPanel  Scroll bar is not working when i am using the panel layout is null. If i change the panel layout to flow or grid its working. I..., JScrollPane.VERTICAL_SCROLLBAR_ALWAYS, JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);f.add(s
menu with scrollbar
menu with scrollbar  I want to use MenuBar with Scrollbar. I tried it. I dont know how to do it. so please help me. The program should be.... 1.add JScrollPane into the panel. 2.Panel layout should be null. 3.Use menubar 4.Each
DIV in HTML
DIV in HTML  What is DIV in HTML
java program:scrollbar
java program:scrollbar  my program logic is that when i scrolling scrollbar according to that the oval shap is changed by fetching the value of scrollbar the oval is drawn please give me a proper code of this logic
scrollbar - applet - Applet
scrollbar - applet  Hi!! It is the program for a vertical scroll bar and the output is (small vertical scrollbar). Suppose if I want a lengthy... ScrollbarDemo extends Applet { public void init() { Scrollbar sb = new
Scrollbar problem with struts <layout:collection>
Scrollbar problem with struts   How activate the vertical scrollbar in struts in mozilla firefox
how to add scrollbar to JFrame
how to add scrollbar to JFrame  hello friends i am making a java application in which i have a frame to which i wanted to add scrollbars but when... it shows the scrollbar but do not show the scrolling tabs here is my code pls do help
how to add scrollbar to JFrame
how to add scrollbar to JFrame  hello friends i am making a java application in which i have a frame to which i wanted to add scrollbars but when... it shows the scrollbar but do not show the scrolling tabs here is my code pls do help
how to add scrollbar to JFrame
how to add scrollbar to JFrame  hello friends i am making a java application in which i have a frame to which i wanted to add scrollbars but when... it shows the scrollbar but do not show the scrolling tabs here is my code pls do help
how to add scrollbar to JFrame
how to add scrollbar to JFrame  hello friends i am making a java application in which i have a frame to which i wanted to add scrollbars but when... it shows the scrollbar but do not show the scrolling tabs here is my code pls do help
how to add scrollbar to JFrame
how to add scrollbar to JFrame  hello friends i am making a java application in which i have a frame to which i wanted to add scrollbars but when... it shows the scrollbar but do not show the scrolling tabs here is my code pls do help
Showing div at the center of the webpage
Showing div at the center of the webpage  Showing div at the center of the webpage
div align left css
div align left css  Hi, How to align the div to left using the css in HTML page. Thanks
class of div tag
class of div tag  How can i recognize the selected DIV class
div background color in html
div background color in html   How to change the background color of DIV in HTML
scrolling div ipad
scrolling div ipad   Please suggest me how to scroll the div in iPad UIWebView? Thanks
div overflow hidden
div overflow hidden  How to make div overflow hidden? Thanks   Hi, Here is the code: <div style="widht:200px; height:600px; overflow:hidden;"> </div> Thanks
indent div css
indent div css  How can i indent with outer and inner margin?  .../answers/viewqa/HTML/17553-indent-div-css.html :Indent DIV in CSS
div style background
div style background  How to add background color to a div? What is the code of div style background?   Hi, You can use the following code: <div style="background-color: #ccffcc;"> <p>Content</p> <
indent div css
Div file in css  How can i indent div with outer and inner margin... it in another div. For example, make the outer div margin: 0 auto; and the inner div.... Indent div in css <html> <head> <title>Indent div
Visibal Certical scrollbar with struts collection layout.
Visibal Certical scrollbar with struts collection layout.  how to Visibal Vertical scroll bar with struts collection layout
div style float right
div style float right  How to align div to right? Share me the code for div style float right. Thanks   Hi, You can use following code: <div style="float: right; widht:300px; height:600px;"> <p>Content<
Advertisements
 

 

 

DMCA.com