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.Similar Posts:

• Efecto leer más texto con jQuery
• Efecto slide con jQuery
• Usando cookies con jQuery
• Ocultar y mostrar elementos con jQuery
• Volcar el contenido de un array 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.Similar Posts:

• Usando cookies con jQuery
• Ocultar y mostrar elementos con jQuery
• Efecto leer más texto simplificado con jQuery
• Efecto leer más texto con jQuery
• Filtrar elementos de un array 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.Similar Posts:

• Efecto leer más texto simplificado con jQuery
• Volcar el contenido de un array con jQuery
• Efecto slide con jQuery
• Modificar el contenido de una capa con jQuery
• Acceder a un campo de formulario con jQuery

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.Similar Posts:

• Seleccionar texto al posicionarse en un campo
• Detectar texto seleccionado con jQuery
• Seleccionar el texto de un campo
• Cambios en un combo con jQuery
• Acceder a un campo de formulario con jQuery

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');
});

Similar Posts:

• Cambios en un combo con jQuery
• Predeterminar valor en un combo
• Combos de selección
• Activar valores de un combo dinámicamente
• Detectar texto seleccionado con jQuery

Si el otro día vimos como seleccionar el texto de un campo (por defecto o mediante un click del usuario), hoy vamos a ver como seleccionar texto al posicionarse en un campo con jQuery. Es decir, al ir moviéndonos por los campos y llegar al determinado campo seleccionaremos el texto.

Controlar el posicionarse en un campo lo podremos hacer mediante el método .focus() de jQuery. Pero lo primero, el formulario. Como siempre, algo simple:

 
<form id="miform">
	<label for="texto">Inserta texto:</label>
<input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
	<label for="texto2">Inserta texto:</label>
<input id="texto2" type="text" value="Texto por defecto 2" size="100"/><br/>
</form>
 

Como la selección del texto al posicionarse en un campo lo vamos a aplicar a todos los campos input (de tipo text) vamos a utilizar un selector.

input[type=text]

Así que el método .focus() se quedará de la siguiente forma:

$("input[type=text]").focus(function(){ ... });

Ya solo nos quedará realizar la selección del campo de texto mediante el método .select() de jQuery.

$("input[type=text]").focus(function(){
  this.select();
});

Similar Posts:

• Seleccionar un texto solo si no ha cambiado
• Seleccionar el texto de un campo
• Detectar texto seleccionado con jQuery
• Modificar valores por defecto de un formulario con jQuery
• Todos los campos del formulario obligatorios

Seleccionar el texto de un campo nos posibilita guiar al usuario de nuestra web en la edición de textos. La idea es dejarle un campo marcado dentro del formulario. Para ello nos vamos a apoyar en jQuery.

Lo primero es poner el formulario. Nada complicado si sabes HTML:

 
<form id="miform">
	<label for="texto">Inserta texto:</label>
<input id="texto" type="text" value="Texto por defecto" size="100"/><br/>
	<textarea id="areatexto">Texto por defecto</textarea><br/>
	<button id="selectall">Seleccionar todo el texto</button>
</form>
 

Ahora, y tras haber cargado nuestra librería jQuery...

<script type="text/javascript" src="jquery.js"></script>

... nos apoyamos en el método .select() para aplicarselo a un campo. Por ejemplo si queremos seleccionar el texto del campo con id 'texto' tendremos que codificar lo siguiente:

$("#texto").select();

Otra opción es hacerlo bajo demanda. Lo que viene a ser el típico botón de "Seleccionar Todo". Que en nuestro caso hemos representado con un elemento button.

En jQuery conseguiremos capturar el click sobre el botón con el método .click(). Así el código quedará de la siguiente forma:

$("#selectall").click( function(){
  $("#areatexto").select();
  return false;
});

Hay que tener en cuenta dos cosas. Que para acceder a los id de los elementos utilizamos una almohadilla delante del nombre. Y que al final del .click() hemos utilizado un return false para parar el evento generado por el botón.

Ya hemos visto dos formas muy sencillas de seleccionar el texto de un campo. ¿Se te ocurre otra forma?Similar Posts:

• Seleccionar texto al posicionarse en un campo
• Seleccionar un texto solo si no ha cambiado
• Acceder a un campo de formulario con jQuery
• Bloquear el envío de un formulario con jQuery
• Detectar texto seleccionado con jQuery

Cuando ponemos campos de entrada en nuestras páginas web, el usuario podrá seleccionar parte del texto que haya en dichos campos. Vamos a ver como detectar el texto seleccionado utilizando jQuery.

Lo primero será poner un textarea con un texto de ejemplo:

 
<form id="miform">
  <textarea id="texto" rows="20" cols="100">Lorem ipsum dolor sit amet...</textarea>
</form>
 

Para utilizar jQuery tendremos que cargar la librería de jQuery:

<script type="text/javascript" src="jquery.js"></script>

El método de jQuery que nos ayudará a detectar el texto seleccionado es .select(). Este método habrá que asignarlo al elemento de la página sobre el que queremos detectar el texto seleccionado. En nuestro código el textarea 'texto'.

$("#texto").select(function(){	... });

El contenido que ha sido seleccionado se puede recuperar mediante el método .getSelection() de Javascript. Así que solo tendremos que ejecutar este método y volcarlo sobre la pantalla.

$("#texto").select(function(){
  selectedText = document.getSelection();
  $("#resultado").html("Se ha seleccionado el texto " + selectedText);
});

Para volcarlo en pantalla utilizamos el método .html() sobre una capa.Similar Posts:

• Seleccionar un texto solo si no ha cambiado
• Seleccionar texto al posicionarse en un campo
• Listar opciones seleccionadas de un combo con jQuery
• Seleccionar el texto de un campo
• Todos los campos del formulario obligatorios

jQuery nos ayuda de una forma muy sencilla a realizar operaciones con el DOM de la página. De esta forma nos facilita el acceder a un campo de formulario.

Lo primero será montar nuestro formulario en HTML. Algo muy sencillo si conoces el uso de la etiqueta FORM:

 
<form id="formulario">
<input id="valor" type="text" size="50">
<button id="comprobar">Comprobar valor</button>
</form>
 

El siguiente paso será montar nuestro código jQuery. Siguiendo los principios básicos veremos que el acceso a un ID del documento se consigue mediante la función:

$("#idelemento");

Para el caso de acceder a un campo de formulario es exactamente igual. Es decir, en este caso, si queremos recuperar el id "valor", escribiremos:

$("#valor");

Si bien, esto nos da acceso al elemento, no a su contenido. Para poder acceder al contenido del campo de formulario deberemos apoyarnos en la función .val().

Así, el código para acceder a un campo de formulario con jQuery nos quedará de la siguiente forma:

$(document).ready(function(){
        $("#comprobar").click(function() {
                var x = $("#valor").val();
                alert(x);
        });
});

Si revisamos el código, veremos que para acceder al campo lo hacemos desde la función click(), la cual se invoca cada vez que hacemos click sobre el botón "comprobar".

Como podemos ver, es muy sencillo acceder a un campo de formulario con jQuery.Similar Posts:

• Modificar el contenido de una capa con jQuery
• Seleccionar el texto de un campo
• Repaginar con jQuery y AJAX
• Seleccionar texto al posicionarse en un campo
• Usando cookies con jQuery

Si tenemos una serie de elementos en un array es muy probable que queramos volcar el contenido en pantalla. Vamos a ver cómo podemos hacer esta sencilla operación y volcar el contenido de un array con jQuery.

El punto de partida... nuestro array:

// Un listado de números. Soy poco original
var a=[1,2,3,4,5,6,7,8,9,10];

Lo primero que tenemos que tener es una parte de nuestra página web (de nuestro DOM) preparado para volcar el contenido. En nuestro caso hemos definido un elemento span.

<span id="resultado"></span>

A este elemento le hemos dado el id "resultado". Y es que el id es importante, ya que vía el id volcaremos el contenido del array. Para acceder al contenido del elemento "resultado" nos vamos a servir del método .text(). En jQuery el método .text() nos permite obtener el texto del elemento y todos los elementos que contenga.

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

Ahora solo nos queda volcar el contenido sobre el texto. Para ello nos vamos a valer de un método Javascript, del método .join(), el cual nos permite volcar el contenido de un array indicando como parámetro el separador de los elementos a volcar.

$("#resultado").text(a.join(", "));

Y con esto ya hemos conseguido volcar el contenido de un array con jQuery sobre un elemento de nuestra página.Similar Posts:

• Filtrar elementos nulos de un array con jQuery
• Filtrar elementos de un array con jQuery
• Efecto leer más texto con jQuery
• Listar opciones seleccionadas de un combo con jQuery
• Convertir un array en una cadena con JavaScript