display:none no intrusivo

Agregar a favoritos

10 Comentarios

Posteado hace 28 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.

Ver post

Comentar

  • avatar

    dav#1 hace 28 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 28 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 28 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 27 días

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


  • avatar

    vladimir prieto#5 hace 27 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 27 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 27 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 23 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 23 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 22 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.