Donald
Pcrusal
Raquetadisplay:none no intrusivo
Hay varias formas de ocultar información, cuando la cantidad es grande se suelen utilizar métodos como los acordeones o las pestañas, que ocultan las capas que no se quieren ver.
Normalmente utilizamos el evento onload para ocultar las capas, dejando un efecto visual de ahora te veo y ahora no te veo.
Para evitar este problema hay varias soluciones, aquí os dejo unas cuantas.
Escribir con document.write un style para ocultar una clase.
document.writeln('<style type="text/css">.hide { display:none } </style>');Añadir detrás de las capas el javascript necesario para ocultarlas
<script type="text/javascript" charset="utf-8">
$$('.hide').setStyle('display','none');
</script>Utilizar el evento domready de algunos frameworks que se dispara una vez cargado el DOM y no la página entera.
window.addEvent('domready', function() {
$$('.hide').setStyle('display','none');
});Hay que decir que si el javascript no esta activado las capas no se ocultaran y estas podrán ser vistas sin ningún problema.
Ver post
Comentar
dav#1 hace 80 días
¿Y para que quieres el estilo .hide? ¿No sería más lógico ponerle el estilo .hide a los elementos que quieras ocultar?
Ignatius#2 hace 80 días
Dicen que cada vez que usas un "document.write" Dios mata a un chino.
Si la intención es no ocultar el texto a los que no tienen javascript activado, mi elección sería la tercera, o su equivalente con el framework javascript que se use.
Saludos.
Icebeat#3 hace 80 días
@dav en los dos últimos casos si podrías añadir una clase, pero en el primero solo incluir el estilo.
El ejemplo es un poco genérico.
@Ignatius esta claro que la más elegante es el DomReady, pero no viene mal saber algunas alternativas :)
kerberoS#4 hace 79 días
Muy bueno Dani! Formas simples pero efectivas :) ¡Gracias!
vladimir prieto#5 hace 78 días
un tip relacionado:
para hacer "aparecer" la capa oculta con un "diplay:none", es útil usar "display:''".
el tema está en que algunos navegadores tienen distintos valores para hacer "aparecer" un display:none. Dejándolo en blanco, se utiliza el valor por defecto para display que tenga el navegador, que por lo general, es precisamente hacer "aparecer".
lo utilicé alguna vez en IE6 si mal no recuerdo y funcionó.
vladimir prieto#6 hace 78 días
ups, se me fue decir que en IE7 tambien funciona y FF2 (no lo he probado en el 3)
Ignacio#7 hace 78 días
Che, es más fácil ponerle al estilo en el html sin javascript ni nada, eso es más simple, no?
Icebeat#8 hace 75 días
@vladimir prieto gracias por el tip :), seguro que alguna vez nos saca de un apuro.
@Ignacio es más simple pero intrusivo, porque si no tienes javascript activado no puedes leer esa capa.
boton#9 hace 75 días
Yo he utilizado alguna vez la ultima, aprovechando el domready con la clase .hideJs (por que la .hide la uso para ocultar cosas que no quiero que se vean con CSS pero si que quiero que lean los lectores de pantalla, o navegadores de texto x ejemplo).
@vladimir prieto .setStyle('display',''); viene perfecto, una vez tuve bastantes problemas hasta que encontré esa misma solución ya que había block e inline y necesitaba una función genérica. Si no recuerdo mal es soportado por todo lo que tu dices (IE6,IE7,FF2) y también en Opera.
Icebeat#10 hace 74 días
@boton también suelo usar .hide para lo mismo que tú, en el caso de ocultar por JS lo que hago es pillar una ID y ocultar sus hijos por ejemplo.
emule#11 hace 47 días
Gracias, es muy útil, lo estaba buscando