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! :)
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! :)