Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice …
Tag Archives: jquery
DLayer: script jQuery que nos ayuda a maquetar diseños
Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.
La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.
Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.
Espero que os sea útil
Crear un sistema de notificación web con XMPP y PHP
Completísimo tutorial que nos explica como realizar un sistema de notificación web en tiempo real mediante XMPP y PHP. El tutorial nos explica cómo funciona el XMPP, cómo instalar Openfire (yo he usado ejabberd y este no le conozco, si alguien lo conoce que me comente que tal).
En el ejemplo hará uso de jQuery y Strophe para acceder al servidor XMPP.
Build a web-based notification tool with XMPP
Gracias Gerardo por el aviso
Tutorial de Drag&Drop de capas con jQuery UI
Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.
El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).
$('#sidebar .sortable-list').sortable({
axis: 'y',
containment: 'parent',
forceHelperSize: true,
forcePlaceholderSize: true,
handle: '.section-title',
opacity: 0.8,
placeholder: 'placeholder',
update: function(){
$.cookie('sidebar-cookie', getItems('sidebar'));
}
});
jQuery: Customizable layout using drag and drop
Vía @kingsleyphls
Permitir el botón atrás en aplicaciones dinámicas
Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón ‘Atrás’ del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la página anterior y no al ‘contenido’ anterior.
Para solucionar esto, lo que se debe hacer es que las acciones dinámicas sean realizadas mediante enlaces (#), por ejemplo, si queremos usar pestañas podemos acceder a #tab1, #tab2, …, #tabn. Si vamos atrás en el navegador continuaremos en la misma página pero en otra sección (#).
Para tratar esto mediante jQuery se puede hacer usando el siguiente código:
$(window).bind('hashchange', function () {
// hacer lo que sea para mostrar el contenido
});
Vía / CSS Globe
jStorage: plugin jQuery para usar el almacenamiento de HTML5
Si hace poco comentaba el tema de Web SQL Database de HTML5, ahora encuentro un plugin para jQuery que nos facilita esta labor.
$.jStorage.set(key, value)
value = $.jStorage.get(key)
Vía / Script & Style
Plupload: sube varios ficheros fácilmente
Plupload es un script creado por los autores de TinyMCE. Permite subir ficheros usandoHTML5 Gears, Silverlight, Flash, Yahoo! BrowserPlus o formularios normales, además permite subida progresiva, redimensionado de imágenes y chunked uploads.
Está dividido en dos partes: Core API y una cola de subida jQuery, lo cual permite que creamos nuestra propia implementación. Además en Firefox 3.5+ se puede usar drag&drop y el redimensionado de images también es exclusivo de FF.
Vía / WebAppers
jQuery.sheet: inserta hojas de cálculo en tu web
jQuery.sheet es un script de jQuery que permite añadir hojas de cálculo en tu web. Permite bastantes funcionalidades, tal y como cualquier hoja de cálculo: Excel, OpenOffice o Google Docs:
- Redimensionar filas y columnas
- Funciones
- Editar el contenido de las celdas
- Permite temas/css
Vía / WebAppers
Plugin jQuery para mostrar fechas de forma usable
Interesante plugin jQuery para mostrar fechas con un formato más adecuado y legible.
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
AnythingSlider: plugin jQuery para crear slides
AnythingSlider es un plugin jQuery que permite crear slides con cualquier elemento HTML. Permite ir hacia adelante y hacia atrás, enlaces a posiciones en concreto, autoplay, vueltas infinatas, …
AnythingSlider jQuery Plugin