<!doctype html> overflow:hidden

**safra** · 06-26-2012 08:49 AM

Hi, I have this code that animates table row heights ignoring the contents. It works well in all browsers until I add <!doctype html> at the top. The animation does not work, it simply jumps to either display='none' or display='block' after the timeframe. I looked around and found some suggestions like adding position:relative etc to the css. But nothing works so far.

Anyone has an idea of what goes wrong here?

Thanks!

Code:

<!doctype html>
<style>
#trCollapse{ height:100px;}
#divCollapse{ height:100px; overflow:hidden}
</style>

<script>
var h=100;

function collapse_row(){ 
	set_height(); h--; 
	if(h<1) {  
		h=1;  
		document.getElementById("trCollapse").style.display="none";  
		document.getElementById("divCollapse").style.display="none";  
		clearInterval(collapse_it);  
	} 
}

function expand_row(){ 
	set_height(); 
	document.getElementById("trCollapse").style.display="block"; 
	document.getElementById("divCollapse").style.display="block";
	h++; 
	
	if(h>100) {  
	clearInterval(expand_it);  
	} 
}

function set_height(){
	window.status=h;
	document.getElementById("trCollapse").style.height=h; 
	document.getElementById("divCollapse").style.height=h; 
}
</script>
<table width="100&#37;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table border=0 cellpadding=0 cellspacing=0>
      <tr id="trCollapse">
        <td><div id="divCollapse">
          <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td >Row 1</td>
            </tr>
            <tr>
              <td >Row 2</td> 
            </tr>
            <tr>
              <td >Row 3</td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><input type="button" name="button" id="button" value="collapse" OnClick="collapse_it=setInterval('collapse_row()',3);">
    <input type="button" name="button2" id="button2" value="uncollapse" OnClick="expand_it=setInterval('expand_row()',3);"></td>
  </tr>
</table>

**maurycy** · 06-26-2012 09:21 AM

Code:

document.getElementById("trCollapse").style.height=h+"px"; 
	document.getElementById("divCollapse").style.height=h+"px";

**safra** · 06-26-2012 09:25 AM

Thanks a lot!

Thread: <!doctype html> overflow:hidden

Thread Tools

Display

<!doctype html> overflow:hidden

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions