PDA

View Full Version : How to get scrollbar in <div>?

kippie
08-14-2002, 02:47 PM
In the HTML below the text for layer2 is too big for the dimensions of the <div>. Is it possible to make it so that automatically a scrollbar appears if the text is too big for the <div> and the <div> itself keeps the same size?

This it the HTM:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Welcome to Adobe GoLive 4</title>
<style type="text/css"><!--
#layer1 { background-color: #C0C0C0; position: absolute; top: 100px; left: 200px; width: 100px; height: 100px; visibility: hidden }
#layer2 { background-color: #FFA07A; position: absolute; top: 100px; left: 200px; width: 100px; height: 100px; visibility: hidden }
#layer3 { background-color: #F0E68C; position: absolute; top: 100px; left: 200px; width: 100px; height: 100px; visibility: hidden }
#layer4 { background-color: #1E90FF; position: absolute; top: 100px; left: 200px; width: 100px; height: 100px; visibility: hidden }-->
</style>
<script language="JavaScript">
<!--
lastone='empty';
function showIt(lyr)
{
if (lastone!='empty') lastone.style.visibility='hidden';
lastone=document.getElementById(lyr);
lastone.style.visibility='visible';
}
//-->
</script>

</head>

<body onload="showIt('layer1')">
<span>Pick a layer:<br />
<a href="JavaScript:;" onClick="showIt('layer1')" >layer1</a>
<a href="JavaScript:;" onClick="showIt('layer2')"> layer2</a>
<a href="JavaScript:;" onClick="showIt('layer3')"> layer3</a>
<a href="JavaScript:;" onClick="showIt('layer4')"> layer4</a>
</span>
<div id="layer1">
This is layer1</div>
<div id="layer2">
This is layer 2, This is layer 2, This is layer 2, This is layer 2, This is layer 2, This is layer 2, This is layer 2, This is layer 2, This is layer 2</div>
<div id="layer3">
This is layer 3</div>
<div id="layer4">
This is layer 4</div>

</body>
</html>
beetle
08-14-2002, 02:59 PM
Ya, just add this to the style:

overflow: auto;

BTW, this is a CSS question FYI. :D
Squintz
08-14-2002, 03:23 PM
what are all the possible paramaters for Overflow:

The one im lloking for is to make the scroll bar apear all the time
kippie
08-14-2002, 03:30 PM
Thanks Beetle
Kippie
Squintz
08-14-2002, 03:37 PM
one more thing on this topic...If i want to change the color of the scollbar in on div only what is the code and where would i put it...Im using a external CSS to format my page
beetle
08-14-2002, 03:42 PM
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/overflow.asp

visible, scroll, hidden, auto

I'm sure there's also a reference on www.w3.org, but I always get lost at that site...
beetle
08-14-2002, 03:45 PM
Just attach all the scrollbar styles to the div directly, or via a valid CSS selector

div#myDiv { scrollbar-arrow-color: #FFF; overflow: scroll; }

<div id="myDiv">This div has white arrows on it's scrollbars</div>
x_goose_x
08-14-2002, 03:46 PM
I don't think you can with overflow, the whole concept behind it is when the html within the div is larger than the div itself ie: overflowing over the edges of the box.
But you can try something like this:


<html>

<head>

<script>

function loader() {
h = parseInt(document.getElementById("temp").style.height);
y = parseInt(document.getElementById("temp").scrollHeight);
if (h>y) {
document.getElementById("temp").innerHTML += "<br>";
setTimeout("loader()",1);
}
}

</script>

</head>

<body onload="loader();">

<div style="background-color: red; width: 150; height: 300; overflow: auto;" id="temp">111<div>

</body>

</html>
beetle
08-14-2002, 04:03 PM
Originally posted by x_goose_x
I don't think you can with overflow, What?? Just set { overflow: scroll; } and the scrollbars will ALWAYS appear, if if there is nothing in the div.
x_goose_x
08-14-2002, 04:05 PM
I stand corrected. But still feel free to use my elaborate waste of script.
beetle
08-14-2002, 04:10 PM
Hehe, no prob x_goose_x. I will say this, however, I believe your method (or something similar) would work if you wanted just the x or just the y scrollbar to always appear, because overflow:scroll forces BOTH scrollbars. :D