Ya tenemos nuevo ThickBox

ByLuis August 10, 2006

De muchos es conocido Lightbox, y la popularidad que produjo a su autor en su momento cuando se hizo pÃºblico. BÃ¡sicamente es uno de los efectos que mÃ¡s se estÃ¡n viendo en pÃ¡ginas webs a la hora de mostrar imÃ¡genes. No hablamos de nada nuevo ni lo descubrimos ahora.

Y como alternativa a Lightbox tenemos ThickBox 2.0 mucho mÃ¡s ligera y potente con sÃ³lo 27Kb de cÃ³digo. Â¿QuÃ© son 27Kb que sirven para cosas como esta?.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Javascript

Laboratorio: input password estilo iPhone con jQuery

ByLuis December 2, 2008

Una de las cosas que mas me gusta del iPhone/iPod Touch es que cuando estás metiendo una password ves el último carácter que has tecleado.

Por ello he hecho este pequeño plugin para jQuery (inacabado) que realiza la misma función. Muestra la última letra tecleada y oculta el resto. Para conseguirlo lo que he hecho es transformar el input en tipo text y guardar lo que se va tecleando.

$.fn.hidder = function() {
return this.filter(':password').each(function() {
this.config = {
delay: 1,
value: '',
char: '•'
}
this.type = "text";
this.config.value = this.value;
this.value = this.value.replace(/./g, this.config.char);
$(this).bind('keydown', function(evt) {
switch(evt.which) {
case 8:
this.config.value = this.config.value.substring(0, this.config.value.length-1);
this.value = this.value.substring(0, this.value.length-1);
break;
}
});
$(this).bind('keyup', function(evt) {
if (this.value.length > this.config.value.length) {
var last = this.value.substring(this.value.length-1);
this.config.value += last;
this.value = this.value.substring(0, this.value.length-1).replace(/./g, this.config.char)+last;
var elem = this;
setTimeout(function() {elem.value = elem.value.replace(/./g, elem.config.char);}, elem.config.delay*1000);
}
});
});
}

Le faltan muchas cosas por hacer, y fallan otras, por ejemplo tratar el pulsar los cursores, restaurar el valor antes del submit del formulario, ocultar el texto despues del formulario, …

Yo personalmente no lo usaría en mi página ni loco, pero para experimento no está mal.

Javascript

Laboratorio: índice lateral con jQuery

ByLuis July 30, 2009

Algo que me gusta bastante de algunos editores tipo Netbeans es que cuando hay algún error en una línea aparece un enlace en el lateral en la posición relativa de la línea respecto al alto del editor.

Algo parecido se me ha ocurrido hacer con jQuery, obtener los elementos cabecera (H1..H6) y crear un índice, y mediante estilos y jQuery repartirlos por el lateral de la ventana.

El código es sencillito, recupero los elementos h1..h6, calculo su posición X y luego ordeno el array por esta posición, creo una lista ordenada y anidada con OLs y LIs y con CSS y Javascript coloco los elementos donde corresponde.

		  $(document).ready(function() {
var ids = 0;
var haches = new Array();
for (var i=1; i<7; i++) {
$('#content h'+i).each(function () {
if (!this.id) this.id = 'haches_'+ids++;
if ($(this).css('display') != 'none') {
haches.push(new Array($(this).offset().top, $(this).text(), this.id, i));
}
});
}
haches.sort(function(a,b){return a[0]>b[0];});
var ant = 1;
var html = '<ol class="indice">\n'
for(var i=0; i<haches.length; i++) {
if (haches[i][3] > ant) {
html += '\n<ol>';
} else if (haches[i][3] < ant) {
html += '\n</ol>';
}
html += '<li id="haches'+i+'" class="indice'+haches[i][3]+'"><span><a href="#'+haches[i][2]+'">'+haches[i][1]+'</a></span></li>\n';
ant = haches[i][3];
}
html += '</ol>\n';
$(document.body).prepend(html);
$('#indice').css('position: absolute; top: 0px');
var alto = $(window).height();
var max = $(document).height();
for(var i=0; i<haches.length; i++) {
console.log(parseInt(alto*haches[i][0]/max));
$('#haches'+i).css('top', parseInt(alto*haches[i][0]/max)+"px");
$('#haches'+i).css('left', ($(window).width()-50)+"px");
}
});

Ni que decir tiene que le faltan cosas por hacer, como por ejemplo moverlo según se mueve el scroll, pero para hacerlo en un rato no está tampoco muy mal. Los distintos tipos de enlaces a cabecera tienen sus estilos propios (feos pero propios) y cuando te pones sobre uno de ellos aparece el título enlazando al elemento en cuestión (esto también habría que refinarlo).

Ejemplo

Javascript

HTML5 Web Workers

ByLuis August 23, 2010

HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.

Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.

El script que instancia el Worker sería así:

// Crea el Web Worker
var worker = new Worker("worker.js");

// Envía un mensaje al worker
worker.postMessage(0);

// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
	// evt.data es el valor devuelto por el Worker
	alert(evt.data);
}

// Trata los errores
worker.onerror = function (evt) {
	alert(evt.data);
}

Y el worker.js sería el siguiente:

// Ejemplo de Worker
onmessage = function (evt) {
    // evt.data es el valor enviado desde el javascript
    for (var i=evt.data, il=1000001; i


Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:
onconnect = function(evt) {
  postMessage('Hola, acabas de conectarte al Worker');
}
Using HTML5 Web Workers to have background computational power



			
			
							
		
			
		

			
			
				Javascript			
		

		Hapi.js+Vue.js Crear servidor backend

	ByLuis					
						April 27, 2019June 9, 2019					
					


	
		
El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:



npm init



Rellenamos todos los datos que nos van pidiendo para configurar el proyecto.



Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.



npm i @hapi/hapi



npm i @hapi/glue



¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.



Ahora creamos el fichero index.js e insertamos el siguiente código:



const Glue = require( '@hapi/glue' );

const manifest = {
	server: {
		port: 3001,
	},
};

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		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();



Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.



Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.



¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:



npm i --save-dev nodemon



Y ejecutaremos lo siguiente para arrancar el servidor:



npm run start



Puedes obtener el código en GitHub hapi-vue-demo 0.1.0



		
		

			
			
				Javascript | PHP | Quicklinks			
		

		Building a Sleek AJAX Email Signup Form

	ByLuis					
						August 30, 2010					
					


	
		In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming …
Post original



		
		

			
			
				Javascript			
		

		Extiende Google Analytics con jQuery

	ByLuis					
						May 18, 2009					
					


	
		Interesante script de jQuery que integrándolo en nuestra página, carga el script de Google Analytics y le añade características extra que normalmente no tenemos en cuenta:

Enlaces salientes
E-Mails (mailto)
Descarga de ficheros, configurable indicando el tipo de fichero que se quiere monitorizar

Extend Google Analytics with jQuery
Vía / Script & Style

Similar Posts