boingPic es un experimento realizado con jQuery que divide una imagen en 100 cuadritos y hace que “huyan” del ratón cuando éste se mueve.
El script no tiene mucha utilidad en si, pero sí que puede ser interesante para tomar ideas para otros desarrollos, sobre todo a la hora de dividir la imágen y controlar su movimiento. boingPic
Vía / couch
Do you sometimes need to use iframe elements to inject content into sites you build? I do. Not very often, luckily, but it does happen. Usability and accessibility issues aside, doing so also forces me to use a transitional DOCTYPE, something I’d rather
Sitio web desde el que se pueden descargar multitud de cliparts. La mayorÃa de ellos no son de gran calidad pero hay un gran número de categorÃas y en un momento dado pueden sernos de utilidad.
El anteproyecto de ley de Medidas de Impulso de la Sociedad de la Información (LISI) va a permitir que la Administración Pública tenga poder para cerrar páginas web. Hasta ahora solo un Juez puede determinar el cierre o no de una página web…
Google Analytics el popular servicio de Google para hacer el seguimiento de visitas a una web, tiene entre las muchas caracterÃsticas la de poder hacer seguimiento de visitas de archivos flash, en esta ocasión haremos una revisión de la manera de imple
10 consejos a tener en cuenta para optimizar nuestro sitio antes de enviarlo a Google. Siguiendo estos consejos podremos hacer que Google registre mejor nuestro sitio web…
Ubuntu Screencasts es un proyecto de documentación previsto para la siguiente versión de Ubuntu, pero que ahora mismo cualquiera puede disfrutar. Su objetivo es sencillo: mostrar mediante vÃdeos las tareas básicas que la mayorÃa de los usuarios de Ub
A December 2006 survey has found that 28% of internet users have tagged or categorized content online such as photos, news stories or blog posts. On a typical day online, 7% of internet users say they tag or categorize online conten
Sluggish internet speeds may be a thing of the past, but instant page loads are still the stuff of the future. Christian Heilmann has some tips for delivering faster, smoother pages to your visitors today… What makes web sites slow?… Things to do to m
Este plugin te permite mostrar a tus lectores si tu estás o no online en Skype. Descárgalo y subelo a tu carpeta plugins. Luego en Options/Skype Status, puedes configurar el boton que quieres que aparezca, el texto, tu usuario de Skype, etc. Es un plugi
Aquà va una lista de plugins de WordPress algunos son de diseño, embellecedores; otros ayudan a organizar tus posts para que se lean y otros hacen que los comentarios sonrÃan. La pegajosidad viene de que sean útiles para encontrar tu blog, quedarse a
Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).
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()));
});