Page 1 of 1

Add Shadow to div with expanding height

Posted: Thu Sep 22, 2005 7:04 pm
by hawleyjr
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>

Posted: Thu Sep 22, 2005 7:43 pm
by feyd
an example I wrote for Burrito a few weeks ago, viewtopic.php?t=36648

Posted: Fri Sep 23, 2005 9:06 am
by hawleyjr
Thanks feyd, that works however, I have to ditch the transparency in my shadow. Any idea how to do this and still have the transparency in the outer-border?

Posted: Fri Sep 23, 2005 9:12 am
by feyd
would require multiple layered divs.. basically a container to cap the dimensions; another container for content and its associated backdrop where the backdrop div has the border translucent, the content div would need a solid background possibly and be slightly offset from the backdrop position (involves relative position with absolute position nesting); then you have the shadow component..

it probably comes down to about 10 divs :)