Make DIV invisible in CSS and JavaScript

Question

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!

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 '11 at 03:24
Hmmh, I thought I had success with your solution but now I discovered that the android browser still scrolls upwards ... :/ — Karussell, Feb 07 '12 at 10:50

score 33 · Answer 1 · answered Feb 25 '11 at 03:24

33

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.

answered Feb 25 '11 at 03:24

Chris Van Opstal

36,423
9
73
90

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. – Bryan Downing Feb 25 '11 at 03:43
Yeah, I know about visibility, but if your DIV is a block, it will still take up that space. – Aram Kocharyan Feb 25 '11 at 03:56
+1 thanks for pointing out `visibility: hidden` vs. `display: none`. That's a useful distinction. – ashes999 Jun 08 '13 at 18:59
Really works:

– user1575120 Apr 14 '15 at 05:09

Bryan Downing · Accepted Answer · 2018-06-08T19:30:51.830

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.

edited Jun 08 '18 at 19:30

answered Feb 25 '11 at 03:25

Bryan Downing

15,194
3
39
60

score 6 · Answer 3 · answered Jan 25 '17 at 05:10

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

score 5 · Answer 4 · answered Feb 25 '11 at 03:25

5

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

answered Feb 25 '11 at 03:25

Ali

808
2
11
20

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 :) – Aram Kocharyan Feb 25 '11 at 03:53

score 3 · Answer 5 · answered Feb 25 '11 at 03:25

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.

score 2 · Answer 6 · answered Jun 16 '16 at 18:26

2

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

answered Jun 16 '16 at 18:26

Macarrao

60
1
11

Make DIV invisible in CSS and JavaScript

6 Answers6

Linked