29

I have managed to make a DIV tag invisible in JavaScript by setting the display to none and the visibility to hidden. It can be achieved with this class also:

.invisible {
    display: none;
    visibility: hidden;
}

Display none will ensure the DIV box is empty, and visibility hidden will ensure it isn't visible. The problem with this method is when I have scrollable DIVs or textareas with overflowing content, when you set display: none, some browsers will forget the scroll position for these elements. Is there a better way to make a DIV invisible without using the display property? I would rather not resort to using JavaScript to record the scroll position and such if possible.

EDIT:

I managed to solve it with your help, I applied the following:

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

I tried left: -9999px, but this expands the vertical scrollbar in IE... I also wrapped my textarea in another DIV and applied the visible/invisible styles to that, because the textarea would lose its scroll position otherwise. I tested this in Chrome, Firefox, IE and Safari on my iPhone. Just a note, the DIV wrapped around the textarea didn't seem to help in FF, and the scrollbar still reset. But the scrollable DIVs are fine now. Thanks for your help!

3
  • 1
    Just a guess, but would putting it in a container div and rendering that div invisible do it? Since this is a guess, I'm not offering it as an answer.
    – Dancrumb
    Feb 25, 2011 at 3:24
  • Hmmh, I thought I had success with your solution but now I discovered that the android browser still scrolls upwards ... :/
    – Karussell
    Feb 7, 2012 at 10:50
  • Ah, I don't have an android... Feb 7, 2012 at 15:19

6 Answers 6

34

You can just use visibility:hidden if you want the element to be invisible but still rendered. display:none will remove it entirely and cause the scroll behavior you mentioned.

4
  • 4
    visibility:hidden will still cause the element to take up space in the layout. I'm guessing this is not what the OP is looking for because he's happy with display: none minus the scrollbar issues. Feb 25, 2011 at 3:43
  • Yeah, I know about visibility, but if your DIV is a block, it will still take up that space. Feb 25, 2011 at 3:56
  • +1 thanks for pointing out visibility: hidden vs. display: none. That's a useful distinction.
    – ashes999
    Jun 8, 2013 at 18:59
  • Really works: <div class="editor-field" style="display:none"> </div> Apr 14, 2015 at 5:09
9

This would probably work:

.invisible {
    position: absolute;
    left: -9999px;
}

EDIT: I would take a look at the common helpers in the HTML5 Boilerplate code to explore other ways of making things disappear.

0
6

You can use jQuery to acheive the solution. If you want to totally hide/show the div, then u can use:

$('#my_element').show()
$('#my_element').hide()

And if you want that your div become invisible and its still existing in the page, then you can use efficient trick:

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum
5

You can use a JQuery hide() method. $('#DivID').hide(); or $('.DivClass').hide();

1
  • Actually I was hoping not to use jquery unless I had to, but this would be a far easier option, looking at all the code I have written :) Feb 25, 2011 at 3:53
3

Layout-wise, display:none takes it completely out of the rendering tree and into this netherworld limbo. It has no well-defined dimensions or position anymore.

If you need some placeholder for scroll position, I'd suggest using a placeholder element. Some zero-height DIV or maybe even an <a name="something""></a> would work.

2

I rather use a fixed height and width (height:0; width:0;). Don't forget to eliminate borders, paddings and margins.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.