PDA

View Full Version : Animated Collapse: Div won't hide after opening



OrangeCo
09-28-2009, 08:03 PM
1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: The DIV starts off hidden. When I click the toggle link, DIV fades in normally. Click again and DIV contents fade out like they're hiding, then fade back in. I'm testing in XP on Firefox 3.5.x, IE 8, and Opera 10, and the problem occurs in exactly the same way all the way across.

LINK: http://www.theorangecompanyinc.com/zoogle/problem_page.html

SCRIPT:



<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.4- (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>
<script type="text/javascript">

animatedcollapse.addDiv('fRow1', 'fade=1,speed=0,group=face,hide=1')
animatedcollapse.addDiv('fRow2', 'fade=1,speed=0,group=face,hide=1')
animatedcollapse.addDiv('fRow3', 'fade=1,speed=0,group=face,hide=1')
animatedcollapse.addDiv('fRow4', 'fade=1,speed=0,group=face,hide=1')
animatedcollapse.addDiv('fRow5', 'fade=1,speed=0,group=face,hide=1')
animatedcollapse.addDiv('fRow6', 'fade=1,speed=0,group=face,hide=1')
animatedcollapse.addDiv('fRow7', 'fade=1,speed=0,group=face,hide=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>


CSS:


.leftcol-face-2 {
position: absolute;
left: 0%;
width: 33%;
}

.midcol-face-2 {
position: absolute;
top: 0%;
left: 33.5%;
width: 33%;
}

.rightcol-face-2 {
position: absolute;
top: 0%;
left: 67%;
width: 33%;
}

/* top-left corner and left side */
.roundbox-tl {
margin:0;
padding:0;
background: url("images/roundbox-tl.png") no-repeat left top;
}

/* bottom-right corner and bottom side */
.roundbox-br {
margin:0;
padding:0;
background: url("images/roundbox-br.png") no-repeat right bottom;
}

/* bottom-left corner */
.roundbox-bl {
margin:0;
padding:0;
background: url("images/roundbox-bl.png") no-repeat left bottom;
}

/* content div, it could be omitted (the content going into "roundbox-bl" but I felt that aligning the content was easier
with "roundbox-content" in place */
.roundbox-content {
margin:0;
padding-top:1.5em;
padding-left:1.5em;
padding-right:1.5em;
padding-bottom:2.5em;

div.facebox-interior-1 {
display: block;
width: 100%;
height: 100%;
background-color: lightyellow;
border: solid 2px #666;
}

div.facebox-interior-2 {
display: block;
width: 100%;
height: 100%;
border: solid 2px #666;
background: url('images/stone_small_pattern.png') repeat;
}

div.facebox-interior-3 {
display: block;
width: 100%;
height: 100%;
border: solid 2px #666;
background: black;
}


BODY:


<!-- BEGIN FACE ROW 4-6 -->

<script language="javascript" src="face_row_4-6.js" type="text/javascript">
</script>
<div id="fRow1" align="center" style="position:absolute;width:100%;height:100%;left:0%;margin-top:2em;display:none">



<!-- BEGIN FACE SECTION 4 -->

<div class="leftcol-face-2">

<div class="roundbox-tr">
<div class="roundbox-tl">
<div class="roundbox-br">
<div class="roundbox-bl">
<div class="roundbox-content">

<!-- FACE BOX DIV INSIDE JSCRIPT -->

<script language="javascript" type="text/javascript" src="boxheight.js"></script>
<div class="facebox-interior-1">
<span style="display:block; width:100%; height:9%; font-size:125%; font-weight:bold; background:#FF9B20;">
The Orange Company - It only takes one orange to get the job done!
</span>
<span style="display:block; overflow:hidden; width:97%; height:25%; padding-left:1.5%; padding-right:1.5%; text-align:justify; font-size:110%">
<img src="images/jm_small.jpg" height="100%" align="left" style="padding:5px">
<b>Company:</b> The Orange Company, Inc.<br>
<br>
<b>Specialty:</b> Real Estate Acquisitions, Investments, Management, Listing and Buyer's Agent
</span>
<span style="display:block; width:97%; height:30%; padding-left:1.5%; padding-right:1.5%; text-align:justify; font-size:110%">
<b>More about my company:</b> I founded the Orange Company to deal with the special needs of the real estate investor. Whether it's your first time making a real estate investment or your hundredth time, you'll see why it only takes one orange to get the job done!
</span>
<span style="display:block; width:100%; height:36%; text-align:center; font-size:110%">
<script language="javascript" src="buttonwidth.js" type="text/javascript">
</script>
</span>
</div>
</div> <!-- CLOSE FACE BOX DIV -->
</div>
</div>
</div>
</div>
</div>

</div> <!-- END FACE SECTION 4 -->

<!-- BEGIN FACE SECTION 5 -->

<div class="midcol-face-2">

<div class="roundbox-tr">
<div class="roundbox-tl">
<div class="roundbox-br">
<div class="roundbox-bl">
<div class="roundbox-content">
<!-- FACE BOX DIV INSIDE JSCRIPT -->

<script language="javascript" type="text/javascript" src="boxheight.js"></script>
<div class="facebox-interior-2">
<span style="display:block; width:100%; height:9%; font-family:Georgia, Times New Roman; font-size:125%; font-weight:bold; background:#D2D3C1;">
THE ORANGE COMPANY, INC.
<br>529 Rivergate Pkwy. - (615) 859-2190
</span>
<span style="display:block; overflow:hidden; width:100%; height:25%; text-align:center; font-size:110%">
<img src="images/logo_orange_2_small.png" align="center">
</span>
<span style="position:relative; display:block; width:90%; padding-left:5%; padding-right:5%; height:30%; text-align:center; font-family:Georgia, Times New Roman; font-size:110%">
<table style="height:100%; width:100%; border:1px; font-size:100%; vertical-align:top; align:center;">
<tr>
<td colspan="2" style="text-align:left; padding:2px">
<b>More about my company:</b>
</td>
</tr>
<tr>
<td width="50%" valign="top" style="text-align:left; padding-left:1.33em">
<ul>
<li>Locally based in the area</li>
<li>Two decades of real estate experience</li>
</ul>
</td>
<td width="50%" valign="top" style="text-align:left; padding-left:1.33em">
<ul>
<li>Expert property flipping</li>
<li>Specialing in investors of all types</li>
</ul>
</td>
</tr>
</table>
</span>
<span style="display:block; width:100%; height:36%; text-align:center; font-size:110%">
<script language="javascript" src="buttonwidth.js" type="text/javascript">
</script>
</span>
</div>
</div> <!-- CLOSE FACE BOX DIV -->
</div>
</div>
</div>
</div>
</div>

</div><!-- END FACE SECTION 5 -->

<!-- BEGIN FACE SECTION 6 -->

<div class="rightcol-face-2">

<div class="roundbox-tr">
<div class="roundbox-tl">
<div class="roundbox-br">
<div class="roundbox-bl">
<div class="roundbox-content">

<!-- FACE BOX DIV INSIDE JSCRIPT -->

<script language="javascript" type="text/javascript" src="boxheight.js"></script>
<div class="facebox-interior-3">
<span style="display:block; width:100%; height:9%; font-family:Times New Roman, serif; font-size:225%; font-weight:bold; background:#FF6820;">
(615) 859-2190
</span>
<span style="display:block; overflow:hidden; width:97%; height:15%; padding-left:1.5%; padding-right:1.5%; text-align:center; font-family:Times New Roman, serif; font-size:225%; font-weight:bold; color:#FF6820">
THE ORANGE COMPANY
</span>
<span style="position:relative; display:block; width:97%; padding-left:1.5%; padding-right:1.5%; height:40%; text-align:center; font-family:Times New Roman, serif; font-size:118%; color:#FF6820;">
<table style="height:100%; width:100%; border:1px; font-size:100%; vertical-align:top; align:center; color:#FF6820">
<tr>
<td colspan="2" style="text-align:left">
<b>More about my company:</b>
</td>
</tr>
<tr>
<td width="55%" valign="top" style="text-align:left">
Whether it's your first time making a real estate investment or your hundredth time, you'll see why it only takes one orange to get the job done!
</td>
<td width="45%" valign="top" style="text-align:left; padding-left:1.33em">
<ul>
<li>Expert property flipping</li>
<li>Specializing in investors of all types</li>
</ul>
</td>
</tr>
</table>
</span>
<span style="display:block; width:100%; height:36%; text-align:center; font-size:110%">
<script language="javascript" src="buttonwidth.js" type="text/javascript">
</script>
</span>
</div>
</div> <!-- CLOSE FACE BOX DIV -->
</div>
</div>
</div>
</div>
</div>

</div><!-- END FACE SECTION 6 -->


</div><!-- END HIDDEN DIV CONTAINING FACE ADS 4-6 -->

</div><!-- END DIV CALLED IN "FACE_ROW_4-6.JS" SCRIPT -->



JavaScript referenced in "face_row_4-6.js" (a simple size and position script):



var scrnH = screen.height * 0.52;
var divLocA = scrnH + 370;

document.writeln('<div style=\"position\:absolute\; display\:block\; left\:0px\; width\:100%\; top\:'+divLocA+'px\;\ margin-top\:5em\;\">');



Javascript referenced in "boxheight.js" (a simple box sizing script):


var scrn = screen.height;
var boxHeight = scrn * 0.52;

document.write('<div style=\"display\:block\; width\:100%\; height\:'+ boxHeight +'px\">');


I don't know specifically what's wrong here, so I'm tossing it all out there for you folks. Thanks in advance for your help! :)

ddadmin
09-29-2009, 08:47 PM
Right now when I click on one of the colored panels underneath, new content expands that covers up all of the colored blocks. Is that by design? Not quite sure what you're trying to accomplish versus what isn't working...

OrangeCo
10-05-2009, 04:10 PM
Never did quite figure out what went wrong with it, but it seemed to have something to do with relative and absolute positioning in one of the internal divs inside the div called by animatedcollapse. If I used relative positioning, nothing was lining up the way it was supposed to.

In the end, we decided to utilize the animatedcollapse script a different way anyway. I appreciate your getting back with me though!