jQuery 2.0: IE8 y cómo resolver problemas

Hace pocos meses, comentaba sobre las actualizaciones de la librería jQuery y de los recaudos que había que tomar si los implementábamos. Ahora, que ya está disponible la versión 2, todo lo dicho en ese momento sigue siendo válido pero, le debemos agregar un punto extra: la nueva librería NO es compatible con las versiones de Internet Explrorer anteriores a la 9.

Esto, no significa que funcionará mal significa que directamente: NO FUNCIONARÁ en IE8 por ejemplo porque los desarrolladores han dejado de dar soporte a ese navegador, ahorrando, de este modo, decenas de líneas de código.

¿Qué debemos tener en cuenta si es que utilizamos esta librería?

Primero que nada, sólo necesitamos una; es muy común ver que se cargan varias versiones porque se copian los códigos tal como se muestran en las páginas de ejemplo sin tener en cuenta que, cualquier cosa que agreguemos o querramos probar, debe pasar por el filtro del sentido común y tratar de entender qué estamos haciendo.

Por otro lado, si bien es fácil agregar la librería con algo así:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Esto, cargará siempre la última versión con lo cual, ciertas cosas que antes funcionaban, pueden dejar de funcionar.

La nueva versión ya está disponible en los repositorios de Google así que podemos usarla cambiando el número:

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

Ahora bien ¿Y que hacemos con IE8? Recuerden que jQuery 2 no funcionará en ese navegador.

Una alternativa es aprovecharse de los condicionales que inventó Microsoft para lidiar con estas cosas. Hay varios sitios que hablan sobre l tema e incluso el mismo blog de jQuery propone una alternativa pero, es completamente errónea así que, acá está la solución tal como define Impresive Webs y que funciona de manera correcta aunque el código parezca un poco absurdo.

<!--[if lt IE 9]>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<![endif]-->

<!--[if (gte IE 9) | (!IE)]><!-->  
  <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/>
<!--<![endif]--> 

Lo que hará eso es cargar la versión 1.9.1. en Internet Explorer 8 o inferior y la versión 2 en cualquier otro navegador.

Si quieren verificarlo, el código está colocado tal cual en este mismo blog.

Hay muchos scripts que hacen lo mismo que jFontSize pero este es bastante simple ya que usa la librería jQuery.

En general, no creo que sea algo demasiado útil ya que hacer zoom es algo que cualquier navegador admite de modo nativo pero, aún así, muchos sitios lo utilizan así que no hay nada de malo en tenerlo como opción. La idea es facilitar la generación de botones que permitan aumentar o disminuir el tamaño de las fuentes de los textos.

El script es muy pequeño y puede descargarse desde la web del desarrollador aunque lo que ahí nos ofrecen no admiten las opciones que posee el plugin (es raro pero es así) entonces, lo mejor, es descargar el zip con los scripts y los ejemplos. Allí, en la carpeta JS, veremos el archivo que necesitamos: jquery.jfontsize-1.0.js

Una vez agregado a nuestro sitio, antes de </head> deberíamos establecer las reglas de estilo de esos botones. En este caso, puse lo siguiente pero, puede ser cualquier otra cosa:

<style>
  .jfontsize-button {
    background-color: #EEE;
    border-radius: 4px;
    box-shadow: 0 0 0.2em #888 inset;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    margin: 0 1px;
    opacity: 0.8;
    padding: 0.3em 0;
    text-align: center;
    text-decoration: none;
    width: 2em;
  }
  .jfontsize-button:hover {
    opacity: 1;
  }
  .jfontsize-disabled, .jfontsize-disabled:hover {
    opacity: .5;
    pointer-events: none;
  }
<style>

Y de manera genérica, lo ejecutamos de este modo:

$(document).ready(function() {
  $('#nombreID').jfontsize();
  // o bien esto otro si queremos hacer referencia a la clase
  $('.nombreCLASE').jfontsize();
})

Donde nombreID o nombreCLASE deben indicar la etiqueta sobre la que funcionará, teneindo en cuenta que esa etiqueta debe tener una regla de estilo con un tamaño de fuente ya sea específico o heredada de su contenedor. Por ejemplo, si quisiéramos aplicarlo a todas las entradas de este blog, debería usar algo así:

$('.post-body').jfontsize();

ya que los textos se encuentran en un DIV con esa clase sin embargo, si dentro de esa etiqueta, hay otras que especifican un tamaño, estas no se verán afectadas; veamos un ejemplo concreto:

<div id="demojfontsize">
  <div style="text-align:right;">
    <a id="jf1-b1" class="jfontsize-button" href="#">A-</a>
    <a id="jf1-b2" class="jfontsize-button" href="#">A</a>
    <a id="jf1-b3" class="jfontsize-button" href="#">A+</a>
  </div>
  ... un texto cualquiera ...
  <span style="color:#FF0; font-family:cursive; font-size:20px;">otra fuente y otro tamaño</span>
  ... un texto cualquiera ...
</div>

si el script lo ejecutamos así:

$('#demojfontsize').jfontsize({
  btnMinusClasseId: '#jf1-b1',
  btnDefaultClasseId: '#jf1-b2',
  btnPlusClasseId: '#jf1-b3'
});

Los botones A- y A+ aumentarán o disminuirán el tamaño del texto y el botón A central restaurará el tamaño a su valor original pero, nada de eso afectaría el span de color amarillo ya que en la etiqueta, el tamaño del texto es explícito porque se encuentra en un atributo style o está definido en alguna otra regla.

La cantidad de clicks sobre los botones es infinita así que llegará un momento en que el tamaño sea gigantesco o no se vea nada. Eso es algo que podemos controlar con las opciones:

btnMinusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede decrementarse el tamaño
btnPlusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede incrementarse el tamaño
sizeChange es un valor que establece cuanto aumenta o disminuye y por defecto es 1y está expresado en pixeles

Si el script dijera esto:

$('#demojfontsize2').jfontsize({
  btnMinusClasseId: '#jf2-b1',
  btnDefaultClasseId: '#jf2-b2',
  btnPlusClasseId: '#jf2-b3',
  btnMinusMaxHits: 5,
  btnPlusMaxHits: 5,
  sizeChange: 1
});

Habría un máximo de cinco clicks disponibles y al llegar a ese límite, el botón se deshabilitaría.

Para usarlo en distintas etiquetas de la misma página, debemos indicar al script, el ID o la clase de los botones que es lo que hacemos con estas opciones:

btnMinusClasseId es el ID o clase del botón decrementar
btnDeafultClasseId es el ID o clase del botón incrementar
btnPlusClasseId es el ID o clase del botón restaurar

Stratus es un plugin que requiere jQuery y nos permite agregar una barra de reproducción que se conecta con una cuenta cualquiera de SoundCloud, con una lista de reproducción, grupos o archivos individuales.

Se puede incluir fácilmente en cualquier sitio incluso Blogger ya que es un script que podemos colocar en cualquier parte, ya sea la plantilla, una entrada o una página estática:

<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>

Al cual debemos configurar indicando la url con la dirección que queremos cargar:

<script type="text/javascript">
  $(document).ready(function(){
    $.stratus({links: 'https://soundcloud.com/nathan-arnone/sets/r-e-m-green'});
});
</script>

En este ejemplo, es un set (una lista de reproducción) pero podría ser la cuenta de un usuario y reproducir los temas de manear aleatoria de este modo:

$stratus({
  links: 'http://soundcloud.com/nombre',
  random: true
});

Tiene más opciones y todas se agregan del mismo modo:

align indica dónde aparecerá la barra; por defecto es bottom pero puede usarse top si se queire mostrar arriba
animate es el efecto gráfico, puede ser slide (es el valor por defecto), fade, o false si no se quiere ninguno
auto_play puede ponerse a true si queremos que comience a reproducirse automa´ticamente
buying muestra (true) u oculta el botón de comprar
color define el color de los controles y por defecto es F60
download muestra (true) u oculta el botón de descargar
links es la url a reproducir, si se quieren poner temas sueltos, se separan con comas
offset es la separación dela barra con respecto al borde
position define la posición, si quedará fija (fixed) que es el valor por defecto o no (scroll)
random si es true los temas se reproducirán de manera aleatoria
stats muestra (true) u oculta el botón de estadísticas y detalles
theme permite establecer un estilo especial indicando la url del archivo CSS
user muestra (true) u oculta el botón de información
volume es el volumen y es un valor entre 0 y 100 (por defecto es 50)

Una selección de plugins que utilizan la librería jQuery para crear galerías de imágenes, sliders y slideshows.

De todo un poco como en botica.

Quienes utilicen jQuery y actualicen la librería de manera sistemática o la enlacen desde los repositorios de Google, verá que la nueva versión es la 1.9.

Esto, que es algo normal y suele ser una actualización sin demasiada importancia desde el punto de vista de un usuario, se puede transformar en un problema serio ya que, esta versión no sólo modifica ciertas funciones sino que elimina otras de manera definitiva por lo tanto, algo que tal vez usábamos de manera normal, al actualizarla, dejará de hacerlo.

Lo mismo ocurrirá si queremos agregar algún plugin que vemos en la web y está pensado para una versión diferente.

No existe ninguna solución genérica que permita resolver esto y, cada desarrollador deberá adaptar sus scripts a las nuevas reglas por lo tanto, si notan que algo no funciona con alguna de ellas, primero que nada, verifiquen si hay actualizaciones disponibles para esta versión.

Los cambios están enumerados en la página de jQuery y son abundantes.

Eventualmente, ellos recomiendan agregar un script extra que debe insertarse justo debajo de la librería y que cargará una serie de funciones que permitirán mostrar a los desarrolladores, cuál o cuales son los cambios que deberían hacer:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.0.0.js'/></script>

Según explican, el uso del plugin jQuery Migrate permite restaurar algunas de esas funciones eliminadas pero es una solución temporal y por lo que he visto, no parece funcionar siempre.

Un detalle extra: la versión 2 que saldrá muy pronto, dejará de dar soporte a las versiones 6,7 y 8 de Internet Explorer.

Resumiendo: mucho cuidado