display: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 599 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 599 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 599 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 599 días
Muy bueno Dani! Formas simples pero efectivas :) ¡Gracias!
vladimir prieto#5 hace 598 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 598 días
ups, se me fue decir que en IE7 tambien funciona y FF2 (no lo he probado en el 3)
Ignacio#7 hace 598 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 594 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 594 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 593 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 566 días
Gracias, es muy útil, lo estaba buscando
vrS#12 hace 186 días
Una pregunta con un "problemilla" que tengo actualmente ¿como harías para ocultar un embed de wmplayer que reproduce un stream de radio, pero sin dejar de reproducir el embed.
Menciono el embed de wmplayer por que ese me han pedido que ponga.
Tonse, he puesto un evento a un boton para que al darle clic en la parte inferior, en la esquina se ponga un div semitransparente con el embed con position:fixed, pero me gustaria que el reproductor wmplayer no se vea, es decir, solo el div para que yo le ponga con algun otro estilo: "Estas escuchando la radio "X""... nose si me di a entender. Saludos!
vrS#13 hace 185 días
Bueno, poniendole un top para que se salga de la vista funciona como quiero xD... pero no es exactamente lo que tenia en mente :P
vrS#14 hace 185 días
Juaz!! lo hice mejor poniendole al embed height=0 y width=0
b4du3l#15 hace 180 días
y este wey con quien habla?, tiene amigos imaginarios? o en realidad conoce a guazu?... saludos!!
b4du3l#16 hace 180 días
si no tienes con quien platicar mandale un mensaje a dharma esta ansioso de leerte
ralexsismf#17 hace 179 días
Ya somos 3 hablando solos, cuando te animas a postera Dani?