Remove space between hidden DIVs in Internet Explorer

Discussion in 'Javascript' started by tabert@gmail.com, Feb 28, 2005.

  1. Guest

    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>
     
    , Feb 28, 2005
    #1
    1. Advertising

  2. RobG Guest

    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
     
    RobG, Feb 28, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Neil Monk

    space between CSS divs - how?

    Neil Monk, Jul 26, 2004, in forum: HTML
    Replies:
    4
    Views:
    711
    Neil Monk
    Jul 27, 2004
  2. Replies:
    11
    Views:
    608
    Alan J. Flavell
    May 15, 2006
  3. Stefan Mueller
    Replies:
    5
    Views:
    12,402
    jamesxa
    Jun 16, 2009
  4. Gernot Frisch

    space between divs

    Gernot Frisch, Aug 14, 2008, in forum: HTML
    Replies:
    3
    Views:
    602
    Jukka K. Korpela
    Aug 14, 2008
  5. D. Alvarado

    collapsing space between hidden divs

    D. Alvarado, Sep 3, 2004, in forum: Javascript
    Replies:
    1
    Views:
    117
    D. Alvarado
    Sep 4, 2004
Loading...

Share This Page