finstah1
09-26-2007, 04:23 PM
hey all,
I'm implementing a cool show/hide div script I found at dhtmlgoodies but am having some issues with IE7 and FF. I've got my wrapper centered with margin: 0 auto; but when I open the div and the contents show, the entire wrapper moves over (due to the auto center deal above.) My question is, is there a way to center the wrapper and not have the entire contents shift?
Ironically it works fine in IE 6. :eek:
It's easier to view the test page to see what I mean. Just make the window small enough so that when the div opens the scroll bar will appear.
http://www.atseadesign.com/test/test.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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> test</title>
<style type="text/css">
html {
height: 100%;
overflow: auto;
}
html, body, #wrapper {
border: none;
text-align: center;
height: 100%;
font: normal 13px Arial, Helvetica, sans-serif;
color: #000;
background-color: #D4EEF6;
margin: 0;
width: auto;
}
#wrapper {
border: 1px solid #000;
margin: 0px auto;
text-align: left;
vertical-align: middle;
width: 400px;
background-color: #FFF;
}
.initial_topic_off { /* Styling question */
color:#629CBE;
font: normal 13px Arial, Helvetica, sans-serif;
width:430px;
margin-bottom:2px;
margin-top:2px;
padding-left:2px;
background:url('../images/arrow.gif') no-repeat 0 50%;
height: auto;
border: 1px solid black;
overflow:hidden;
cursor:pointer;
}
.initial_topic_off p { /* Styling question */
padding-left: 1em;
}
.initial_topic_on{ /* Parent box of slide down content */
width:400px;
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
.initial_topic_on_content{ /* Content that is slided down */
padding:1px;
font-size:0.9em;
position:relative;
}
.initial_topic_on img { border: none; margin: 0 0 1em 0;}
</style>
<script type="text/javascript">
/**************************************************************************************************** ********
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
**************************************************************************************************** ********/
var dhtmlgoodies_slideSpeed = 10; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='initial_topic_off'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='initial_topic_on_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!--[if IE]>
<link rel="stylesheet" href="../includes/stylesIE.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<table id="wrapper" border="0" cellpadding="0" cellspacing="0" width="768" align="center">
<tr valign="top">
<td>
<table width="770" border="0" cellpadding="0" cellspacing="0" align="center">
<tr valign="top">
<td height="174"><img src="../images/topnav0.jpg" alt="" /></td>
</tr>
<tr valign="top">
<td>
<!-- Start Top Nav -->
<!--#include virtual="../includes/topnav.html" --> <!-- End Top Nav --> </td>
</tr>
<tr valign="top">
<td>
<table border="0" cellpadding="5" cellspacing="5">
<tr valign="top">
<td><img id="headerImg" src="../images/hdr_health.gif" alt="Here's to your health" />
<div class="initial_topic_off"><p>Abductors stretches</p></div>
<div class="initial_topic_on">
<div>
<img src="images/abductors1.jpg" alt="Abductors stretches" /><br /><img src="images/abductors2.jpg" alt="Abductors stretches" />
</div>
</div>
<div class="initial_topic_off">Q: What is the difference between the div and span tag ?</div>
<div class="initial_topic_on">
<div>
DIV is a block element while SPAN is an inline element. What's common to them both is that none of them have any default styling.
</div>
</div>
<div class="initial_topic_off">Q: What kind of site is dhtmlgoodies.com ?</div>
<div class="initial_topic_on">
<div>
dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland. Here, you will find a lot of
DHTML scripts you can use freely to enhance your website.
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td> </td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td id="footer">
<!-- Start Footer -->
<!--#include virtual="../includes/footer.html" -->
<!-- End Footer -->
</td>
</tr>
</table>
</body>
</html>
I'm implementing a cool show/hide div script I found at dhtmlgoodies but am having some issues with IE7 and FF. I've got my wrapper centered with margin: 0 auto; but when I open the div and the contents show, the entire wrapper moves over (due to the auto center deal above.) My question is, is there a way to center the wrapper and not have the entire contents shift?
Ironically it works fine in IE 6. :eek:
It's easier to view the test page to see what I mean. Just make the window small enough so that when the div opens the scroll bar will appear.
http://www.atseadesign.com/test/test.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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> test</title>
<style type="text/css">
html {
height: 100%;
overflow: auto;
}
html, body, #wrapper {
border: none;
text-align: center;
height: 100%;
font: normal 13px Arial, Helvetica, sans-serif;
color: #000;
background-color: #D4EEF6;
margin: 0;
width: auto;
}
#wrapper {
border: 1px solid #000;
margin: 0px auto;
text-align: left;
vertical-align: middle;
width: 400px;
background-color: #FFF;
}
.initial_topic_off { /* Styling question */
color:#629CBE;
font: normal 13px Arial, Helvetica, sans-serif;
width:430px;
margin-bottom:2px;
margin-top:2px;
padding-left:2px;
background:url('../images/arrow.gif') no-repeat 0 50%;
height: auto;
border: 1px solid black;
overflow:hidden;
cursor:pointer;
}
.initial_topic_off p { /* Styling question */
padding-left: 1em;
}
.initial_topic_on{ /* Parent box of slide down content */
width:400px;
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
.initial_topic_on_content{ /* Content that is slided down */
padding:1px;
font-size:0.9em;
position:relative;
}
.initial_topic_on img { border: none; margin: 0 0 1em 0;}
</style>
<script type="text/javascript">
/**************************************************************************************************** ********
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
**************************************************************************************************** ********/
var dhtmlgoodies_slideSpeed = 10; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='initial_topic_off'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='initial_topic_on_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!--[if IE]>
<link rel="stylesheet" href="../includes/stylesIE.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<table id="wrapper" border="0" cellpadding="0" cellspacing="0" width="768" align="center">
<tr valign="top">
<td>
<table width="770" border="0" cellpadding="0" cellspacing="0" align="center">
<tr valign="top">
<td height="174"><img src="../images/topnav0.jpg" alt="" /></td>
</tr>
<tr valign="top">
<td>
<!-- Start Top Nav -->
<!--#include virtual="../includes/topnav.html" --> <!-- End Top Nav --> </td>
</tr>
<tr valign="top">
<td>
<table border="0" cellpadding="5" cellspacing="5">
<tr valign="top">
<td><img id="headerImg" src="../images/hdr_health.gif" alt="Here's to your health" />
<div class="initial_topic_off"><p>Abductors stretches</p></div>
<div class="initial_topic_on">
<div>
<img src="images/abductors1.jpg" alt="Abductors stretches" /><br /><img src="images/abductors2.jpg" alt="Abductors stretches" />
</div>
</div>
<div class="initial_topic_off">Q: What is the difference between the div and span tag ?</div>
<div class="initial_topic_on">
<div>
DIV is a block element while SPAN is an inline element. What's common to them both is that none of them have any default styling.
</div>
</div>
<div class="initial_topic_off">Q: What kind of site is dhtmlgoodies.com ?</div>
<div class="initial_topic_on">
<div>
dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland. Here, you will find a lot of
DHTML scripts you can use freely to enhance your website.
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td> </td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td id="footer">
<!-- Start Footer -->
<!--#include virtual="../includes/footer.html" -->
<!-- End Footer -->
</td>
</tr>
</table>
</body>
</html>