...

View Full Version : Dynamically changing the height of a div element



Jayla
02-17-2006, 05:05 PM
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. :rolleyes:

The code is shown below:



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

Kor
02-17-2006, 08:10 PM
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".

Jayla
02-27-2006, 09:19 AM
Thanks for the help. It worked perfectly. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum