Add Shadow to div with expanding height

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Add Shadow to div with expanding height

Post 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>
Last edited by hawleyjr on Fri Sep 23, 2005 8:57 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

an example I wrote for Burrito a few weeks ago, viewtopic.php?t=36648
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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 :)
Post Reply