www.webdeveloper.com
Results 1 to 3 of 3

Thread: <!doctype html> overflow:hidden

  1. #1
    Join Date
    Feb 2007
    Posts
    19

    <!doctype html> overflow:hidden

    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>

  2. #2
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    Code:
    document.getElementById("trCollapse").style.height=h+"px"; 
    	document.getElementById("divCollapse").style.height=h+"px";
    Javascript, jQuery / Prototype & PHP expert ready to complete your work on Freelancer.co.uk - Hire Me at https://www.freelancer.co.uk/users/1...&action=hireme

  3. #3
    Join Date
    Feb 2007
    Posts
    19
    Thanks a lot!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles