jquery - mostrar - ocultar div css
¿Cómo ocultar elementos con jQuery antes de que sean renderizados? (11)
Quiero generar un diseño html con áreas (divs, spans) que se puedan mostrar / ocultar de forma condicional. Estas áreas están ocultas por defecto.
Si llamo al método .hide () con jquery en document.ready, estas áreas pueden parpadear (los navegadores muestran documentos parcialmente cargados). Entonces aplico el estilo "display: none" en el diseño html.
Me pregunto cuál es la mejor práctica para evitar el parpadeo, porque la aplicación de "display: none" rompe la regla de incapsulación: sé lo que hace jquery con hide / show y su uso. Si la implementación de la ocultación / demostración de jquery cambiará algún día, haré que todo el sitio no funcione.
Gracias de antemano
¿Por qué no hacer esto ?:
// Hide HTML element ASAP
$(''html'').hide();
// DOM-ready function
$(function () {
// Do stuff with the DOM, if needed
// ...
// Show HTML element
$(''html'').show();
}
¡Parece que funciona bien!
Saludos.
@Andrés,
Sé que la respuesta ya ha sido aceptada, pero usando display: none; Será una pesadilla para los usuarios sin Javascript.
Usando Javascript en línea, puedes ocultar un elemento sin que parpadee. Los usuarios sin Javascript aún podrán verlo.
Considere algunos divs que deberían estar ocultos cuando se carga la página.
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
<div id="hide-me">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me").hide();
</script>
<div id="hide-me-too">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me-too").hide();
</script>
</body>
El Javascript en línea se ejecutará tan pronto como se represente el elemento, ocultándolo así al usuario.
Después de un tiempo de pensar, tengo la idea de la siguiente solución. En comparación con mi otra solución , la he reducido a la parte esencial (y la utilicé para agregar una clase de JS):
<html>
<head>
<style>
/* This could be also part of an css file: */
.container-with-hidden-elements .element {
display: none;
}
</style>
</head>
<body>
<div class="container">
<script>
document.getElementsByClassName(''container'')[0]
.className += '' container-with-hidden-elements'';
</script>
<div class="element">Content that should be initially hidden if possible.</div>
</div>
</body>
</html>
La etiqueta de secuencia de comandos se ejecuta inmediatamente y agrega una clase a un contenedor. Dentro de este contenedor hay algunos elementos anidados que ahora se ocultan porque el contenedor tiene la clase especial y hay una regla CSS que ahora tiene un efecto.
Nuevamente, esto sucede antes de que el html restante sea procesado (evita el parpadeo). Y también, si JS está deshabilitado, todos los elementos están visibles de forma predeterminada, lo que podría llamarse mejora progresiva .
No estoy seguro si esto funciona en todos los navegadores. Pero en mi opinión sería una solución simple y ordenada.
Esta es mi sugerencia. Utiliza esta solución para crear una nueva regla CSS. Lo principal: se creará una clase CSS que oculta algunos html si JS está disponible, de lo contrario no. ¡Y esto sucede antes de que se procese el contenido principal (con las partes html que deberían estar inicialmente ocultas)!
<html>
<head>
<style>
/* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...)
gets loaded with such a class this would be also overwritten. This solution does
not require the class. It is here just to show that it has no effect
if JS is activated.*/
.hidden {
display: block;
background: red;
}
</style>
<script>
// this is copied from the linked reply:
function setStyle(cssText) {
var sheet = document.createElement(''style'');
sheet.type = ''text/css'';
/* Optional */
window.customSheet = sheet;
(document.head || document.getElementsByTagName(''head'')[0]).appendChild(sheet);
return (setStyle = function (cssText, node) {
if (!node || node.parentNode !== sheet)
return sheet.appendChild(document.createTextNode(cssText));
node.nodeValue = cssText;
return node;
})(cssText);
}
// And now: This class only gets defined if JS is enabled. Otherwise
// it will not be created/overwritten.
setStyle(''.hidden { display: none; }'');
// Attention: Now that the class is defined it could be overwritten
// in other CSS declarations (in style tags or with loaded CSS files).
</script>
</head>
<body>
<button>Show/Hide</button>
<div class="">before</div>
<div class="my-element hidden">
Content that should be initially hidden if possible.
You may want to multiply this div by some thousands
so that you see the effect. With and without JS enabled.
</div>
<div class="">after</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
// Here is some ''normal'' JS code. Very likely loaded as a JS file:
$(''button'').click(function () {
$(''.my-element'').toggleClass(''hidden'');
// or setting display directly:
// $(''.my-element'').toggle()
// but well, having class hidden though it is not
// hidden makes is not so nice...
})
</script>
</body>
</html>
Un poco más complicado, pero creo que esta es una solución adecuada. La ventaja es que se evita el parpadeo y que funciona si JS no está habilitado. Y no requiere jQuery.
Estoy de acuerdo con Boris Guéry en que no se trata de ingeniería excesiva, sino más bien, una mejor práctica estándar. Iría de una manera ligeramente diferente a Boris, al agregar una clase no-js al html inicialmente y luego eliminarlo con JavaScript.
De esta manera, no está esperando que el documento esté listo para ocultar el contenido y, sin ningún JavaScript, sigue viendo el contenido. Asumir que el usuario no tiene JavaScript está más en línea con la filosofía de mejora progresiva.
ex:
<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>
mi css
#foo {
display: none;
}
html.no-js #foo {
display: block;
}
y javascript
$(document).ready(
function()
{
$(''html'').removeClass(''no-js'');
}
);
********* O por caso ***********
ex:
<div class="no-js" id="foo">foobar and stuff</div>
css:
.no-js {
display:none;
}
#foo {
display: block;
}
#foo.no-js {
display: none;
}
js
$(document).ready(function(){
// remove the class from any element that has it.
$(''.no-js'').removeClass(''no-js'');
});
Lo que siempre hago es crear un div vacío. Y si es necesario mostrar algunos datos dentro de ese componente, cargo datos de forma asíncrona (es decir, html) en él usando $ .ajax ().
No hay necesidad de una lib extra.
Luché con esto también, especialmente en IE, y lo encontré muy útil: http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/
No hay absolutamente nada de malo en establecer una propiedad de visualización inicial de un elemento, especialmente si lo encapsula en una clase css.
Por lo general, establezco una clase .js en mi elemento para establecer la propiedad adecuada cuando javascript está habilitado.
Entonces puedo configurar el CSS dependiendo de si javascript está presente o no.
ex:
<html class="js">
<body>
<div id="foo"></div>
</body>
</html>
mi css
html.js #foo
{
display: none;
}
y javascript
$(document).ready(
function()
{
$(html).addClass(''js'');
}
);
Siempre usaría Modernizr.js http://modernizr.com/ para manejar esto.
Con Mondernizr se agrega una clase ''js'' o ''no-js'' a la etiqueta HTML de su página.
Desde aquí puede ocultar sus elementos solo si la etiqueta html tiene la clase js.
Modernizr es ideal para muchas otras aplicaciones y vale la pena leerlo si no lo has usado antes: http://modernizr.com/docs/
puede aplicar "display: none" en una clase CSS.
Debido al orden en que un navegador tiene que leer un código HTML para que el JavaScript encuentre el elemento. Tienes que marcar el elemento oculto, ya que el navegador lee tu HTML.
Sin embargo, también puede insertar el código HTML en su JavaScript y puede llamar a hide antes de que se muestre.