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:

.i         


        

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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.