display:none no intrusivo

Agregar a favoritos

17 Comentarios

Posteado hace 600 días en:

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.


  • avatar

    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?


  • avatar

    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.


  • avatar

    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 :)


  • avatar

    kerberoS#4 hace 599 días

    Muy bueno Dani! Formas simples pero efectivas :) ¡Gracias!


  • avatar

    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ó.


  • avatar

    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)


  • avatar

    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?


  • avatar

    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.


  • avatar

    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.


  • avatar

    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.


  • avatar

    emule#11 hace 566 días

    Gracias, es muy útil, lo estaba buscando


  • avatar

    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!


  • avatar

    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


  • avatar

    vrS#14 hace 185 días

    Juaz!! lo hice mejor poniendole al embed height=0 y width=0


  • avatar

    b4du3l#15 hace 180 días

    y este wey con quien habla?, tiene amigos imaginarios? o en realidad conoce a guazu?... saludos!!


  • avatar

    b4du3l#16 hace 180 días

    si no tienes con quien platicar mandale un mensaje a dharma esta ansioso de leerte


  • avatar

    ralexsismf#17 hace 179 días

    Ya somos 3 hablando solos, cuando te animas a postera Dani?