Caja emergente al hacer scroll | Oloblogger Este es otro código sencillo de acoplar al blog, ya que se puede añadir como gadget (tipo HTML en Blogger) y sólo es necesario copiar lo que...

18 de julio de 2013

Caja emergente al hacer scroll

Este es otro código sencillo de acoplar al blog, ya que se puede añadir como gadget (tipo HTML en Blogger) y sólo es necesario copiar lo que después veremos dentro de él.

Lo peculiar es que aparece cuando se hace scroll en la página, a partir de determinada altura programada por nosotros. Y si se cierra manualmente pinchando el correspondiente símbolo (x) ya no volverá a aparecer hasta que no se refresque o se cargue otra página... para no molestar mucho.


Dentro he puesto para la oportuna demostración, los botones de Google+, Facebook y Twitter, pero de la misma manera y sólo cambiando esa parte, se puede utilizar para cualquier otra cosa, como podría ser un simple mensaje de aviso.

Se puede adornar como se quiera, pues para eso está el CSS, pero para probar, aquí está mi propuesta y si hacéis scroll veréis cómo queda.



<script type="text/javascript">$(window).scroll(function(){ if($(document).scrollTop()>=$(document).height()/5) {
$('#socialslide').show('slow');
} else {$('#socialslide').hide('slow');}
});
function closesocialslide(){
$('#socialslide').remove();
;}
</script>
<style type="text/css">
/* Contenedor general */
#socialslide {
display: none;
overflow: hidden;
position: fixed;
bottom: 30px;
left: 21px;
width: 134px;
margin: 0;
padding: 0 0 5px;
font-size: 12px;
background: black;
border-radius: 8px;
box-shadow: inset 0 0 4px #fff;
}  
/* Botón cerrar */
#socialslide a {
position: absolute;
top: 3px;
right: 4px;
color: #ccc;
font-size: 10px;
font-weight: bold;
}
/* Rótulo superior */
#socialslide > a + div {
text-align: center;
margin: 0;
padding: 10px;
background: #800000;
color: #fefefe;
box-shadow: inset 0 0 4px #fff;
}
</style>
<div style="display: none;" id="socialslide">
 <a href="javascript:void(0);" onclick="return closesocialslide();">X</a>
 <div>Recomendar</div>
 <!-- Google Plus -->
 <div style="width: 68px;height: 25px;margin: 10px auto 0;">
  <div class="g-plusone" data-size="medium"></div>
 </div>
 <!-- Facebook -->
 <div style="width: 105px;height: 25px;margin: 0px auto;">
  <iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/oloblogger&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowtransparency="true"></iframe>
 </div>
 <!-- Twitter -->
 <div style="width: 105px;height: 25px;margin: 0px auto;">
  <a href="https://twitter.com/share" class="twitter-share-button" data-lang="es">Twittear</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 </div>
</div>

En verde está marcada la dirección de mi página Facebook. Tendréis que cambiarla por la vuestra o sustituir todo el código por un Me gusta de los que apuntan a la página que se está viendo y no a la de Facebook.

Para que funcione hace falta tener instalada la librería jQuery. Si no la tenéis simplemente añadir antes de </head> la siguiente línea:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Lo vi en un blog que arreglé el otro día, así que no sabría adjudicar la autoría del invento.


¿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

22 comentarios :

  1. Me encanta Oloman. Gran idea!

    Sigue así, y suerte! ;)

    ResponderEliminar
  2. Es fantástico!!!Como todo lo que nos enseñas.
    Sencillísimo de implementar me quedó genial.Muchas gracias

    ResponderEliminar
  3. Tienes la facultad de explicar claro y hacer fácil --y a todos, independientemente del nivel en estos temas que tengamos--, lo que en principio podría sernos difícil o imposible de entender, y ya no digo de implementar.

    ¡Gracias!.

    ResponderEliminar
  4. Hola Oloman, este funciona perfecto, unas cositas, me gustaría que apareciese algo mas alto, y si me puedes dar el código de, ME GUSTA de los que apuntan a la página que se está viendo.Gracias.
    (Un saludo)

    ResponderEliminar
    Respuestas
    1. Hola Antonio. Para el Me Gusta sólo tienes que cambiar el iframe completo que aparece bajo el comentario Facebook por el código que puedes obtener aquí: http://www.oloblogger.com/2010/07/botones-facebook-compartir-me-gusta.html.

      Es el segundo y le tendrías que quitar los IF (apertura y cierre).

      Eliminar
  5. Se ve mono y no molesta. El efecto que probablemente ya hayas visto donde el contenido (algunos lo usan con iconos) se va desplazando por la página me pone los pelos de punta jaja.

    Salu2 ;)

    ResponderEliminar
    Respuestas
    1. Sí, a mí también me gustó que apareciera tras hacer scroll y que no estuviera ahí permanentemente. Además creo que llama la atención cuando sale.

      Saludos Karla ;)

      Eliminar
  6. Ya hice un Repost en mi pagina con el link de el post original y demás, Espero no hubiese sido una mala idea y tenga tu autorización. http://wortit.com.ar/posts/blogger/4/Caja-emergente-al-hacer-scroll.html

    ResponderEliminar
  7. Muy útil, y si uso Scriptaculous?! Funcionar'a? O que habría que cambiar?

    ResponderEliminar
  8. Muchas gracias!! Queda chulo. Ya lo he probado en el blog de prueba y me ha funcionado sin problemas. La unica pega es que en algunas entradas sale el recuadro cuando estoy en comentarios (porque será corta la entrada)...hay alguna forma de hacer que salga antes el recuadro??

    ResponderEliminar
    Respuestas
    1. Fíjate en esta parte del código: $(document).height()/5)

      Ese 5 indica que la caja debe aparecer cuando se baja la quinta parte del alto total de la página. Si pones un número más grande, saldrá antes.

      Eliminar
    2. ahhh!!!! gracias. Es de los pocos numeros que no habia cambiado. Se me había pasado olimpicamente jijiji Ahora perfecto :D

      Eliminar
  9. HOLAAA, LA CAJA EMERGENTE AL HACER SCROLL, NO ME SALE EN MI BLOG, PUSE TODOS LOS PASOS. QUE PODIA HACER GRASI

    ResponderEliminar
    Respuestas
    1. Escribir en mayúsculas es como gritar, BlueExtremer. Tenlo en cuenta.

      Comprueba que tienes jQuery tal y como se explica en la última parte del post. Si no lo tienes lo añades y ten cuidado de que no esté por otra parte y finalmente lo tengas dos veces. Si lo tienes una y sólo una vez, te debe funcionar... igual que a todos los demás.

      Eliminar
  10. Hola, gracias por el aporte, esta muy bien, una pregunta, hay alguna forma de adaptar el codigo para que muestre barras como las de progreso cuando el scroll llegue a un punto de la pagina?, como las que usan en la pagina de apple.
    http://www.apple.com/imac/performance/

    ResponderEliminar
    Respuestas
    1. Hola. Pienso que sería igual, pero en lugar de usar una caja fija (con los botones) en la parte inferior, que es lo que se consigue con el CSS, habría que hacer unas cajas sencillas de color pero posicionadas en la parte de la entrada correspondiente.

      Eliminar
  11. amigo y como pedo hacer que al bajar asta casi lo ultimo desaparesca tambien?

    ResponderEliminar
  12. Si te fijas en el código, se trata de una condición en la que si se baja un tanto f($(document).scrollTop()>=$(document).height()/5)
    la caja se muestra y en caso contrario (else) se esconde. Se trataría de añadir otra condición dónde se comprobara si estamos al final (o casi) y en ese punto esconderla también con .hide.

    ResponderEliminar
  13. Un truco sencillo pero de mucha utilidad, lo que debéis cambiar es http://www.facebook.com/oloblogger&send=false&amp por esta otra"http://connect.facebook.net/en_ES/all.js#xfbml=1" para que la peña que vaya a vuestras páginas pueda compartir vuestro contenido , lo que está dentro de las comillas, lo pongo por que yo soy novato y esas cosas aunque parezan sencillas... bueno no me lio, gracias Oloman por tu publicación

    ResponderEliminar
    Respuestas
    1. este enlace no vale, fué un consejo que no me sirvió, en el siguiente mensaje dejo como lo logré arreglar para que los demás no tengan el mismo problema

      Eliminar
  14. vale id a esta página, https://developers.facebook.com/docs/plugins/share-button y cogéis el código, y dentro del código donde pone developers, lo cambiamos por nuestro feed de feedburner y ya con eso queda arreglado el botón de facebook, mirad el mio en http://Expocaps.blogspot.com

    ResponderEliminar
  15. Excelente Articulo!

    ResponderEliminar