javaScript

Martes, 15 de Septiembre de 2009.

ordenar alfabeticamente elementos del html con jquery

Este es un problema que me encontré este fin de semana. Selects enormes de los que no se puede tocar la fuente y que hay que ordenar por temas de usabilidad alfabéticamente. Nada más sencillo que recurrir a javascript y usar el metodo nativo "sort" de los arrays.

Un ejemplo ayudándonos, como nó, de jquery. Imáginemos que el select en cuestión tiene el id "selectAlfabetico". Con un código tan sencillo como el que sigue dejaríamos las opciones ordenadas alfabéticamnete.

ops = $("select#selectAlfabetico option");
// esta funcion compara todos los elementos del array
// si devolvemos true "a" irá antes, 
// si devolvemos false "b" irá antes.
ops.sort(function (a,b) {
  return ( $(a).html() > $(b).html() )
});
html="";
for(i=0;i<op.length;i++)
{
  html += "<option value='" + $(op[i]).val() + "'>" + $(op[i]).html() + "</option>";	
}
$("select#selectAlfabetico").html(html);

Sencillo verdad? Pues este método podríamos aplicarlo fácilmente a cualquier serie de elementos html: listados, divs, párrafos... Sólo habría que cambiar la función short y el loop para generar el html.

Términé, hoy he sido corto y discreto.

[...]

¿Te interesa? Sigue leyendo...

6 Comentarios, leelos

Temas Relacionados: jquery

Viernes, 24 de Julio de 2009.

como usar facebook connect en nuestras webs

Bueno, después de haberme peleado con la api de facebook para aplicaciones ahora le tocaba el turno a Facebook Connect. Se trata de la evolución de la propia API de facebook dándole las más posibilidades, en particular ampliando la API hasta el punto de permitirte usarla en tus propios sitios web. En este post daremos un repaso sobre las posibilidades de Facebook Connect y los conectos clave ya que como siempre, la documentación oficial es muy completa pero cuesta hacerse una idea de forma rápida.

[...]

¿Te interesa? Sigue leyendo...

19 Comentarios, leelos

Temas Relacionados: programacion tutoriales

Miércoles, 06 de Mayo de 2009.

mp3 con Javascript | SoundManager 2

SoundManager 2 es una librería destinada a permitirnos controlar desde javascript la carga y reproducción de archivos mp3 en una web.

Para conseguirlo, lo que hace es incluir un pequeño archivo flash oculto que es el que realmente se encarga de reproducir el archivo mp3. La gracia del invento está en que se genera un objeto javascript con el cual controlar las acciones del archivo flash. Así, conseguimos, en la práctica, controlar la reproducción de mp3 con javascript.

SoundMaganer 2, es una librería ideal para aquellos con necesidades multimedia, con buenas nociones de javascript pero con pocos conocimientos sobre flash. Tiene una API muy completa y muy bien documentada.

En las últimas versiones SoundManager ya no solo permite reproducir archivos mp3 sino que la tecnología flash se utiliza también para visualizar de distintas formas la música que está sonando.

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: Enlaces jquery

Jueves, 09 de Abril de 2009.

Como crear un bookmarklet

Un Bookmarklet es un marcador del navegador (elemento de Favoritos en si usas Internet Explorer) que en vez de contener una dirección de internet contiene una llamada javascript.

Lo que hacemos con esta técnica es forzar que el navegador ejecute un codigo javascript que nosotros le indicamos cada vez que el usuario clicka en ese marcador.

Esto puede ser usado de forma personal para todo: cambiar el DOM, los estilos de la web, buscar dentro del documento, etc... pero para lo que más nos sirve, como desarrolladores web es para ofrecer la posibilidad de enviar a nuestra página la url o datos de lo que está viendo el usuario.

[...]

¿Te interesa? Sigue leyendo...

1 Comentario, leeló

Temas Relacionados: jquery tutoriales

Jueves, 09 de Abril de 2009.

Incluir texto en un objeto canvas con javascript | canvas-text

Canvas text es una libreria javascript con la suplir el problema que tienen los navegadores antiguos para incluir textos en las pizarras de canvas generadas.

Esta librería afecta sólo a aquellos navegadores que no son capaces de hacer esto por si solos y no hace nada en aquellos que ya pueden incluir los textos en las composiciones canvas. No requiere del uso de ningún framework javascript y sólo necesitas incluir además el famoso archivo excanvas.js (que sirve para que canvas funcione en explorer)

Cada vez estamos más cerca de poder usar canvas para lo que se ha creado...

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: Enlaces jquery