Hi all,
I’m developing a site that uses ajax to hide/display content using Ajax. It’s working perfectly, with one exception-
As the description expands vertically, the main div stays static, so the content expands past the background.
There are two divs involved in this. The first, called “contentArea” is the container div that isn’t expanding properly. The second is called “bodyArea”, and, as you can see by the gray background I’ve temporarily place, it expands perfectly. Also, you’ll notice that the footer graphic moves down vertically to make room for the new descriptions.
To restate- I need the contentArea div to expand or contract vertically with the rest of the divs, so that the background color stays consistent, no matter how long the page gets.
Thanks to everyone in advance!
Here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Center for Plastic Surgery- Staff</title>
<!-- Site Created by Chase Curry-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.2- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
animatedcollapse.addDiv('box1', 'fade=1')
animatedcollapse.addDiv('box2', 'fade=1')
animatedcollapse.addDiv('box3', 'fade=1')
animatedcollapse.addDiv('box4', 'fade=1')
animatedcollapse.addDiv('box5', 'fade=1')
animatedcollapse.addDiv('box6', 'fade=1')
animatedcollapse.addDiv('box7', 'fade=1')
animatedcollapse.addDiv('box8', 'fade=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<script type="text/javascript">
// Copyright 2006-2007 javascript-array.com
var timeout = 250;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="flashContainer"><img src="images/FlashPlaceholder.jpg" width="947" height="306" /></div>
<div id="navContainer"><img src="images/navPlace.jpg" width="976" height="59" /></div>
<div id="contentArea">
<div id="sidebar1Secondary"><br />
<br />
<img src="images/NewsletterSignUp.jpg" width="130" height="26" /> </div>
<div class="bodyArea" style="padding-top:20px; width:475px; background-color:#ccc;">
<p class="headerSans">Header
</p>
<ul>
<a href="javascript:animatedcollapse.toggle('box1')" class="slideHeader">
<li> Item 1</li></a>
<div class="bodyCopyDropDown" id="box1"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor ipsum vitae orci viverra vel venenatis tellus sodales. Integer mauris arcu, lacinia tincidunt gravida quis, pharetra eget eros. Fusce sed orci vitae ipsum tempor fringilla ut at dui. Ut vitae felis tortor. Nam felis mauris, posuere a suscipit sit amet, commodo eget nisi. Donec in augue felis, ac faucibus quam. Curabitur adipiscing arcu varius ligula faucibus sit amet vestibulum orci pretium. Proin non enim turpis, vel consectetur lectus. Phasellus faucibus ultrices leo at porttitor. Nam sit amet mauris ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vehicula vulputate molestie. Phasellus id varius sem. Quisque et tellus vitae felis facilisis viverra. Mauris eu nunc dolor.
Aliquam eu est in nulla ornare auctor. Praesent eget fringilla eros. Vivamus placerat eleifend enim, ut ullamcorper risus blandit placerat. Donec mattis turpis at est rhoncus lobortis. Quisque ullamcorper est et tellus suscipit imperdiet. Maecenas quis augue enim, nec sodales erat. Morbi vitae nisl sed nibh consequat placerat. Suspendisse feugiat sagittis nisi, aliquam adipiscing quam aliquam et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla pharetra diam eget ante pulvinar sed feugiat nibh semper. Proin ut interdum dolor. Donec sed diam ante. Donec elit dolor, pretium adipiscing scelerisque nec, porttitor id magna. Nunc nisl ipsum, feugiat eget dictum nec, ullamcorper ac nulla. Pellentesque adipiscing tellus in ante fringilla porta. Phasellus facilisis pellentesque cursus. Sed viverra tempus dolor et hendrerit. Praesent at odio nisi, et cursus metus. Vivamus tortor dui, molestie id volutpat quis, pellentesque in est.
</div>
<a href="javascript:animatedcollapse.toggle('box2')" class="slideHeader">
<li>Item 2</li>
</a>
<div class="bodyCopyDropDown" id="box2"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor ipsum vitae orci viverra vel venenatis tellus sodales. Integer mauris arcu, lacinia tincidunt gravida quis, pharetra eget eros. Fusce sed orci vitae ipsum tempor fringilla ut at dui. Ut vitae felis tortor. Nam felis mauris, posuere a suscipit sit amet, commodo eget nisi. Donec in augue felis, ac faucibus quam. Curabitur adipiscing arcu varius ligula faucibus sit amet vestibulum orci pretium. Proin non enim turpis, vel consectetur lectus. Phasellus faucibus ultrices leo at porttitor. Nam sit amet mauris ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vehicula vulputate molestie. Phasellus id varius sem. Quisque et tellus vitae felis facilisis viverra. Mauris eu nunc dolor.
Aliquam eu est in nulla ornare auctor. Praesent eget fringilla eros. Vivamus placerat eleifend enim, ut ullamcorper risus blandit placerat. Donec mattis turpis at est rhoncus lobortis. Quisque ullamcorper est et tellus suscipit imperdiet. Maecenas quis augue enim, nec sodales erat. Morbi vitae nisl sed nibh consequat placerat. Suspendisse feugiat sagittis nisi, aliquam adipiscing quam aliquam et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla pharetra diam eget ante pulvinar sed feugiat nibh semper. Proin ut interdum dolor. Donec sed diam ante. Donec elit dolor, pretium adipiscing scelerisque nec, porttitor id magna. Nunc nisl ipsum, feugiat eget dictum nec, ullamcorper ac nulla. Pellentesque adipiscing tellus in ante fringilla porta. Phasellus facilisis pellentesque cursus. Sed viverra tempus dolor et hendrerit. Praesent at odio nisi, et cursus metus. Vivamus tortor dui, molestie id volutpat quis, pellentesque in est.
</div>
<a href="javascript:animatedcollapse.toggle('box3')" class="slideHeader">
<li>Item 3</li>
</a>
<div class="bodyCopyDropDown" id="box3"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor ipsum vitae orci viverra vel venenatis tellus sodales. Integer mauris arcu, lacinia tincidunt gravida quis, pharetra eget eros. Fusce sed orci vitae ipsum tempor fringilla ut at dui. Ut vitae felis tortor. Nam felis mauris, posuere a suscipit sit amet, commodo eget nisi. Donec in augue felis, ac faucibus quam. Curabitur adipiscing arcu varius ligula faucibus sit amet vestibulum orci pretium. Proin non enim turpis, vel consectetur lectus. Phasellus faucibus ultrices leo at porttitor. Nam sit amet mauris ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vehicula vulputate molestie. Phasellus id varius sem. Quisque et tellus vitae felis facilisis viverra. Mauris eu nunc dolor.
Aliquam eu est in nulla ornare auctor. Praesent eget fringilla eros. Vivamus placerat eleifend enim, ut ullamcorper risus blandit placerat. Donec mattis turpis at est rhoncus lobortis. Quisque ullamcorper est et tellus suscipit imperdiet. Maecenas quis augue enim, nec sodales erat. Morbi vitae nisl sed nibh consequat placerat. Suspendisse feugiat sagittis nisi, aliquam adipiscing quam aliquam et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla pharetra diam eget ante pulvinar sed feugiat nibh semper. Proin ut interdum dolor. Donec sed diam ante. Donec elit dolor, pretium adipiscing scelerisque nec, porttitor id magna. Nunc nisl ipsum, feugiat eget dictum nec, ullamcorper ac nulla. Pellentesque adipiscing tellus in ante fringilla porta. Phasellus facilisis pellentesque cursus. Sed viverra tempus dolor et hendrerit. Praesent at odio nisi, et cursus metus. Vivamus tortor dui, molestie id volutpat quis, pellentesque in est.
</div>
</ul>
<br />
<br />
<br />
</div>
<div id="sidebar2"> <div id="whatsNew" style="margin:0 0 0 0;">
<span class="headerText">
Sidebar</span>
<p class="bodyCopy"><strong>Sample Sidebar text</strong><span class="learnMore"><a href="#"></a></span></p>
</div>
<img src="images/LogosBottomRight.jpg" width="194" height="58" style="padding-top:30px;" /> </div>
</div>
<div id="homeFooter"></div>
</div>
</div>
</body>
</html>
And here is the CSS:
@charset "UTF-8";
/* CSS Document */
a{
color:#7f9b55;
text-decoration:none;
font-weight:bold;
}
#bottomNav a{
color:#fcf8e6;
text-decoration:none;
font-weight:normal;
}
td{
padding:5px 10px 5px 10px;
vertical-align:center;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
body{
margin: auto auto auto auto;
background-image:url(../images/BGTile02.jpg);
background-repeat:repeat-x;
background-color:#747c58;
}
p{
margin:0px 0px 0px 0px;
padding-top:15px;
}
#mainContainer{
width:976px;
margin: 15px auto 100px auto;
}
#flashContainer{
margin: auto auto auto auto;
background-image:url(../images/FlashPlaceholderSecondary.jpg);
height:231px;
width:947px;
}
#flashContainerHome{
margin: auto auto auto auto;
background-image:url(../images/FlashPlaceholder.jpg);
width:947px;
height:306px;
}
#navContainer{
width:976px;
height:44px;
background-image:url(../images/navPlace.jpg);
margin:auto;
}
#bottomNav {
text-align:center;
width:976px;
}
#bottomNav ul{
margin-right:40px;
}
#bottomNav li{
text-decoration:none;
margin-left:0px;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#fcf8e6;
padding: 0px 10px 0px 10px;
}
#contentArea{
background-color:#fcf8e6;
width:947px;
height:380px;
margin: auto auto auto auto;
background-image:url(../images/DropShadow.jpg);
background-repeat:no-repeat;
}
#homeFooter{
width:947px;
height:32px;
background-image:url(../images/HomeFooter.png);
margin: auto auto auto auto;
clear:both;
}
#whatsNew{
width:187px;
background-image:url(../images/WhatsNewBox.png);
height:285px;
padding-left:15px;
padding-top:25px;
}
.bodyArea{
float:left;
width:400px;
padding-top:40px;
}
#sidebar1{
float:left;
padding-left:30px;
padding-top:20px;
width:197px;
}
#sidebar1Secondary{
float:left;
padding-left:20px;
padding-top:20px;
width:197px;
}
#sidebar2{
float:right;
padding-top:20px;
padding-right:20px;
width:200px;
}
#sidebar2Home{
float:left;
padding-top:20px;
padding-left:17px;
width:200px;
}
.headerText{
font-family:"Times New Roman", Times, serif;
color:#272623;
font-size:22px;
padding-left:10px;
padding-top:0px;
line-height:.5em;
}
.headerTextSM{
font-family:"Times New Roman", Times, serif;
color:#272623;
font-size:16px;
padding-left:10px;
padding-top:0px;
line-height:.5em;
}
.headerTextSub{
font-family:"Times New Roman", Times, serif;
color:#677a1a;
font-size:22px;
padding-left:10px;
padding-top:0px;
line-height:.5em;
}
.headerSansLG{
font-family:Arial, Helvetica, sans-serif;
color:#7b6f5c;
font-size:28px;
padding-left:10px;
margin-top:5px;
line-height:.5em;
}
.headerSans{
font-family:Arial, Helvetica, sans-serif;
color:#272623;
font-size:22px;
padding-left:10px;
line-height:.5em;
}
.headerSansSM{
font-family:Arial, Helvetica, sans-serif;
color:#272623;
font-size:16px;
padding-left:10px;
line-height:.5em;
}
.learnMore{
font-size:14px;
color:#605046;
}
.learnMore a{
font-size:14px;
color:#605046;
font-weight:normal;
}
.learnMore img{
padding-right:5px;
}
.bodyCopy{
font-family:Arial, Helvetica, sans-serif;
color:#727169;
font-size:12px;
padding-left:10px;
padding-right:15px;
line-height:1.3em;
}
.bodyCopyital{
font-family:Arial, Helvetica, sans-serif;
color:#727169;
font-size:12px;
padding-left:10px;
padding-right:15px;
line-height:1.3em;
font-style:italic;
}
.orangeHeaders{
color:#ef6c2b;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.orangeHeadersLG{
color:#ef6c2b;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
.orangeHeadersLG li{
border-top:solid #ccc 1px;
padding-top:.5em;
padding-bottom:.5em;
width:300px;
}
.orangeHeadersLG li a{
color:#ef6c2b;
}
.orangeHeadersTable{
color:#ef6c2b;
font-family:Arial, Helvetica, sans-serif;
}
.orangeHeaders a{
color:#ef6c2b;
text-decoration:underline;
font-weight:normal;
}
.slideHeader li{
list-style-image:url(../images/Bullet.gif);
margin-bottom:.5em;
margin-top:1em;
}
.slideHeaderSans li{
list-style-image:url(../images/Bullet.gif);
padding-top:5px;
padding-bottom:5px;
color:#7b6f5c;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:solid #ccc 1px;
width:400px;
}
.bodyCopyDropDown{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#272623;
margin:0 0 0 0;
padding-bottom:10px;
width: 400px;
display:none
}
.unlinkedHeaders{
color:#7f9b55;
padding-left:10px;
}