Linea de Codigo

Una cosa que podemos hacer de forma muy sencilla con jQuery es ejecutar animaciones de elementos. Y es que jQuery nos proporciona una función para animar elementos. Esta función es .animate().

Pero vamos por pasos. Lo primero será insertar el elemento que queremos animar. Por ejemplo, una imagen. Así que colocamos la imagen en la página.

<img src="contenido.png" alt="logo" id="logo" height="50px"/>

Lo siguiente será decidir en qué momento queremos realizar la animación. En nuestro caso la secuencia será la siguiente. Cuando pasemos el ratón sobre la imagen agrandaremos dicha imagen. Y cuando salgamos de la imagen con el ratón, devolveremos la imagen al tamaño original.

Así que vamos a utilizar la gestión de eventos que nos proporcionan los métodos .mouseover() y .mouseout(). Será desde estos eventos dónde lancemos la animación.

$(document).ready(function(){
  $("#logo").mouseover(function(){...});
  $("#logo").mouseout(function(){...});
});

Vemos que los métodos se lanzan sobre el elemento al que hemos dado el id "logo".

Ahora ya pasamos a realizar la animación de la imagen. Y como habíamos comentado al principio del artículo utilizaremos el método .animate().

El método .animate() recibe como parámetros diferentes de cosas. Pero el primer parámetro, que es el más importante, recoge las propiedades que queremos modificar en el elemento para la animación. Pero vemos el resto.

.animate( properties [, duration] [, easing] [, complete] )

Vemos que además de los parámetros CSS a modificar podemos establecer: la duración, que indica en milisegundos cuánto tiempo durará la animación. La función que podemos ejecutar durante la animación es la que se referencia en el parámetro easing y con el parámetro complete podemos indicar qué función queremos ejecutar al finalizar la animación.

Pero volviendo a nuestro ejemplo, lo haremos de la forma más sencilla. Es decir, solo modificando las propiedades de la imagen. Como indicamos que al entrar con el ratón sobre la imagen la haríamos más grande, lo que vamos a realizar es incrementar su tamaño, es decir, su atributo height. Y justamente lo contrario cuando salgamos de la imagen.

Así nuestro código jQuery quedará de la siguiente forma:

$(document).ready(function(){
  $("#logo").mouseover(function(){
     $(this).animate({height:'150px'});
  });
  $("#logo").mouseout(function(){
     $(this).animate({height:'50px'});
  });
});

Puedes probar el resto de propiedades del método animate, por ejemplo, si queremos hacer más lento cuando la imagen se haga grande.

$("#logo").mouseover(function(){
  $(this).animate({height:'150px'},2000);
});

¿Qué se te ocurre hacer con la función .animate() de jQuery?

jQuery nos permite modificar la opacidad de los elementos con una gran facilidad. Ya lo vimos haciendo un efecto de Fade.

Pero ahora vamos a algo más sencillo, simplemente vamos a aplicar un cambio de opacidad de una imagen con jQuery. La idea será partir de una imagen y un enlace que nos permita aplicar la opacidad.

<img src="contenido.png" alt="logo" id="logo"/><br/>
<a href="#" id="opacidad">Opacidad</a>

Lo siguiente será capturar el evento click sobre ese enlace:

$(document).ready(function(){
	$("#opacidad").click(function(e){
		//Código de cambio de opacidad
	});
});

Y es que será en el evento click dónde aplicaremos el cambio de opacidad. El cambio de opacidad se consigue modificando la propiedad opacity de CSS. Para ello vamos a utilizar el método .css de jQuery.

$("#logo").css("opacity", 0.2);

Es importante saber que los valores de la opacidad varian entre 0.0 y 1.0.

Ahora cuando pulsemos sobre el enlace aplicaremos la opacidad sobre la imagen habiendo utilizado jQuery.

Utilizando jQuery podemos crear de una forma muy sencilla efectos de Fade, es decir, ocultar o mostrar un elemento de forma gradual. Para poder realizar un efecto de Fade en jQuery utilizaremos los métodos .FadeOut() y .FadeIn().

Pero lo primero será poner un elemento sobre el que aplicar el efecto Fade. En nuestro caso utilizaremos una imagen.

<img src="contenido.png" alt="logo" id="logo"/>

Ahora ponemos los enlaces para ocultar y mostrar:

<a href="#" id="ocultar">Ocultar</a> | <a href="#" id="mostrar">Mostrar</a>

Lo que haremos ahora será poner el código jQuery que controle el evento onclick sobre estos enlaces. Para poder hacer esto necesitamos el método click sobre los enlaces.

$("#mostrar").click(function(e){
  // Efecto Fade
});

Ya solo nos quedará el ejecutar los efecto con los métodos .FadeOut() y .FadeIn().

$("#ocultar").click(function(e){
  $("#logo").fadeOut();
});
$("#mostrar").click(function(e){
  $("#logo").fadeIn();
});

Si queremos podemos configurar el tiempo en el cual realizamos el efecto del face. Para ello pasaremos el tiempo, en milisegundos, a las funciones .FadeOut() y .FadeIn().

$("#ocultar").click(function(e){
  $("#logo").fadeOut(2000);
});
$("#mostrar").click(function(e){
  $("#logo").fadeIn(2000);
});

Algo sencillo realizar un efecto de fade en jQuery.

Ahora que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en ciertos navegadores y consultas sobre cómo montar una alternativa.

Lo que vamos a ver en este artículo es como crear un slider con jQuery. Y no es que jQuery nos de un slider como elemento base de su lenguaje, si no que vamos a utilizar un plugin de jQuery para poder crear un slider.

En concreto utilizamos el plugin fd-slider. Además vamos a utilizar la técnica de polyfills que vimos el otro día con el ejemplo sobre un placeholder.

Lo bueno del plugin fd-slider es que al ser un polyfill nos permite construir nuestra página con HTML5 y solo se ejecutará en aquellos navegadores que lo necesiten y durante el tiempo que lo necesiten.

Lo primero que tenemos que saber del plugin es que lo componen dos ficheros:

fd-slider.js
fd-slider.css

Utilizando el loader de Modernizr veremos que quedaría de la siguiente forma:

Modernizr.load({
	test:Modernizr.inputtypes.range,
	nope:['fd-slider.js','fd-slider.css']
});

Vemos que la capacidad que validamos del HTML5 es Modernizr.inputtypes.range.

Una vez cargados los ficheros del plugin fd-slider tenemos que lanzar el siguiente código para inicializar el plugin:

fdSlider.onDomReady();

Así que insertaremos dicho código dentro del polyfill.

Modernizr.load({
  test:Modernizr.inputtypes.range,
  nope:['fd-slider.js','fd-slider.css'],
  complete:function(){if(fdSlider)fdSlider.onDomReady();}
});

Ya tendremos cargado nuestro slider con jQueryfuncionando en la página.

Os podéis descargar el plugin fd-slider desde https://github.com/freqdec/fd-slider

Seguro que alguno de vosotros ha leido nuestro artículo que cuenta como utilizar un placeholder con HTML5. Esto nos posibilita el poner un texto dentro de un campo de un formulario para orientar al usuario sobre que contenido insertar en dicho campo.

Si bien, uno de los problemas que nos plantea el uso de ciertas propiedades HTML5 es la falta de implementación por parte de ciertos navegadores. Es por ello que la experiencia del usuario de esos navegadores puede ser diferente a la del resto.

Si queremos utilizar placeholders sin HTML5 podemos recurrir a un plugin de jQuery. Mediante el uso de jQuery y este plugin será muy sencillo poder utilizar un placeholders. Además es que la forma en la que utilicemos el placeholders será la misma forma en la que lo utilizábamos en HTML5.

Es decir, si queremos crear un placeholders pondremos lo siguiente:

<label for="texto">Nombre: </label>
<input type="text" id="texto" placeholder="Inserte su nombre" size="40" />

Para poder utilizar el placeholders con jQuery tendremos que hacer varias cosas. La primera será instanciar jQuery e instanciar el plugin de jQuery.

<script src="jquery.js"></script>
<script src="jquery.placeholder.min.js"></script>

Y el siguiente paso inicializar el plugin de jQuery. En este caso el código de incialización es:

$('input, textarea').placeholder();

Si bien, deberemos de esperar a tener cargada la página. Por ello recurriremos al método ready() de jQuery.

<script>
$(document).ready(function(){
	$('input, textarea').placeholder();
});
</script>

Con un plugin de jQuery y unas pocas líneas de código tenemos la capacidad de dar soporte a los placeholders de HTML5.

Te puedes descargar el plugin jQuery desde https://github.com/mathiasbynens/jquery-placeholder.

El otro día veíamos como poder generar un efecto leer más texto con jQuery sobre un texto que no tenía estructura predefinida y que se encontraba dentro de un DIV.

Hoy vamos a ver como simplificar este ejemplo si tenemos la estructura del texto predefinida. Con lo que nos quedará un efecto leer más texto simplificado.

Y es que si podemos estructurar el texto sobre el que queremos realizar el efecto sería bueno que lo insertásemos en capas SPAN. En concreto en tres capas SPAN.

• summary, con el texto de resumen.
• complete, con el resto del texto.
• more, con el texto "leer más".

Es importante que utilicemos elementos SPAN ya que estos son inline y se mostrarán todos seguidos, si saltos y darán uniformidad al texto.

La estructura quedará de la siguiente forma:

<span class="summary">
 
Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.
 
</span>
<span class="complete">
 
Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.
 
Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper. Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.
 
</span>
<span class="more">Leer mas...</span>

El código jQuery se quedará simplificado ya que solo tendremos que controlar el .toggle() sobre el elemento "more". Es decir, el cambio de estado de este elemento.

$(document).ready(function(){
	$(".more").toggle(function() {
	    $(this).text("Leer menos...").siblings(".complete").show();
	}, function() {
	    $(this).text("Leer mas...").siblings(".complete").hide();
	});
});

En cada uno de los cambios de texto realizamos las tres acciones apoyadas en los métodos .text() para cambiar el texto del elemento "more", .siblings() para ir a por el elemento hermano "complete" y .show()/.hide() para ocultar o mostrar el texto.

Vemos que con la estructuración predefinida de la página se nos simplifica mucho el código jQuery ya que nos evitamos la reestructuración del contenido "al vuelo" con jQuery.

El efecto slide es el que nos permite realizar un desplazamiento de un elemento en alguna dirección (izquierda, derecha, arriba o abajo). En las siguientes líneas veremos lo sencillo que es hacerlo con jQuery.

En nuestro ejemplo vamos a desplazar una capa que tengamos en la página, para ocultarla. De esta manera aplicaremos el efecto slide en ese momento.

Lo primero que tenemos que saber es que la función que oculta un elemento en jQuery es .hide(). Pero si vemos la sintaxis (la más común) de esta función:

.hide(velocidad, [funcion_callback])

Nos damos cuenta que solo podemos aplicar una velocidad de ocultación y una función de callback para ejecutar cuando se termine la ocultación. Entonces, ¿dónde ejecuto el efecto?

Para ello tenemos la librería jQuery UI, que es una extensión al core de jQuery, dotándole de capacidades gráficas como la de los efectos.

Así en jQuery UI encontraremos una extensión de la función .hide() para que podamos aplicar efectos. Lo mismo sucede con las funciones .show() y .toggle(). De esta manera la función .hide() podrá recibir un efecto como parámetro.

El efecto se compondrá de dos partes:

• Nombre del efecto
• Parámetros del efecto

En el caso del efecto slide podemos indicar como parámetros la dirección (izquierda, arriba,...), distancia (punto del elemento en el que se aplicará el efecto) y el modo (si es show o hide).

De esa manera nuestro efecto saliendo hacía la izquierda sería algo así:

$(this).hide("slide", { direction: "left" }, 5000);

Dónde this será el elemento sobre el que aplicamos el efecto. Por ejemplo, si queremos desplazar una capa:

 
<div id="micapa" style="background-color:red;width:100px;height:100px"></div>
 

El código jQuery nos quedará de la siguiente forma:

$(document).ready(function(){
  $("#micapa").click(function(){
    $(this).hide("slide", { direction: "left" }, 5000);
  });
});

Hemos utilizado el método .click() para lanzar el efecto cuando se pulse sobre la capa.

Con esos sencillos pasos tenemos completado el efecto slide con jQuery.

En el ejemplo de hoy vamos a ver como podemos codificar el efecto leer más texto con jQuery. La idea es tener un texto, del cual solo mostraremos su contenido inicial y un enlace que indique "leer más". Al pulsar sobre el enlace "leer más" se producirá el efecto leer más texto que consiste en mostrar el contenido completo del texto.

Seguro que habéis visto el efecto leer más texto en muchas web, como por ejemplo en los comentarios de YouTube.

Lo primero será poner el texto en nuestra página. El texto será completo y se encontrará dentro de una capa DIV.

 
<div class="comentario">
	Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.<br>
	Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.<br>
	Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper. Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.
</div>
 

Siempre que utilicemos jQuery es bueno el utilizar clases o indicadores para acceder a los elementos. En este caso hemos utilizado el id "comentario" para identificar claramente nuestro texto.

Ahora ya vamos con nuestro código jQuery, el cual colocaremos en la cabecera de nuestra página dentro del método .ready().

Acordaros que el método .ready() se ejecuta una vez que se ha cargado toda la página, asegurando así la consistencia de nuestro código a la hora de acceder a los elementos.

Lo primero que hacemos es establecer el número de caracteres que se previsualizarán y extraeremos la subcadena que representan del contenido del texto. El contenido nos lo dará el método .html() sobre la capa "comentario" y la subcadena la conseguimos mediante el método Javascript .substr().

var caracteresAMostrar = 300;
var contenido = $(".comentario").html();
 
if (contenido.length > caracteresAMostrar) {
  var resumen = contenido.substr(0, caracteresAMostrar);
  var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
}

En la variable resumen dejamos el resumen de texto a mostrar, mientras que en la variable todo dejamos el resto del contenido.

Ahora, con estos textos vamos a modificar la estructura de la página (si nos hubiesen dado esta estructura previa nos ahorraríamos estos pasos, pero hemos preferido partir de un texto completo).

En la nueva estructuración crearemos dentro del DIV el texto, un SPAN donde tendremos el resto del texto y otro SPAN con la frase Leer Más. Luego veremos que este texto lo modificamos dependiendo de si hay que "Leer más o leer menos".

var nuevocontenido = resumen + '<span class="complete">' + todo + '</span><br><span class="more">Leer mas...</span>';
$(".comentario").html(nuevocontenido);

El código jQuery de esta parte queda de la siguiente forma:

var caracteresAMostrar = 300;
var contenido = $(".comentario").html();
 
if (contenido.length > caracteresAMostrar) {
  var resumen = contenido.substr(0, caracteresAMostrar);
  var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
 
  var nuevocontenido = resumen + '<span class="complete">' + todo + '</span><br><span class="more">Leer mas...</span>';
   $(".comentario").html(nuevocontenido);
}

Ahora tenemos que codificar el efecto leer más texto en jQuery. Y este paso es sencillo. Ya que si pinchamos sobre "leer más" habrá que hacer visible la parte definida como "more" y poner un texto "leer menos". Y si pulsamos sobre "leer menos" realizaremos el efecto contrario, que será esconder "more" y poner el texto "leer más".

Como estamos hablando de un cambio de estado de un elemento. De nuestro elemento "more". Lo que haremos será apoyarnos en el método .toggle(), el cual efectua una acción u otra cada vez que pulsemos sobre el elemento.

El código jQuery quedará de la siguiente forma:

$(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
}, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
});

Vemos que utilizamos varios métodos de jQuery:

• .text(), nos permite cambiar el texto del elemento por "leer menos" o "leer más".
• .siblings(), nos permite acceder a los elementos que está en nuestra misma estructura del DOM, el id se lo pasamos por parámetro.
• .show(), muestra el contenido del elemento.
• .hide(), oculta el contenido del elemento.

Con esto ya tenemos todo nuestro código jQuery y el efecto leer más texto conseguido.

Unos cuantos han sido los artículos que le hemos dedicado a la selección de texto con jQuery: Seleccionar el texto de un campo, Seleccionar el texto al posicionarse en un campo y Detectar el texto seleccionado con jQuery. Pero no quería dejar de escribir uno que nos va a dar un buen efecto visual y este consiste en seleccionar un texto solo si este no ha cambiado con jQuery.

Es decir, seleccionaremos el texto del campo si sigue siendo el mismo que al cargar la página. Si el usuario ha cambiado el contenido, ya no lo seleccionaremos.

Manos a la obra... Lo primero el formulario al uso (casi que ya lo imaginas).

 
<form id="miform">
  <label for="texto">Inserta texto:</label>
<input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
  <label for="areatexto">Cada vez que pinches en el &aacute;rea de texto se selecionará. Esto sucederá mientras no cambies el contenido original del mismo.</label><br/>
  <textarea id="areatexto" cols="25" rows="8">Texto por defecto</textarea><br/>
</form>
 

Hay que fijarse bien que hemos puesto los campos input y textarea con textos por defecto.

Será cuándo el usuario acceda al campo cuando comprobaremos si ha cambiado el texto. Para ello utilizamos el método .focus() de jQuery. En este caso vamos a ver cómo sería para el textarea.

$(document).ready(function(){
	$("textarea").focus(function(){...});
});

Ahora tenemos que diferenciar como conseguir el texto que tiene actualmente y el texto que estaba por defecto. El texto actual lo conseguiremos con .value y el texto por defecto con .defaultValue.

Así que seleccionaremos el texto, es decir, lamaremos al método .select() si son iguales.

$(document).ready(function(){
  $("textarea").focus(function(){
    if(this.value == this.defaultValue){
      this.select();
    }
  });
});

Así ya hemos seleccionado el texto solo si este no ha cambiado.

jQuery nos permite manejar de forma muy sencilla los formularios con un amplio conjunto de métodos. En este caso vamos a ver cómo podemos acceder a la lista de opciones seleccionadas de un combo y mostrarlas por pantalla utilizando la librería jQuery.

En primer lugar vamos a pintar el combo (esta vez va de fútbol):

 
<form id="myform">
<select id="equipos" multiple="multiple">
<option value="barça" selected="selected">Barça</option>
<option value="real madrid">Real Madrid</option>
<option value="atletico madrid">Atl&eacute;tico Madrid</option>
<option value="valencia">Valencia CF</option>
<option value="betis" selected="selected">Real Betis</option>
<option value="deportivo">Deportivo de la Coruña</option>
</select>
</form>
 

Si queremos que puedan existir varias opciones seleccionadas dentro del combo deberemos de utilizar el atributo multiple="multiple" dentro del select. De igual manera, si queremos prefijar una de las opciones deberemos de utilizar el atributo selected="selected".

Listaremos las opciones seleccionadas del combo cada vez que haya un cambio en dicho combo. Para ello vamos a manejar el método .change() de jQuery. En cada cambio ejecutaremos la función que le digamos al método .change().

$(document).ready(function(){
  $("#equipos").change(function(){
    ...
  });
});

Y ¿qué va a hacer nuestra función? Pues recorrer el elemento select. Pero no todo el elemento select, si no aquellas opciones que estén seleccionadas. Así que vamos a utilizar un selector. El selector será:

#equipos option:selected

Es decir, del combo o select 'equipos' elige aquellas opciones, u option, que estén seleccionadas, es decir 'selected'.

Ahora, de cada opción obtendremos su valor mediante el método .text()

$("#equipos option:selected").each(function() {
  texto += $(this).text() + " - ";
});

Ya solo nos quedará volcar el contenido en alguna capa de nuestra página. Para ello creamos un elemento DIV al que llamaremos 'resultado' y al que volcaremos los datos mediante:

$("#resultado").text(texto);

Solo nos queda un pequeño detalle. Y es que si hemos puesto campos seleccionados de antemano, si queremos que se ejecute nuestro método .change(), podemos simular el ejecutarlo mediante el método .trigger()

$("#equipos").trigger('change');

De esta manera tendremos la primera ejecución del .change(). El código entero nos quedará de la siguiente forma:

$(document).ready(function(){
  $("#equipos").change(function(){
 
    var texto = "Opciones Seleccionadas: ";
    $("#equipos option:selected").each(function() {
      texto += $(this).text() + " - ";
    });
 
    $("#resultado").text(texto);
 
  }).trigger('change');
});