javascript - ejemplos - noscript tag

Haz el DIV invisible en CSS y JavaScript

Question

He logrado hacer que una etiqueta DIV sea invisible en JavaScript al establecer la pantalla en nula y la visibilidad oculta. Se puede lograr con esta clase también:

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

La visualización de ninguno garantizará que el cuadro DIV esté vacío, y la visibilidad oculta asegurará que no esté visible. El problema con este método es cuando tengo DIVs desplazables o áreas de texto con contenido desbordado, cuando configura la pantalla: ninguna, algunos navegadores olvidarán la posición de desplazamiento de estos elementos. ¿Hay una mejor manera de hacer que un DIV sea invisible sin usar la propiedad de visualización? Preferiría no recurrir al uso de JavaScript para registrar la posición de desplazamiento y, si es posible, tal.

EDITAR:

Logré resolverlo con tu ayuda, apliqué lo siguiente:

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

Intenté ir a la izquierda: -9999px, pero esto expande la barra de desplazamiento vertical en IE ... También envolví mi área de texto en otro DIV y apliqué los estilos visible / invisible a eso, porque la zona de texto perdería su posición de desplazamiento de lo contrario. Probé esto en Chrome, Firefox, IE y Safari en mi iPhone. Solo una nota, el DIV envuelto alrededor del área de texto no parece ayudar en FF, y la barra de desplazamiento aún se reinicia. Pero los DIVs desplazables están bien ahora. ¡Gracias por tu ayuda!

Answer 1

En cuanto al diseño, pantalla: ninguno lo saca completamente del árbol de renderizado y lo lleva a este limbo del inframundo. Ya no tiene dimensiones ni posición bien definidas.

Si necesita algún marcador de posición para la posición de desplazamiento, sugeriría usar un elemento de marcador de posición. Algunos DIV de altura cero o quizás incluso un <a name="something""></a> funcionaría.

Answer 2

Esto probablemente funcionaría:

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

EDITAR: echaría un vistazo a los ayudantes comunes en el código HTML5 Boilerplate para explorar otras formas de hacer desaparecer las cosas.

Answer 3

Prefiero usar un alto y ancho fijo (alto: 0; ancho: 0;). No te olvides de eliminar bordes, rellenos y márgenes.

Answer 4

Puedes usar jQuery para lograr la solución. Si quiere ocultar / mostrar totalmente el div , entonces u puede usar:

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

Y si quieres que tu div se vuelva invisible y aún exista en la página, puedes usar un truco eficiente:

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

Answer 5

Puedes usar un método JQuery hide (). $ (''# DivID''). Hide (); o $ (''. DivClass''). hide ();

Answer 6

Solo puede usar la visibility:hidden si desea que el elemento sea invisible pero aún así renderizado. display:none lo eliminará por completo y provocará el comportamiento de desplazamiento que mencionó.