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

AJAX | Tutoriales

Escritorio AJAX estilo Netvibes

ByLuis June 27, 2006

Interesante y extenso tutorial sobre cÃ³mo realizar un escritorio AJAX del estilo Netvibes. El escritorio del ejemplo consta de una barra de accesos directos y de widgets (ventanas que muestran informaciÃ³n).

El tutorial explica varios temas distintos, que juntos hacen posible el escritorio AJAX:

CÃ³mo detectar IE/Firefox correctamente: no sÃ© si es la forma mÃ¡s correcta de hacerlo, pero estÃ¡ claro que funciona, al menos solo cuando quieres detectar Firefox e IE, no sÃ© que pasarÃ¡ con otros navegadores como Safari y Opera. Hay que tener en cuenta que el autor solo se ha centrado en estos navegadores.
QuÃ© es el DOM y cÃ³mo manipularlo mediante Javascript: la explicaciÃ³n grÃ¡fica me parece muy clara, y la forma de obtener los distintos nodos, aunque ya puestos, la creaciÃ³n de nuevos nodos tambiÃ©n la habrÃa explicado mediante el DOM y no sÃ³lo mediante innerHTML.
CÃ³mo crear widgets dinÃ¡micamente mediante el DOM: los amigos de las tablas estarÃ¡n en la gloria, para el resto, una tila para calmar los nervios.
CÃ³mo capturar y usar eventos del ratÃ³n: lo mismo de siempre, el problema en IE y Mozilla, IE tiene el objeto event y Mozilla lo pasa como parÃ¡metro.
CÃ³mo desplazar widgets: yo prefiero meter los eventos onmousemove, onmouseup y onmousedown directamente en el body y no capturarlo mediante Javascript, si se les pasa a la funciÃ³n el objeto event, funcionarÃ¡ tanto para IE como para Mozilla y no habrÃ¡ que estar chequeando cual es el navegador.
CÃ³mo manipular el orden en profundidad de los widgets: uso del zIndex.
IntroducciÃ³n a AJAX y JSON: una breve explicaciÃ³n de AJAX y JSON.
CÃ³mo cargar feeds en los widgets: explica cÃ³mo se usa una API especÃfica para ello.
CÃ³mo crear widgets para bÃºsquedas: tambien mediante una API.
Recursos para leer: sobre AJAX, JSON, DOM, eventos y Javascript. Una buena recopilaciÃ³n.

AJAX Desktop Tutorial

VÃa / Pixel Groovy

Javascript

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

ByLuis June 8, 2011June 8, 2011

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

Desarrollo web | Javascript | Laboratorio | XHTML

Laboratorio: indicador de calidad de password

ByLuis July 16, 2007

Cuando un usuario se registra en una aplicaciÃ³n web, suele haber casos que cuando se estÃ¡ introduciendo la contraseÃ±a, el sistema indica si la password cumple unos mÃnimos de seguridad o no. En algunas ocasiones suele darnos solo un aviso informativo, pero en otros o cumple todos los requisitos o no admite la contraseÃ±a.

En este caso vamos a crear un script que modificarÃ¡ los input password para aÃ±adirle una funcionalidad que indique la calidad de la contraseÃ±a que se va introduciendo.

El script aÃ±adirÃ¡ el evento de control de tecla pulsada (onkeyup) y realizarÃ¡ una serie de comprobaciones para conocer la calidad de la contraseÃ±a, una contraseÃ±a vÃ¡lida serÃ¡ la que cumpla todas las condiciones. Las condiciones que incluimos en el ejemplo son las tÃpicas que suelen pedir: que existan mayÃºsculas y minÃºsculas, algÃºn nÃºmero, caracteres especiales y una longitud mayor de 6.

Para chequear cada condiciÃ³n usaremos expresiones regulares y llevaremos un contador para saber cuÃ¡ntas se cumplen. Cuando hayamos finalizado las comprobaciones calcularemos el porcentaje de calidad y lo indicaremos con una barra de progreso. Esta barra se crecerÃ¡ segÃºn aumente la calidad de la contraseÃ±a e irÃ¡ cambiando de color desde un color rojo para la poca calidad hasta un color verde que indique mucha calidad.

El efecto de barra de progreso lo vamos a realizar de la siguiente manera, tenemos una imagen que va a funcionar como mÃ¡scara, tendrÃ¡ dos partes, de igual tamaÃ±o y cada parte del mismo tamaÃ±o que el ancho del input. Cada mitad tendrÃ¡ una funcionalidad, la mitad de la derecha servirÃ¡ para ocultar y la de la izquierda para mostrar, segÃºn queramos que se vaya mostrando la barra de progreso, iremos desplazando el fondo hacia la derecha para que se vaya viendo la barra de progreso. Inicialmente la lÃnea discontinua de la imagen que mostramos como ejemplo estarÃ¡ en el lado izquierdo del input.

El cÃ³digo serÃa el siguiente:

var __PASSWORD__ = {
colorKO: [255, 0, 0], // Color de contraseÃ±a no vÃ¡lida
color50: [127, 127, 0], // Color para el 50% para que no haya un cambio tan brusco
colorOK: [0, 255, 0], // Color de contraseÃ±a vÃ¡lida
width: 150,
// AÃ±ade el evento onkeyup a la caja input:password y le aÃ±ade el evento checkpassword
init: function() {
var inputs = document.getElementsByTagName("INPUT");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'password') {
inputs[i].addEventListener("keyup", __PASSWORD__.checkPassword, false);
inputs[i].className = 'password';
}
}
},
// Obtiene el color porcentual entre un color inicial y otro final, teniendo en cuenta un color intermedio
getColor: function(porc) {
var color = new Array();
var color1 = porc < 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc < 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));
return color;
},
// Comprueba la calidad de la contraseÃ±a
checkPassword: function() {
var valor = this.value;
var cont = 0;
var comprobaciones = new Array(
/[A-Z]/, // mayÃºsculas
/[a-z]/, // minÃºsculas
/\d/,    // nÃºmeros
/.{6}/,  // mÃ¡s de 6 caracteres
/(\s|\\|\/|!|"|Â·|\$|%|&|\(|\)|=|\?|Â¿|\||@|#|Â¬|â‚¬|\^|`|\[|\]|\+|\*|Â¨|Â´|\{|\}|\-|_|\.|:|,|;|>|<)/ // Caracteres especiales
);
// Miro todas las condiciones
for (var i=0; i<comprobaciones.length; i++) {
if (valor.match(comprobaciones[i])) {
cont++;
}
}
// Valores posibles en caso de 5 condiciones: 0, 20, 40, 60, 80, 100, pero el valor mÃnimo tiene que ser 20 para que coincida con el colorKO, ya que si no, al pulsar una tecla ya cambia de color a un paso colorKO+1
var porc = parseInt((cont*100/(comprobaciones.length-1))-(1/(comprobaciones.length-1)*100));
// Desplazo el background tratÃ¡ndolo como una mÃ¡scara
this.style.backgroundPosition = (parseInt(cont*__PASSWORD__.width/comprobaciones.length)-(__PASSWORD__.width))+"px 0px";
// Cambio el color de fondo
var color = __PASSWORD__.getColor(porc);
if (porc < 0) {
this.style.backgroundColor = '';
} else {
this.style.backgroundColor = 'rgb('+color[0]+', '+color[1]+', '+color[2]+')';
}
}
};
window.addEventListener("load", function() {__PASSWORD__.init();}, false);

Demo

Javascript | Tutoriales

Javascript orientado a objetos

ByLuis May 25, 2006

Interesante tutorial que nos indica cÃ³mo usar los objetos en Javascript, ya sean los objetos predefinidos, el uso del operador new, objetos literales, su declaraciÃ³n, la encapsulaciÃ³n, la herencia, la propiedad prototype para aÃ±adir mÃ©todos y atributos a un objeto, poliformismo, … explicado con ejemplos y muy Ãºtil para aquellos que empiezan y para aquellos que quieran mejorar su cÃ³digo (que a todos nos viene bien).
Object-Oriented Javascript
VÃa / Digg

Javascript

Misma altura en bloques mediante jQuery

ByLuis December 9, 2008

Buen truco para darle la misma altura a diferentes bloques cuando mediante CSS no es fácil de hacer.

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

Equal Height Columns with jQuery

Vía / CSS Globe

Javascript

Hapi.js+Vue.js reorganizar la configuración del servidor

ByLuis April 29, 2019April 29, 2019

Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.

Instalaremos los paquetes:

npm i dotenv

npm i confidence

Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:

const criteria = {
	env: 'development',
};

Y estos datos de configuración:

{
	debugLevel: {
		$filter: 'env',
		development: INFO,
		production: ERROR,
	},
}

Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.

Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:

const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );

Dotenv.config( { silent: true } );

// NODE_ENV is used in package.json for running development or production environment
const criteria = {
	env: process.env.NODE_ENV,
};

const config = {
	port: 3001,
};

const store = new Confidence.Store( config );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.

Creamos un store de Confidence y exportaremos los métodos get y meta.

Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:

const Confidence = require( 'confidence' );
const Config = require( './index' );

const criteria = {
	env: process.env.NODE_ENV,
};

const manifest = {
	server: {
		port: Config.get( '/port' ),
	},
};

const store = new Confidence.Store( manifest );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Como se puede apreciar fácilmente obtenemos el valor de port de forma bastante simple.

Y por último modificamos el fichero index.js para hacer eso de estos nuevos ficheros:

const Glue = require( '@hapi/glue' );
const Manifest = require( './config/manifest' );

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const manifest = Manifest.get( '/' );
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Puedes bajarte el código aquí

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