Ventanas flotantes sencillas con jQuery

Una forma muy simple de usar la librería jQuery para generar un caja flotante que se desplaza a medida que hacemos scroll sobre la página.

El HTML conviene ponerlo antes de </body> porque lo vamos a posicionar de manera absoluta así que debe estar fuera de cualquier otro contenedor que tenga la propiedad position:relative y dentro de ese DIV agregaremos cualquier cosa, en este caso, enlaces con íconos:

<div id="caja_flotante">
  <div id="cont_caja_flotante">
    <a href="#"><img src="URL_IMAGEN_1" /></a>
    <a href="#"><img src="URL_IMAGEN_2" /></a>
    <a href="#"><img src="URL_IMAGEN_3" /></a>
  </div>
</div>

Y las reglas de estilo que ponemos antes de &/head>:

<style>
#caja_flotante{
  left: 0; /* o le damos un valor para separarlo del borde izquierdo de la ventana */
  position: absolute;
  top: 0;  /* o le damos un valor para separarlo del borde superior de la ventana */
  width: ANCHOpx; /* definimos su ancho */
  /* cualquier otra propiedad gráfica como background, border, etc */
}
</style>

Y por debajo de eso, el script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var posicion = $("#caja_flotante").offset();
  var margenSuperior = 15;
  $(window).scroll(function() {
    if ($(window).scrollTop() > posicion.top) {
      $("#caja_flotante").stop().animate({
        marginTop: $(window).scrollTop() - posicion.top + margenSuperior
      });
    } else {
      $("#caja_flotante").stop().animate({
        marginTop: 0
      });
    };
  });
});
//]]>
</script>

El ejemplo online puede verse en esta página donde, en lugar de posicionarlo a la izquierda de la ventana del navegador, lo he ubicado a la izquierda del DIV contenedor del blog que en este caso es #outer-wrapper y como sé que mide 600 pixeles de ancho, la imagen se coloca en el centro de la pantalla y luego, se la desplaza hacia un lado, un poco más que la mitad del ancho de ese contenedor:

<style>
#caja_flotante{
  left: 50%;
  margin-left: -370px;
  position: absolute;
  top: 50px; 
  width: 64px;
}
</style>

REFERENCIAS:webintenta.com

Social stamps
	Contiene 108 íconos de 16x16, 32x32, 64x64 y 128x128, en formato PNG. descargar

Social media icons by simpo-jo
	Contiene 16 íconos de 240x284, en formato PNG. descargar

Vintage icon set for bloggers
	Contiene 35 íconos de 128x128 y 256x256, en formato PNG. descargar

Otra más.

Con el nuevo sistema de comentarios, cuando uno entra a una página individual de cualquier blog que lo utilice, el navegador nos posiciona al final de la pagina, un poco más arriba del formulario en lugar de hacerlo como lo haría normalmente, al principio de ella.

En realidad no es así, no pasa en todos los navegadores, es algo que ocurre en IE, Firefox y Opera es decir, en todos ... menos en Chrome ... ¿casualidad?

Cuando buscamos información en los Grupos de Ayuda de Blogger, vemos que son muchos se quejan de lo mismo y las respuestas de los moderadores son "hemos comunicado el problema a los ingenieros" o "usen Chrome que ahí anda bien".

Son ese tipo de respuestas que dan ganas de patearlos desde acá a la luna sin etapas; de la segunda, NI HABLAR, yo quiero usar el navegador que se me de la gana porque se me da la gana y sin tener que dar explicaciones a nadie por mis elecciones.

La primera respuesta llama la atención: "informaremos del problema" ¿Quiere decir que los mentados ingenieros nunca miraron si su creación funciona en los distintos navegadores tal como hace cualquiera de nosotros que tenga dos dedos de frente? ¿Será posible que sean tan negligentes? Es una pregunta retórica, no hace falta contestarla.

De todos modos, hay una solución muy parcial. Digo que es parcial porque no soluciona el problema en Internet Explorer aunque parece hacerlo en Firefox y en Opera.

Para conseguir esto, que espero que sólo sea temporal, tenemos que hacer dos cosas sencillas. Primero, buscamos el script de los comentarios anidados y allí, modificamos el atributo defer tal como indica Oloman en una de sus entradas más recientes. En lugar de esto:

<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

ponemos esto:

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

Ahora, agregamos algo así antes de </head>

<style>
#comments {
    left: -10000px;
    position: fixed;
    top: -10000px;
}
</style>
<script>
//<![CDATA[
window.onload = (function(){
  document.getElementById("comments").style.position = "static";
})
//]]>
</script>

La regla de estilo sacará el DIV contenedor de los comentarios fuera de la ventana del navegador así que no lo veremos y el script, se ejecutará cuando se haya cargado la página, restaurando la posición de ese DIV y haciéndolo visible otra vez; de ese modo, se evitará que el script interno de Blogger que escribe ese contenido, afecte al resto el sitio.

Si se usa jQuery, en lugar de document.getElementById() podría ponerse algo así:

$("#comments").css({"position":"static"});

es indistinto, ambas cosas hacen lo mismo.

No hay garantías de que esto funcione en todos los blogs pero, se puede probar y ver.

¿No cansa este manoseo que hace Blogger de sus usuarios? Si Google quiere terminar con el servicio, que lo haga de una buena vez y listo; si quiere que todos nos mudemos a su red social y nos pasemos allí las horas mientras hacemos clicks en sus avisos y los aplaudimos: que lo digan; sólo pido que nos eviten esta tortura del hacer y rehacer cada vez que a alguno de sus cráneos desarrolladores se le ocurre que es mejor toquetear el sistema en lugar de ir al jugar un rato al Pacman y de esa manera, aparentar que "labura".

Durante la tarde, Gem@ me había comentado que veía algo raro, los avatares de los comentarios estaban mal y había otros detalles extraños. Me fijé, no vi nada y pensé que era uno de esos errores temporales a los que nos tiene acostumbrados Blogger pero ... hace un rato, entro a contestar comentarios y oh surprise, los comentarios se ven ... digamos mal para no ser exagerado; avatares desproporcionados o recortados, letras pequeñas, todos los detalles gráficos perdidos en la nada.

¿Qué ocurre?

La respuesta es simple, en el nuevo sistema de comentarios anidados, el CSS se encontraba en la misma plantilla, dentro de:

<b:includable id='threaded_comment_css'>

Lo había incluido Blogger en su momento pero ahora, ha desaparecido.

No lo ha hecho en todos los blogs, en mi cuenta, algunos aún sigue estando allí pero, tengo la sospecha que comenzará a ser quitado de todos porque se ha incluido dentro de uno de los archivos CSS que Blogger carga de modo automático. Si miramos el contenido de ese archivo, veremos las reglas de estilo originales.

¿Qué efecto tiene esto?

En los blogs que utilicen el nuevo sistema y hayan modificado esas reglas de estilo lo más probable es que deban comenzar de nuevo y agregar las reglas a la plantilla manualmente. Si aún están allí, les recomendaría hacer una copia de esa parte antes que se pierda; si ya no están ... habrá que comenzar de nuevo y agregar las reglas para sobrescribir las de Blogger. Para esto, lo más seguro es colocarlas entre etiquetas <style> </style> pero poner eso justo después de <body>

En los blogs que NO usan el nuevo sistema (como este) la solución puede ser más sencilla; el problema surge porque todas esas reglas de estilo afectan al DIV cuya clase es comments; si no usamos reglas indicando esa clase sino reglas usando el ID que se llama igual, basta ir a la plantilla y buscar esto:

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>

y allí, solamente cambiamos el atributo class poniéndole otro nombre (insultos a Blogger son aceptados) o lo eliminamos:

<b:includable id='comments' var='post'>
  <div class='miscomentarios' id='comments'>

Con eso, estaremos a salvo un rato más, hasta que a alguien se le ocurra otra idea excitante ...

ACTUALIZACIÓN:

Sugeriría que la clase comments, no sólo se cambie en los blogs que no usan el nuevo sistema sino también en los que lo usan; de ese modo, el CSS será más corto y ya no sufrirá cambios cada vez que a Blogger se le de la gana modificarlo.

Para eso, basta buscar:

<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>

y darle otro nombre:

<b:includable id='threaded_comments' var='post'>
  <div class='OTROScomments' id='comments'>

de ahí en más, busquen las referencias a las reglas:

.comments

y cámbienlas por

.OTROScomments

o el nombre que le hayan dado a esa nueva clase.

Respondiendo a Chary Cirujano y otros visitantes que preguntan cosas parecidas, esta es una de las formas de modificar la numeración de los comentarios para que las "respuestas" anidadas se ven un poco distintas o se numeren de otro modo.

La primera opción es la más simple: hacer que el contador de respuestas tenga un estilo diferente, por ejemplo, un color o una fuente; para eso, agregaríamos esta regla:

.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}

dependiendo del orden en que tengamos las reglas, puede requerir el agregado de la palabra !important; por ejemplo:

color: #08C !important;

La segunda opción lo que hará es resetear el contador de respuestas de tal modo que los comentarios tendrán numeraciones distintas:

.comments .comment-replies {
  counter-reset: contadorcomentarios;
}
.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}

La tercera opción combina ambas cosas, acá se agrega un segundo contador y se muestran ambos:

.comments .comment-replies {
  counter-reset: contador_reply;
}
.comments .comment-replies .comment-block:before {
    color: #08C;
    font-size: 20px;
    content: counter(contadorcomentarios, decimal) " [" counter(contador_reply, decimal) "]";
    counter-increment: contador_reply;
}

En este último caso, lo que hacemos es armar la salida visible, uniendo los datos y cualquier otro carácter.

Si usamos los comentarios de nuevo estilo, otra vez vamos a tener que cambiar el script que agrega los emoticones ya que el viejo sistema, no funcionará (las viejas entradas: 1 | 2 | 3)

El problema surge porque Blogger añade los comentarios usando JavaScript así que ahora, debemos "esperar que sean escriots" y recién luego, analizar el texto y cambiar las imágenes.

Desplegamos los artilugios y buscamos el includable cuyo ID es threaded_comments y veremos estas líneas:

<div id='comment-holder'>
  <data:post.commentHtml/>
</div>

donde eso en color son los comentarios en si mismo; allí es donde interceptamos la página y agregamos la llamada al script:

<div id='comment-holder'>
  <data:post.commentHtml/>
  <script type='text/javascript'>NEWemoticonComentario();</script>
</div>

Ahora, deberíamos agregar el script antes de </head> y allí, pondré dos funciones, la primera, será la lista de los emoticones y es muy similar a lo que ya usábamos; la segunda es la que hará los cambios:

<script type='text/javascript'>
//<![CDATA[

// llega con el texto del comentario y lo devuelve modificado
function DRAWemo(cualTexto){
  cualTexto = cualTexto.replace(/:\)/g,'<img width="15" height="15" src="URL_imagen" />');
  // ....... sigo agregando la lista
  // y termino así:
  return cualTexto;
}

// busca los textos de los comentarios
function NEWemoticonComentario() {
  // vamos a cambiar aprte del contenido del DIV cuyo ID es comment-holder
  var  c = document.getElementById("comment-holder");
  if(c!=null) {
    // si existe, creamos una lista con todas las etiquetas BLOCKQUOTE que es donde estan los textos
    var listacoms = c.getElementsByTagName("blockquote");
    if(listacoms.length>0){
      // si hay comentario, lo leemos uno por uno
      for(var i=0; i<listacoms.length; ++i) {
        // leemos el contenido del comentario en formato HTML
        comlTexto = listacoms[i].innerHTML;
        // y lo cambiamos     
        listacoms[i].innerHTML = DRAWemo(comlTexto);
      }
    }
  }
}

//]]>
</script>

Si se usa jQuery, la segunda creo que podría simplificarse de este modo:

function NEWemoticonComentario() {
  $("blockquote.comment-content").each(function(index) {
    var nuevoTexto = DRAWemo($(this).html());
    $(this).html(nuevoTexto);
  });
}

Textify es una idea extraña pero divertida; convierte cualquier imagen que arrastramos o subimos, en otra, donde sólo se utilizan caracteres de texto.

El servicio es realmente rápido y posee un panel con una serie de opciones que podemos elegir e ir viendo el resultado para, finalmente, poder descargar neustra obra de arte en formato PNG.

REFERENCIAS:webappers.com