Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Remove space between hidden DIVs in Internet Explorer

Reply
Thread Tools

Remove space between hidden DIVs in Internet Explorer

 
 
tabert@gmail.com
Guest
Posts: n/a
 
      02-28-2005
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 With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      02-28-2005
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> 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
> {
> background:white;
> height:0px;
> overflow:hidden;
> }
> .fullsize
> {
> background:white;
> }
> </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>


[...]

--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Internet Explorer 8: C:\Program Files\Internet Explorer\iexplore.exe vs C:\Program Files (x86)\Internet Explorer\iexplore.exe Nathan Sokalski Windows 64bit 16 02-22-2010 08:31 AM
space between divs Gernot Frisch HTML 3 08-14-2008 06:57 PM
Managing divs within divs.... rich HTML 0 02-02-2006 07:38 PM
collapsing space between hidden divs D. Alvarado Javascript 1 09-04-2004 02:25 PM
space between CSS divs - how? Neil Monk HTML 4 07-27-2004 07:38 PM



Advertisments