Add Shadow to div with expanding height
Posted: Thu Sep 22, 2005 7:04 pm
I have a div tag which has changing text. I would like my div tag to have a "shadow" (10 px more wide and taller) however, as the amount of text changes I'm having trouble expanding the height of the shadow....Here I go...
Code: Select all
<style>
.desc_box_visible{
left:340px;
top:300px;
width:500;
z-index:99;
visibility: visible;
position: absolute;
background-color: #ffffff;
border:2px solid #023A6B;
padding:6px;
overflow : auto;
font-size: 11pt;
text-align: left;
}
.desc_bg_vissible{
position:absolute;
visibility: visible;
overflow:hidden;
width:520px;
left:330px;
top:290px;
padding:6px;
background-color: silver;
opacity:.25;
filter: alpha(opacity=25);
-moz-opacity: 0.25;
border:1px solid black;
z-index: 98;
}
</style>
<script language="JavaScript">
function changeText1(){
var divObj = document.getElementById('desc_box');
divObj.innerHTML = 'Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text Lots of Text ';
/*
I've tried divObj.height and divObj.style.height so I can set the height of desc_box_shadow but its isn't working... */
}
function changeText2(){
var divObj = document.getElementById('desc_box');
divObj.innerHTML = 'Not very much Text Not very much Text Not very much Text Not very much Text Not very much Text Not very much Text ';
}
</script>
<a href="javascript:changeText1();">Lots of Text</a><br />
<a href="javascript:changeText2();">Not very much Text</a>
<div id="desc_box" class="desc_box_visible"> </div>
<div id="desc_box_shadow" class="desc_bg_vissible"></div>