Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically changing the height of a div element

    Hi all,

    I'm produce HTML reports from SAS, with this particular report I would like to be able to add in buttons to hide and unhide sections of it.

    I've basically encapsulated the tables produced by SAS in DIV elements and gave them an id. I have a button above each section (button being just above the beginning of each DIV). Clicking this button will make the section's height go to 0 and then make it go back to a certain height on the second click.

    However when I set the height property to zero nothing happens on the page.

    I tried using the visibility property instead and this did make the div and it's contents disappear however the space it populated was still there. So there was a big white space were the table would have been.

    The code is shown below:

    Code:
    var val_trucks="10%";
    var val_swaps="10%";
    var val_rswaps="10%";
    var is_trucks=false;
    var is_swaps=false;
    var is_rswaps=false;
    
    function toggleElement(id){
    
    	if (id=="tot_trucks"){
    		if (is_trucks){
    			window.document.getElementById(id).style.height=val_trucks;
    			is_trucks=false;
    		}else{
    			window.document.getElementById(id).style.height='0px';
    			is_trucks=true;
    		}
    	}else if (id=="tot_swaps"){
    		if (is_swaps){
    			window.document.getElementById(id).style.height=val_swaps;
    			is_swaps=false;
    		}else{
    			window.document.getElementById(id).style.height='0pt';
    			is_swaps=true;
    		}
    	}else if (id=="tot_rswaps"){
    		if (is_rswaps){
    			window.document.getElementById(id).style.height=val_rswaps;
    			is_rswaps=false;
    		}else{
    			window.document.getElementById(id).style.height='0pt';
    			is_rswaps=true;
    		}
    	}
    
    	alert('is_trucks: ' + is_trucks + ' is_swaps: ' + is_swaps + ' is_rswaps: ' + is_rswaps);
    
    }
    I'm using IE6 on Windows NT4.

    Thanks for any help that can be provided.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    why not simply use the display instead of height attribute? display none/block(or inline) will "hide/show" the element along with it's "size occupied place".
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help. It worked perfectly.


  •  

    Posting Permissions

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