Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript / Jquery

How Can I Keep The Space Allocated In Dom When Using Css Display:none

Post a Comment
I am aware of display:none and visibility:hidden functionality. Due to some reason I have to use display:none and still want to keep the space allocated for the element in DOM so t

Solution 1:

Note: This answer has sections, based on updates from the OP.

Instead of display: none, use visibility: hidden. That hides the element, but the element still takes up space in the layout.

You can see the difference by comparing this jsbin using display: none with this one using visibility: hidden.

Both of those use this HTML:

<div>This is above</div><divid="toggleme">This is the one that toggles</div><div>This is below</div>

The first uses:

(function() {
  "use strict";
  var toggleme = document.getElementById("toggleme");
  setInterval(function() {
    if (toggleme.style.visibility === "hidden") {
      toggleme.style.visibility = "";
    }
    else {
      toggleme.style.visibility = "hidden";
    }
  }, 400);
});

while the second uses:

(function() {
  "use strict";
  var toggleme = document.getElementById("toggleme");
  setInterval(function() {
    if (toggleme.style.display === "none") {
      toggleme.style.display = "block";
    }
    else {
      toggleme.style.display = "none";
    }
  }, 400);
});

You've said in a comment below you're using fadeOut to hide the element. That will, of course, set display: none when done. As Arun points out, you can use fadeTo instead, which animates opacity down to 0, which has a similar effect to setting visibility: hidden: Live Copy

<!DOCTYPE html><html><head><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><metacharset=utf-8 /><title>fadeTo</title></head><body><div>This is above</div><divid="hideme">This is the one that toggles</div><div>This is below</div><script>
    $("#hideme").fadeTo("slow", 0);
  </script></body></html>

Another option is to use the "complete" callback on fadeOut to change display and visibility: Live Copy

$("#hideme").fadeOut(function() {
  $(this).css({
    display: "",
    visibility: "hidden"
  });
});

You've asked how you can apply the above to your code. The code looks overly-complex to me (not sure what the whole eventObj thing is about), but here's something I think you can readily adapt: Live Copy

<!DOCTYPE html><html><head><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><metacharset=utf-8 /><title>faded blinking</title></head><body><div>This is above</div><divid="toggleme">This is the one that toggles</div><div>This is below</div><inputtype="button"id="btnStartStop"value="Start"><script>
    (function() {
      var obj = {
        startBlinking: function($elem) {
          if ($elem.data("blinking")) {
            return;
          }
          $elem.data("blinking", true);
          fadeToZero();

          functionfadeToZero() {
            if ($elem.data("blinking")) {
              $elem.fadeTo("slow", 0, fadeToFull);
            }
          }
          functionfadeToFull() {
            if ($elem.data("blinking")) {
              $elem.fadeTo("slow", 1, fadeToZero);
            }
          }
        },
        stopBlinking: function($elem) {
          $elem.data("blinking", false);
        }
      };

      $("#btnStartStop").click(function() {
        if (this.value === "Start") {
          obj.startBlinking($("#toggleme"));
          this.value = "Stop";
        }
        else {
          obj.stopBlinking($("#toggleme"));
          this.value = "Start";
        }
      })
    })();
  </script></body></html>

Solution 2:

Use css:

.hidemeplease {
    visibility:hidden;
}

Post a Comment for "How Can I Keep The Space Allocated In Dom When Using Css Display:none"