About Taringa!

Popular channels

[Blogger] Elemento que desaparece tras unos segundos

Puede que en ocasiones nos sea útil mostrar algún contenido pero que este sólo permanezca unos segundos visible. Sería el caso de algún aviso, un elemento publicitario o incluso como me propuso alguien, una pantalla de presentación. Al final de esta entrada hay un ejemplo, por si queréis ver el resultado antes de comenzar a leer.

Para ello vamos a echar mano de lo que resulta más sencillo y que es la instrucción JavaScript setTimeout, que hace una tarea que se le indique, pero con una demora de tiempo que podemos programar.


Lo primero que necesitamos es un sistema para hacer que las cosas aparezcan/desaparezcan y vamos a utilizar uno bastante recurrente y que recomendamos tener siempre en plantilla, ya que sirve para bastantes cosas distintas. Si no lo tenéis todavía, aquí está el código para poner antes del </head>:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/javascript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == &quot;visible&quot{menu.className = &quot;invisible&quot;; }
else{ menu.className = &quot;visible&quot;; }
}
</script>

El código es sencillo. Primero creamos las clases visible e invisible que le dan esas mismas características respectivamente a las capas a las que se asignen esas clases. Luego se crea una función (plegardesplegar) que cuando le llega un id de una capa concreta, comprueba su clase actual y la cambia. Por tanto, pasará lo visible a invisible y viceversa.


Una vez hecho esto ya podemos montar nuestro elemento temporal. Sólo tenemos que crear una capa con una id única y justo detrás de ella, para que el contador de tiempo comience a correr tras su carga, este script:

<script type='text/javascript'>
window.load=setTimeout(&quot;plegardesplegar(&#39;id_capa_a_cerrar&#39&quot;, 8000);
</script>

En verde lo que hay que ajustar: la id de la capa a cerrar y el tiempo (en milisegundos).


Un ejemplo. Recordamos que para hacer una pantalla de presentación para el blog, propusimos hace tiempo un sistema relativamente sencillo con cookies, de manera que a un mismo usuario sólo le apareciera una vez cada cierto tiempo y no todas las veces que accediera al Home en la misma sesion. Pero este sistema todavía sería más sencillo por permitirnos prescindir de las galletitas... aunque también se podrían combinar las dos cosas.


Para hacer esto y una vez instalado el primer código de esta entrada (el de la función plegardesplegar), sólo habría que buscar el <body> y justo detrás pegar esto. El contenido interior del div es el que deberíais personalizar vosotros para que pareciera una auténtica presentación que, por supuesto, desaparecería tras unos segundos. No os paséis con el tiempo.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div class='visible' id='capasuperpuesta' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea.
</div>
</div>

<script type='text/javascript'>
window.load=setTimeout(&quot;plegardesplegar(&#39;capasuperpuesta&#39&quot;, 8000);
</script>

</b:if>

VER EFECTO AHORA MISMO (Tras 8 segundos desaparecerá automáticamente)
0No comments yet