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>