Mostrar un DIV sólo una vez al día. | Oloblogger Basándonos en el script para generar/leer/borrar cookies que vimos anteriormente, ahora intentaremos que cualquier elemento de nuestra pági...

10 de febrero de 2010

Mostrar un DIV sólo una vez al día.

Basándonos en el script para generar/leer/borrar cookies que vimos anteriormente, ahora intentaremos que cualquier elemento de nuestra página metido en una capa concreta, no se vea constantemente, sino sólo con la periodicidad que nosotros determinemos.

En concreto, vamos a crear un cuadro que se solapará por encima de la página con un fondo oscuro semitransparente (ver Simular una ventana modal), que contendrá un aviso. Para no aburrir al personal mostrándolo contínuamente, se verá de manera individual PARA CADA VISITANTE, una sola vez cada 24 horas. En honor a la verdad, al tratarse de una cookie, el sistema discriminará realmente CADA ORDENADOR que se conecte a nuestra página.

En primer lugar hay que instalar las funciones que se citaron en Generar y recuperar cookies. Una vez hecho esto, ahora añadimos a continuación otro pequeño script que servirá para cerrar el cuadro emergente. Bueno, más bien para hacerlo visible o no-visible:

<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 == 'visible'){
menu.className = 'invisible';
}else{
menu.className = 'visible';
}
}
</script>

El funcionamiento es bien sencillo. Se envía una ID de determinada capa a la función, que recogemos con la variable identificacion. Si esta capa tiene la clase visible, la pasamos a invisible y viceversa. Dicho de otra forma, cada vez que lleguemos a la función, la capa cambiará su visibilidad (display:block, display:none). Esto lo usaremos adecuadamente después.

Ya tenemos los pasos previos para que todo funcione y ahora es cuando justo detrás de <body> colocaremos la capa y el código que comprobará si es la primera vez que el usuario ha estado en las últimas 24 horas. Si es así, la capa se verá. De lo contrario, no se verá:

<div class='invisible' id='idatenuar' style='z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8;'/>

<div class='invisible' id='idbloque' style=' z-index:100;position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center;'>
Ya he leído este aviso y ahora quiero <a href='javascript:plegardesplegar(&quot;idatenuar&quot;);javascript:plegardesplegar(&quot;idbloque&quot;);'>ENTRAR</a>
</div>

<script type='text/javascript'>
var comprobar = getCookie(&quot;vezprimera&quot;);
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie(&quot;vezprimera&quot;,&quot;1&quot;,expiration);
plegardesplegar(&quot;idatenuar&quot;);
plegardesplegar(&quot;idbloque&quot;);
}
</script>

El primer DIV de este código, sólo es para construir una capa oscura semitransparente que ocupará el 100% del espacio disponible en el navegador, colocándose por encima de la página.

El segundo DIV crea otra capa por encima de la anterior (esto se hace con z-index) con un pequeño texto y un enlace que lleva a la función antes creada (plegardesplegar) y que permite hacer invisible las dos capas solapadas, para ver el contenido normal de la página. Dentro de esta capa es donde pondremos también lo que queramos: publicidad, un aviso, un flash... en fin, lo que deseemos mostrar.

Todo esto no presenta ninguna novedad sobre lo que ya vimos en anteriores entradas, salvo que las capas las haremos inicialmentes invisibles (class='invisible').

A continuación, dentro del último script, es cuando:
  • recuperamos el valor de la cookie vezprimera
  • abrimos un condicional para comprobar si tiene algún valor
  • si lo tiene (ya se ha visitado la página anteriormente)
  • no se hace nada y por tanto las capas permanecen invisibles
  • si no tiene ningún valor (null)
  • primero hacemos la variable expiration igual a la fecha actual (incluye hora)
  • le sumamos a esa variable el tiempo requerido (24h en milisegundos=86400000)
  • añadimos (setCookie) la cookie vezprimera al ordenador del usuario con el valor 1 y una fecha de caducidad igual a expiration (24 horas después)
  • cambiamos la clase de idatenuar (capa oscura); como estaba en invisible ahora será visible
  • idem con idcapa (el contenido del segundo DIV); ahora será visible
Si volvemos a entrar por segunda vez en las siguientes 24 horas, el condicional detectará la cookie con un valor y no hará nada, por lo que no se mostrarán las capas con ID idatenuar e idcapa, que era precisamente lo que intentábamos conseguir.

Evidentemente podeis hacer esto para un tiempo mayor o menor que 24 horas cambiando el valor sugerido (86400000). De hecho, para hacer pruebas lo mejor es cambiarlo a uno más pequeño, por ejemplo 15000 (15 segundos). Desde este enlace podeis lanzar una capa de prueba. Una vez vista y durante 15 segundos, por mucho que pincheis, no volverá a ser visible. Una vez transcurridos los 15 segundos, si pinchais volverá a salir sin problemas.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

49 comentarios :

  1. Perfecto Oloman! Sabes que llevo tiempo detrás de este efecto, y lo tenía ya olvidado! Y me meto hoy y lo veo! Muchas gracias, y a seguir currándotelo como lo haces!!

    ResponderEliminar
  2. Solo por tocar un poquito más las narices... =)
    ¿Sería posible darle estilo al 2ºDIV, es decir, al cuadro blanco, y REDONDEAR LAS ESQUINAS?

    ResponderEliminar
  3. Dentro de la etiqueta STYLE puedes meter lo que quieras.
    Hay un sistema moderno, pero que no es visible en todos los navegadores.

    Hay un sistema más pesadito, pero que vale para todos los navegadores y como sólo hay que prepararlo una vez...

    Por último está el que usaría yo para trabajar poco.
    1.Quitas los bordes y el color de fondo.
    2.Metes una imagen en un background en formato gif con transparencia y la forma que quieras.

    Con eso tu aviso podrá tener las esquinas redondeadas, forma de estrella, triangular... o como quieras, sin necesidad de ceñirte a un formato ni tener que programar más código.

    ResponderEliminar
  4. Hola gente! perdón que pregunte acá pero no encontré el tema en buscador y quería saber si me podían ayudar. Encontré finalmente una plantilla soñada que se llama Zinmag primus y tiene un Slider que configuré y curiosamente me anda genial en el dashboard de Diseño y en el blog de testeo pero en mi página principal se queda estático y no se mueve, solo muestra la primera imagen y enlace.Tampoco aparece el botón de start/stop que si aparece en el blog de testeo y el dashboard.Pregunté en el sitio de donde aparece para bajarla y nada, seguí instrucciones de otros comentarios de la gente en diferentes páginas que la tienen para bajar pero tampoco, nada. Como agregado hay una barra blanca en el encabezado que no puedo quitar con nada.Esta es mi página: http://amo-el-cine.blogspot.com si por ahí ustedes saben qué es lo que sucede los bendeciré más de lo que hago siempre!! jeje. La barra blanca de úlitma no me importa pero el slider es lo que más distingue al sitio!. Millón de gracias de antemano.

    ResponderEliminar
  5. Pues has pinchado en hueso :) porque de esa plantilla no tengo la menor idea.

    Supongo que el slider se consigue con JQuery y un script que se llama de esa misma manera. Si dices que en el blog de prueba funciona, por darte alguna idea de qué hacer, puedes probar a ir quitando (provisionalmente, por ejemplo añadiendo símbolos de comentarios) otros scripts que puedan estar interfiriendo. Al menos he visto uno, que es el de los posts resumidos en portada.

    ResponderEliminar
  6. Gracias Oloman, veré si es eso! Porque lo del Jquery lo tengo al igual que el scrip. Pero veré si es lo que me dices. Mil Gracias!!!!

    ResponderEliminar
  7. Me lo miro con calma y te cuento cosas.

    Un saludo.

    ResponderEliminar
  8. Hola Oloman.

    Cuando leí lo de las galletas, me pregunte que para que servia esto, pero que algún motivo tendrías, y ahora al ver el post, me ha parecido estupendo, lo he puesto y funciona perfectamente, pero me he encontrado con un inconveniente. Como sabes el chat esta fijo, y ese, sí aparece delante, ¿habría alguna solución?
    Por si acaso no lo tienes te pongo la dirección.
    http://pruebasparadekarlatissa.blogspot.com/

    Un saludo.
    cocodrolo.

    PD. Gracias por tu esfuerzo.

    ResponderEliminar
  9. ¿Puedes probar a añadir esto al código que te forma el chat?
    <param name="wmode" value="opaque" />

    Puede ir delante o detrás de cualquier otra etiqueta param, por ejemplo, detrás de
    <param name="AllowFullScreen" value="true" />

    2ª prueba si lo anterior no funciona:
    <param name="wmode" value="transparent" />

    ResponderEliminar
  10. Hola oloman, hace tiempo hice mi primer blog gracias a vos, y anduvo muy bien, pero ya cerré ese ciclo y ahora estoy en algo nuevo. te agradezco por eso.

    Resulta que mi nuevo blgo es este http://incojerencias.blogspot.com/, obviamente no está terminado, porque necesito que el header, el body y el footer encajen las imagenes. eso va bastante bien, el problema es el espacio que queda con la imagen de abajo y el limite de la pantalla, ya que se ve una parte del background del body y me arruina la trama. si te pasas me vas a entender.

    espero me puedas ayudar a encajar las imagenes de alguna forma, :D

    Saludos y seguí así

    ResponderEliminar
  11. Hola Oloman.

    He estado intentando lo del chat, pero parece que es rebelde y no hace caso, posiblemente lo mande ejem. a su sitio, de todas formas si se te ocurre algo, no dudes en decírmelo, pues lo suyo seria dejarlo ahí, o como anónimo ha comentado, cambiarlo de columna.
    Por otra parte pienso que a este post se le puede sacar mucho partido, (la diferencia que va desde que leí lo de las galletas) te comento.
    La imagen fija la he cambiado por una imagen flash, queda bien, pero lo bueno de esto es que se puede poner una introducción en flash que es cuando se le sacara buen partido a este post.
    Voy a ver que puedo poner de intro y te aviso.
    Un saludo.
    cocodrolo

    ResponderEliminar
  12. Arriba del parquet, prueba a añadir a la línea que forma el fondo con imagen, un color:
    background: url(http://www.lafoto.com.ar/images/bodynuevit.jpg) top center repeat-y #FFCC66;
    Esto es una cosa. No entiendo muy bien si necesitas algo más...

    Cocodrolo, sobre lo del flash, incluso puedes hacer que el fondo negro sea de otra manera en lugar de semitransparente (por ejemplo con una imagen) y simularía una página aparte.

    ResponderEliminar
  13. Hola oloman, mira mi blog: http://rodrycompany.blogspot.com/
    porque la imagen en la esquina tienen un contorno violeta? como se lo saco?

    ResponderEliminar
  14. muy interesante

    www.tutoshector.blogspot.com

    ResponderEliminar
  15. Oloman, sobre la plantilla Zinmag que te preguntaba, era nomás como decías. Desinstalé la barra de Wibiya y ahora anda bien!. ADOREEEEEEE ESTE SITIO siempre me resuelven todo. Gracias. Por eso siempre los recomiendo!!!

    ResponderEliminar
  16. Rodry, prueba a meter dentro de la etiqueta IMG un border="0" ;)

    Gracias Héctor.

    Suerte, Pabela. Sólo he tenido suerte en acertar.

    ResponderEliminar
  17. Oloman, me acao de dar cuenta que a los enlases vicitados se le pone el borde violeta. como hago para que los enlases vicitados no tengan color, es decir, que desaparesca el borde? eso se puso solo, yo no modifique nada. una bronca! ¬¬

    ResponderEliminar
  18. Incluye esto en la parte de estilo de tu blog a ver si se cura:

    a:visited {
    border:0px;
    }

    ResponderEliminar
  19. Lo hice de otra manera pero gracias!

    ResponderEliminar
  20. agrague un HTML/javascrip. no me deja postear el codigo. no se porque. pero puse A:visited {COLOR: transparent; TEXT-DECORATION: none}
    ;)

    ResponderEliminar
  21. Te confieso que soy algo torpe con esto de las cookies, pero lo dificulta más el hecho de que el primer ejemplo que has elegido para su uso se me hace un poco cuesta arriba, al haber un botón para mostrar/ocultar de por medio.

    Hubiera sido más sencillo haber empezado con un ejemplo más simple, al menos para mi, por ejemplo, un cuadro con un mensaje, que es lo que yo quiero hacer... Esto es demasiado para mi... :S

    Ya me lo volveré a mirar con más calma, a ver si puedo adaptar esta idea a mi necesidad concreta.

    Gracias por el esfuerzo, como siempre.

    PD: definitivamente, lo mío es lo sencillo :D

    ResponderEliminar
  22. José GDF, el botón es sólo esto
    Ya he leído este aviso y ahora quiero <a href='javascript:plegardesplegar("idatenuar");javascript:plegardesplegar("idbloque");'>ENTRAR</a>
    Pero si no lo pones o al menos lo sustituyes por un temporizador, el aviso se quedará in eternum ahí. Es imprescindible.

    Prueba a copiar todo tal cual está aquí y luego sólo cambia el contenido del DIV con ID=ID_BLOQUE. Te quedará lo que tú quieres.

    ResponderEliminar
  23. ¡Uf! Te agradezco la ayuda, pero ya lo intentaré en otro momento. Ahí quedan estos comentarios para futuras consultas... :S

    ResponderEliminar
  24. Tengo un pequeño problema con este ejemplo. Intento hacerlo en mi blog y no hay manera de que funciones.
    Si pongo div class=visible si que me aparece, pero si pongo lo pongo en invisible no me aparece nada. Creo que he hecho bien lo de las cookies. Mi blog es piscinasarnedo.blogspot.com y no consigo ver el error. Me puedes ayudar??

    ResponderEliminar
  25. Creo que has mezclado este sistema y el de esta otra entrada y por el aspecto, creo que quieres precisamente lo de la otra. Borra lo que pusiste (excepto el script general de gestión de cookies, que es el mimso) y vuelve a instalarlo todo según ese otro post. Lo he vuelto a comprobar y tanto en este como en aquel, lo que se proponía funciona.

    Por si acaso, coloca el valor del tiempo en 10.000 mientras haces pruebas para que sólo tengas que esperar 10 segundos para ver los distintos resultados. Cuando esté a tu gusto, ya coloca el tiempo que necesites.

    ResponderEliminar
  26. hola oloman, me ha gustado mucho el script pero quisiera que el DIV se muestre en forma automática al ingresar al sitio, es decir, cada vez que se accede al index. cómo sería el código JavaScript en este caso?
    espero puedas ayudarme..
    muchas gracias!!

    ResponderEliminar
  27. Hola Agostina. Este código funciona desde la página index y desde todas. Lo que ves aquí es una demo y sólo aparece en este post.

    ¿Lo que quieres es que salga SIEMPRE y no una vez al día? ¿Que salga sólo en el INDEX? ¿Ambas cosas?

    ResponderEliminar
  28. Hola Oloman
    Ya he agregado las funciones de generar y recuperar cookies, tambien el script que pones hacer visible he invisible.
    El problema que tengo es que yo tengo un codigo el cual es para dar una advertencia antes de antrar a la pagina pero esta advertencia se muestra siempre que ingresan a la pagina principal,lo cual es molesto y quiero que esta advertencia se muestre cada 24 horas pero no tengo idea de como hacerlo funcionar y quisiera saber si me puedes ayudar aca te dejo el codigo es largo por lo que lo pongo en tinypaste.

    http://tinypaste.com/0a068c

    Te dejo mi correo AndieRvs@live.com

    Espero que me puedas ayudar :]

    ResponderEliminar
  29. Andie, pásate a este otro post, que allí está explicado al detalle tu caso particular: http://goo.gl/F622f

    ResponderEliminar
  30. Hola!
    Yo la verdad pruebo pero no me sale (tengo una intro sacada de CiudadBlogger)
    Necesito que esa intro solo se repita una vez cada día...pero no puedo aplicar tu truco
    Me podrías ayudar?
    Este es mi blog: http://alegriahogar.blogspot.com/
    Y este mi correo: veronicamonyo@gmail.com

    ResponderEliminar
  31. Curu-Curu, actualmente voy fatal de tiempo y no puedo ver casos concretos tan al detalle. Explícame en pocas palabras (sin código, sólo el sistema usado) cómo hiciste esa intro e intentaré hacer lo propio para que incluyas el sistema de cookies que es el único que sé aplicar para esto.

    ResponderEliminar
  32. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  33. Hice un comentario pero lo poco que pude explicar no me dejo porque supuestamente tenía códigos...y no tenia nada! jaja..

    bueno a ver...el truco lo saque de aqui http://ciudadblogger.com/2011/05/crear-un-intro-para-el-blog.html

    Es básicamente ocultar el blog bajo dos capas (una es ".BlogOculto" y la otra es "#Intro") todo el código esta debajo de Body, se agrega /span arriba de /body.

    Yo probe en un blog de pruebas mio tu truco (junto con lo de agregar cookies) sin usar la intro de ciudad blogger, y la verdad que anda una maravilla.

    Pero no se como adaptarlo a la intro de ciudad blogger.

    Disculpa por hacerte perder tiempo, gracias de antemano por querer ayudarme :)

    ResponderEliminar
  34. Curu-Curu si ya has probado el truco de esta entrada y te funciona, nos va a costar infinitamente menos adaptar este que el de El Potro. Para el de Ciudad Blogger habría que añadir JavaScript y como he dicho, para eso mejor usar este.

    Si lo tienes todavía en tu prueba, sólo tienes que cambiar este DIV...

    <div class='invisible' id='idbloque' style=' z-index:100;position:fixed; overflow:visible; top:50%; left:50%; width:400px; height:300px; margin-top:-150px; margin-left:-200px; border:5px solid #990000; background:#ffffff; color:#000000; padding:20px; text-align:center;'>
    Ya he leído este aviso y ahora quiero <a href='javascript:plegardesplegar(&quot;idatenuar&quot;);javascript:plegardesplegar(&quot;idbloque&quot;);'>ENTRAR</a>
    </div>

    ...y cambiarle el tamaño y contenido para que se convierta en la Intro que quieres. Si no deseas transparencia o color negro en la capa de abajo, entonces también tendrías que cambiar las propiedades de estilo del DIV que está en el código justo antes de este.

    De todas formas, eso es para que practiques. Si prefieres partir de cero, en esta entrada está explicado exactamente lo que quieres :D

    ResponderEliminar
  35. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  36. Te aviso que en ningun lado me aparece "body" asi solo...solo aparece "/body" no se si en mi plantilla aparecera de otra forma (uso las del diseñador de plantillas de blogger)Pero igual mas o menos le ubique creo jajaja

    Tengo un problemita, no se si es en mi compu no más o no anda lo del div que se muestre en 24hrs.
    Podrías fijarte por favor si anda?
    prueba280590.blogspot.com

    cuando salgo del intro y estoy en el blog y quiero volver a la pagina principal me devuelve a la intro

    Perdón por las complicaciones, gracias nuevamente por ayudarme ^^

    ResponderEliminar
  37. Curu-Curu, TODAS las plantillas tienen un <body> y su correspondiente cierre </body>. Es una etiqueta obligatoria para cualquier página web.
    Sobre los problemas, HOY observo que tienes dos veces las capas INVISIBLE. Eso provoca conflictos porque las ID tienen que ser únicas y ahora mismo tienes dos. Se ve que con las pruebas te dejaste una por ahí extraviada. Compruébalo.

    ResponderEliminar
  38. Ah si tenes razón, tengo una abajo de /head y luego otra arriba de /body...
    Por las dudas antes de hacer macana jaja cual debería borrar?

    ResponderEliminar
  39. Bueno probe mucho y no anda el truco, una lastima, pero bueno voy a desistir no más.

    Gracias igual por la ayuda, chau.

    ResponderEliminar
  40. Curu-Curu puesto que el sistema funciona, lo que te iba a proponer es que borraras todo lo que encontraras y empezaras de nuevo. No cuesta mucho trabajo y seguro que así no se producen "efectos indeseados", pero si no te interesa tanto como para seguir, pues perfecto ;)

    ResponderEliminar
  41. Me sale errores al usar el code alguna ayuda me sale l error de syntaxis te lo pase a facebook

    ResponderEliminar
    Respuestas
    1. Te lo comenté también por allí, pero seguramente es porque no instalaste el sistema de gestión de cookies que se dice y enlaza en la primera parte del post.

      Eliminar
  42. Hola, me funciono perfectamente pero quisiera saber si es posible que la funcion no se ejecute hasta unos segundos despues de entrar al sitio o blog, gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola Siegfried

      Eslo. Es posible. Lo puedes hacer con setInterval. En este post alguien explica cómo utilizarlo.

      Eliminar
  43. Hola Olo... una pregunta, es posible personalizar la imagen? Me gustaría poner una imagen personalizada y que aparezca solo la primera vez que la persona entra a la página y que le aparezca 1 vez cada 24 horas cuando ingrese al blog... es posible hacerlo¿?

    ResponderEliminar
    Respuestas
    1. Hola Carlos. Claro que puedes poner la imagen que quieras. Cualquier cosa puede ir dentro de es DIV. Y lo de que aparezca cada 24h es justo lo que explico en esta entrada.

      Eliminar
  44. Hola Olo, he hecho todo lo que dice tu tutorial pero no me funciona..una pregunta el div que define el "pop up" va dentro de head o dentro de body?

    ResponderEliminar
    Respuestas
    1. Hola Sergio. Va dentro del BODY. Si relees el post verás que indiqué que esa parte va justo tras la apertura <body>

      Quizás no pusiste previamente en plantilla el sistema de cookies que enlacé y el "pequeño script" que también hay que añadir antes de construir la parte "pop up".

      Eliminar