Remove space between hidden DIVs in Internet Explorer

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

tabert@gmail.com - 28 Feb 2005 05:45 GMT

I want to use JavaScript when a button is clicked to show and hide a
SPAN or DIV. This works in both IE and Netscape, but what I'd like to
happen is for there to be no white space where the hidden div is.

I start with two visible divs and in between them are two more hidden
ones...in Firefox this works fine--the two visible ones are right next
to each other, the button fires the script and the other div shows up
in the middle. Another button hides the div and the original two move
back together without space between them.

However on IE the two visible divs are separated by the amount of
whitespace that would be needed if the two hidden divs were actually
visible. They show and hide correctly, but the whitespace remains.
How can I fix this?

Thanks in advance!

Below is the code I'm using:

<style type="text/css">
.hidden
{
    background:white;
    height:0px;
    overflow:hidden;
}
.fullsize
{
    background:white;
}
</style>

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
function toggle(id){

        if (ns4){
            document.layers[id].className =
(document.layers[id].className=='hidden') ? 'fullsize' : 'hidden';
        }else if (ie4) {
            document.all[id].className = (document.all[id].className=='hidden')
? 'fullsize' : 'hidden';
        }else{
            var divID = document.getElementById([id]);
            divID.className = (divID.className=='hidden') ? 'fullsize' :
'hidden';
        }

}

// Show/Hide functions for non-pointer layer/objects
function show(id) {
if (ns4){
     document.layers[id].visibility = "show";
     toggle(id);
}else if (ie4){
     alert('ie4 fired');
     document.all[id].style.visibility = "visible";
     toggle(id);
}else{
            var divID = document.getElementById(id);
            divID.setAttribute('style', 'hidden:false');
            toggle(id);
        }

}

function hide(id) {
if (ns4){
     document.layers[id].visibility = "hide";
     toggle(id);
}else if (ie4){
     document.all[id].style.visibility = "hidden";
     toggle(id);
}else{
            var divID = document.getElementById([id]);
            divID.style.visibility = 'hidden';
            toggle(id);
        }

}
</SCRIPT>

Reply to this Message

RobG - 28 Feb 2005 06:35 GMT

> I want to use JavaScript when a button is clicked to show and hide a
> SPAN or DIV. This works in both IE and Netscape, but what I'd like to
> happen is for there to be no white space where the hidden div is.

Change the span/div display attribute:

spanRef.style.display = 'none'; // hides the span
spanRef.style.display = ''; // displays the span

Need to do some feature detection first, see below.

[...]

> <style type="text/css">
> .hidden
[quoted text clipped - 8 lines]
> }
> </style>

You may still need these for old Netscape, but otherwise you
don't need them any more.

> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">

The language attribute is depreciated and replaced by the type
attribute. Just delete the language attribute.

> function toggle(id){
> if (ns4){
> document.layers[id].className =
> (document.layers[id].className=='hidden') ? 'fullsize' : 'hidden';

[...]

Don't use tabs in your code when posted here - replace with one
or two spaces. Manually wrap your code at about 65 characters
to allow for a couple of re-posts without wrapping.

Don't use browser detection, use feature detection - and test
for the most widely supported feature first. The following code
toggles an element between hidden and shown, tested in IE,
Firefox and Netscape 7.2.

You will need to add support for old Netscape and maybe really
old IE if you want.

<script type="text/javascript">
function toggle(id) {
if (document.getElementById) {
var el = document.getElementById(id);
} else if (document.all) {
var el = document.all(id);
} else if (document.layers) {
var el = document.layers[id];
}

if (el.style) {
if (el.style.display == 'none'){
el.style.display='';
} else {
el.style.display='none';
}
} else {
// browser does not support style object,
// hide some other way
}
}
</script>
<button onclick="toggle('aSpan');">toggle</button>
<span id="aSpan">a span</span>

[...]

Signature

Rob

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / February 2005

Remove space between hidden DIVs in Internet Explorer