Welcome to WebmasterWorld Guest from 54.160.187.160

Forum Moderators: open

Message Too Old, No Replies

Using Javascript to show/hide div but IE leaves space for hidden div

height:1 doesn't work...

     
5:37 pm on Aug 13, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 12, 2004
posts: 1355
votes: 0


I'm not much for Javascript, but I need to show & hide a form which contains a text area and a submit button. The form is displayed numerous times with different id's. The javascript I use for the show/hide is:

function showDiv( id ) {
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.height = '90px';
document.getElementById(id).focus();
}
function hideDiv( id ) {
document.getElementById(id).style.visibility = 'hidden';
document.getElementById(id).style.height = '1px';
document.getElementById(id).focus();
}

The problem is that space is still left where the hidden div is, so I added height:1px to the style of the divs, which took care of the problem for everything but Internet Explorer.

Is the a better way to do this that works with IE?

Thanks!

5:48 pm on Aug 13, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2606
votes: 0


Instead of:
document.getElementById(id).style.visibility = 'hidden';

Try:
document.getElementById(id).style.display = 'none';

To show it:
document.getElementById(id).style.display = 'block';

7:04 pm on Aug 13, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


And, in this scenario, you can also ditch setting the height.
7:41 pm on Aug 13, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 12, 2004
posts:1355
votes: 0


Perfect, thanks Demaestro!