Laboratorio: evitar el scroll en los textarea con jQuery

ByLuis July 20, 2009

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Javascript

Flashing de elementos con Mootools

ByLuis June 12, 2008

Una librería para MooTools que permite realizar flash en los elementos. Permite indicar el color de origen, final, el número de repeticiones y el tiempo del efecto y la posibilidad de incluir propiedades al elemento (por ejemplo backgroud-color).

Su uso es sencillo y nos ofrece ejemplos de cómo utilizarlo:

/* flash on click */
$('flash-link').addEvent('click', function () {
$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});
/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
//make the ajax call
var req = new Request({
method: 'get',
url: 'element-flashing.php',
data: { 'do' : '1' },
onRequest: function() {  },
onComplete: function(response) {
$('flash-me-ajax').set('text', response).flash('#fff','#fffea1',5,'background-color',500);
}
}).send();
});
/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
var scroller = new Fx.Scroll(window, {
onComplete: function() {
$('scroll-to-me').flash('#fff','#fffea1',10);
}
}).toElement('scroll-to-me');
});

Eso sí, no olvidar que no hay que abusar de este efecto.

MooTools Gone Wild: Element Flashing

Vía / CSS Globe

Javascript | Tutoriales

Algo de Javascript avanzado

ByLuis August 31, 2006

Algo malo de dedicarse a la informÃ¡tica es que te puedes quedar anticuado con facilidad, algo bueno de ser blogger (al menos para mÃ) es que al querer dar buenas noticias y buenos scripts, te hace estar al dÃa.
AlgÃºn compaÃ±ero me ha preguntado alguna vez por partes de Javascript que no entendÃa, incluso me decÃa si realmente es Javascript. Supongo que a todos nos ha sonado raro el cÃ³digo Javascript cuando incluye JSON.
Lo malo es que cuando buscas por ese tipo de cÃ³digo que desconoces, buscas por tÃ©rminos como “javascript function”, “javascript avanzado”, y otras cosas que no suelen dar los resultados que esperamos. En el caso de “javascript function” nos suele dar cÃ³mo crear funciones, pero solo lo mÃ¡s bÃ¡sico, sin embargo, si hubieramos buscado por “javascript funciones anÃ³nimas” si hubieramos obtenido resultados deseados. Si buscamos por “javascript avanzado” solemos obtener directorios de efectos hechos en javascript y no las novedades que trae Javascript en sus nuevas versiones.
Por eso, si quieres aprender conceptos mÃ¡s avanzados de Javascript, te va a venir bastante bien este tutorial:
Quick guide to somewhat advanced JavaScript

Javascript

Foo Framework: framework javascript

ByLuis October 4, 2007

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Foo actÃºa como una mÃ¡quina virtual que traduce las etiquetas especiales de Foo a Javascript y lo enlaza con datos para crear aplicaciones web. Une la facilidad del HTML y el poder del Javascript para crear aplicaciones web complejas.

Veo una gran utilidad a este framework sobre todo para los casos en que en un proyecto existe un grupo de desarrolladores de pÃ¡ginas sin gran conocimiento de XHTML o Javascript, ya que su desarrollo es muy sencillo, con poco cÃ³digo se puede hacer mucho.

Por ejemplo, con este cÃ³digo se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

AdemÃ¡s Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicaciÃ³n.

Foo Framework

Gracias DiarioTHC

Javascript

Mejora tus técnicas de programación en Javascript

ByLuis November 27, 2006

Ya hemos publicado anteriormente una referencia a un artÃculo de new earth online y hoy vamos a hablar sobre otro de sus grandes artÃculos.

En este caso se trata de cÃ³mo mejorar nuestra forma de programar con Javascript. Una de las ventajas o inconvenientes de Javascript, segÃºn quien lo vea, es que se puede usar en cualquier parte de la pÃ¡gina web y que no existe ningÃºn mÃ©todo obligatorio de uso. Pero aÃºn asÃ, hay veces que es mejor seguir ciertos pasos para tener un cÃ³digo mejor y mÃ¡s limpio:

Separa el contenido de la funcionalidad, por ejemplo, si vas a aÃ±adir un evento a un objeto (onclick) aÃ±Ã¡delo mediante el evento window.onload usando un archivo js.
Una cosa que ya hemos comentado anteriormente es ver cÃ³mo funciona tu aplicaciÃ³n web si no estÃ¡ activado Javascript.
Realiza cÃ³digo compatible con los distintos navegadores. Desgraciadamente, a veces es necesario detectar el navegador y resolver segÃºn el navegador que sea.
Declara las variables usando var, si no lo haces puedes tener problemas en las funciones recursivas, por ejemplo si en una funciÃ³n tienes un for con una variable i y dentro de ese for vuelves a llamar a la misma funciÃ³n, al llegar al mismo bucle puedes tener problemas.

Javascript Best Practices

VÃa / dzone

Javascript

CodeMirror: consola Javascript para tus páginas web

ByLuis January 23, 2008

CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

Javascript | Laboratorio | XHTML

Laboratorio: control para direcciones IP

ByLuis July 14, 2006

Algo que me suele gustar bastante es que cuando tengo que introducir una direcciÃ³n IP en un formulario o ventana de Windows, no tenga que estar dÃ¡ndole al tabulador para cambiar de caja de texto. Lo mismo es aplicable cuando se trata de un serial number. Tambien suelo agradecer que hacer un copy/paste, no tenga que ir haciÃ©ndolo caja a caja.

Siempre viene bien hacernos un control para direcciones IP, que permita pegar toda la direcciÃ³n ip y que se rellenen las cajas correctamente y que al pulsar el punto se mueva de caja, y la verdad es que tampoco es muy difÃcil de hacer.

Javascript

Flashing de elementos con Mootools

ByLuis June 12, 2008

Su uso es sencillo y nos ofrece ejemplos de cómo utilizarlo:

/* flash on click */
$('flash-link').addEvent('click', function () {
$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});
/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
//make the ajax call
var req = new Request({
method: 'get',
url: 'element-flashing.php',
data: { 'do' : '1' },
onRequest: function() {  },
onComplete: function(response) {
$('flash-me-ajax').set('text', response).flash('#fff','#fffea1',5,'background-color',500);
}
}).send();
});
/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
var scroller = new Fx.Scroll(window, {
onComplete: function() {
$('scroll-to-me').flash('#fff','#fffea1',10);
}
}).toElement('scroll-to-me');
});

Eso sí, no olvidar que no hay que abusar de este efecto.

MooTools Gone Wild: Element Flashing

Vía / CSS Globe

Javascript | Tutoriales

Algo de Javascript avanzado

ByLuis August 31, 2006

Javascript

Foo Framework: framework javascript

ByLuis October 4, 2007

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Por ejemplo, con este cÃ³digo se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

AdemÃ¡s Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicaciÃ³n.

Foo Framework

Gracias DiarioTHC

Javascript

Mejora tus técnicas de programación en Javascript

ByLuis November 27, 2006

Ya hemos publicado anteriormente una referencia a un artÃculo de new earth online y hoy vamos a hablar sobre otro de sus grandes artÃculos.

Separa el contenido de la funcionalidad, por ejemplo, si vas a aÃ±adir un evento a un objeto (onclick) aÃ±Ã¡delo mediante el evento window.onload usando un archivo js.
Una cosa que ya hemos comentado anteriormente es ver cÃ³mo funciona tu aplicaciÃ³n web si no estÃ¡ activado Javascript.
Realiza cÃ³digo compatible con los distintos navegadores. Desgraciadamente, a veces es necesario detectar el navegador y resolver segÃºn el navegador que sea.
Declara las variables usando var, si no lo haces puedes tener problemas en las funciones recursivas, por ejemplo si en una funciÃ³n tienes un for con una variable i y dentro de ese for vuelves a llamar a la misma funciÃ³n, al llegar al mismo bucle puedes tener problemas.

Javascript Best Practices

VÃa / dzone

Javascript

CodeMirror: consola Javascript para tus páginas web

ByLuis January 23, 2008

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

Javascript | Laboratorio | XHTML

Laboratorio: control para direcciones IP

ByLuis July 14, 2006

Javascript

Flashing de elementos con Mootools

ByLuis June 12, 2008

Su uso es sencillo y nos ofrece ejemplos de cómo utilizarlo:

/* flash on click */
$('flash-link').addEvent('click', function () {
$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});
/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
//make the ajax call
var req = new Request({
method: 'get',
url: 'element-flashing.php',
data: { 'do' : '1' },
onRequest: function() {  },
onComplete: function(response) {
$('flash-me-ajax').set('text', response).flash('#fff','#fffea1',5,'background-color',500);
}
}).send();
});
/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
var scroller = new Fx.Scroll(window, {
onComplete: function() {
$('scroll-to-me').flash('#fff','#fffea1',10);
}
}).toElement('scroll-to-me');
});

Eso sí, no olvidar que no hay que abusar de este efecto.

MooTools Gone Wild: Element Flashing

Vía / CSS Globe

Javascript | Tutoriales

Algo de Javascript avanzado

ByLuis August 31, 2006

Javascript

Foo Framework: framework javascript

ByLuis October 4, 2007

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Por ejemplo, con este cÃ³digo se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

AdemÃ¡s Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicaciÃ³n.

Foo Framework

Gracias DiarioTHC

Javascript

Mejora tus técnicas de programación en Javascript

ByLuis November 27, 2006

Ya hemos publicado anteriormente una referencia a un artÃculo de new earth online y hoy vamos a hablar sobre otro de sus grandes artÃculos.

Separa el contenido de la funcionalidad, por ejemplo, si vas a aÃ±adir un evento a un objeto (onclick) aÃ±Ã¡delo mediante el evento window.onload usando un archivo js.
Una cosa que ya hemos comentado anteriormente es ver cÃ³mo funciona tu aplicaciÃ³n web si no estÃ¡ activado Javascript.
Realiza cÃ³digo compatible con los distintos navegadores. Desgraciadamente, a veces es necesario detectar el navegador y resolver segÃºn el navegador que sea.
Declara las variables usando var, si no lo haces puedes tener problemas en las funciones recursivas, por ejemplo si en una funciÃ³n tienes un for con una variable i y dentro de ese for vuelves a llamar a la misma funciÃ³n, al llegar al mismo bucle puedes tener problemas.

Javascript Best Practices

VÃa / dzone

Javascript

CodeMirror: consola Javascript para tus páginas web

ByLuis January 23, 2008

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

Javascript | Laboratorio | XHTML

Laboratorio: control para direcciones IP

ByLuis July 14, 2006

One Comment

flmn says:

July 20, 2009 at 3:25 pm

Existe un plugin para jquery que hace esto mismo, se puede descargar desde http://plugins.jquery.com/project/autogrow
Salu2

Comments are closed.

Similar Posts

One Comment