Javascript

Drag & Drop de ficheros en Firefox

ByLuis February 18, 2010

Esto puede dar mucho juego, pero tan solo funciona en Firefox 3.6+, por lo que no podemos depender de este script en nuestras aplicaciones. A partir de la versión 3.6, Firefox permite realizar drag&drop de ficheros en nuestra web y mediante Javascript poder obtener los ficheros o textos que se arrastren contra un elemento específico.

Su uso es muy sencillo:

dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Ready to do something with the dropped object
  var allTheFiles = event.dataTransfer.files;
  alert("You've just dropped " + allTheFiles.length + " files");
}, true);

Y dispone de una API tanto para el drag&drop como para los ficheros.

Recomiendo ver el código fuente de este ejemplo para tener una librería que te hace todo el trabajo.

file drag and drop in Firefox 3.6

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

Codetcha: CAPTCHA resolviendo Javascript

ByLuis March 19, 2008

La verdad es que este CAPTCHA es muy friqui, pero es una idea interesante que quizás se pueda utilizar. Se trata de un CAPTCHA que en vez de tener que escribir una palabra, hay que modificar un código Javascript para que no tenga errores y así validar el formulario.

Para pasar el CAPTCHA hay que eliminar todos los errores, se puede ir viendo si el código es correcto y si no es así, qué errores sigue habiendo. El código de Codetcha se puede usar para clases o ejemplos de Javascript, porque me da la sensación de que no es muy accesible este CAPTCHA.
Aún así la idea se podría sustituir usando matemáticas en vez de Javascript.
Codetcha

Javascript

$fx(): librería javascript para animaciones

ByLuis January 16, 2009

$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style

Javascript

Añadir contenido a los datepicker de jQuery UI

ByLuis October 11, 2012

En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.

Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.

Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:

// Añadimos datepicker al input que queremos
jQuery('.fecha')
  .datepicker({
    showButtonPanel: true,
    dateFormat: "DD, d MM, yy" 
  });

// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
    var target = jQuery(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    jQuery.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
    // Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
    // Se le añade el valor del nuevo campo select que hemos incluido
    target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}

Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:

jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
  var html = jQuery.datepicker._generateHTMLExtended(inst);
  var div = jQuery('').html(html);
  div.find('table:first').after('Horario:
');
  return div.html();
}

// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
  var $obj = jQuery('.fecha');
  $obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});

Google | Navegadores

Google recomienda Firefox a los usuarios de IE

ByLuis April 26, 2006

Los usuarios de Internet Explorer de Estados Unidos que se conecten a google.com les aparecerá un anuncio de la barra de Google para Firefox y les indican muy sutilmente que:

Firefox with Google Toolbar: tabbed browsing, safer surfing

A parte, también hay una ventanita que les ayuda a usar Google como motor de búsqueda para Firefox.

Vía / SitePoint

Javascript

Bug en el método UTC del objeto Date de Javascript

ByLuis April 2, 2008

O al menos en Firefox. Se trata de que si quiero obtener el timestamp de una fecha usando el método Date.UTC me devuelve datos incorrectos.
Por ejemplo, en esta llamada Date.UTC(2008, 3, 2, 18, 33, 32) (el mes es abril porque empieza desde 0), se verá que da un el timestamp 1207161212000, mientras que si creamos un objeto Date y obtenemos su timestamp (new Date(2008, 3, 2, 18, 33, 32)).getTime() obtenemos el timestamp 1207154012000, habiendo 2 horas de diferencia.
Habrá que tener cuidado

Similar Posts