All posts in Ajax

jQuery easyThumb – Generar thumbnails con PHP y jQuery visualizando con lightbox

Se ha publicado la primera versión de jQuery easyThumb. easyThumb es un plugin basado en jQuery y PHP y sirve para generar thumbnails (para galerías de fotos,… etc) al vuelo. Este plugin se integra con la librería Lightbox a la hora de mostrar las fotos grandes.

Enlaces: jQuery easyThumb demo
Vía: Ajaxonomy

Stripe Generator – Fondos Web 2.0 Fácil, Sencillo y para toda la familia

Stripe Generator - Generar Fondos Web 2.0

Stripe Generator es una herramienta Online que facilita la tarea de creación de fondos para las Webs. He estado probándolo y es una herramienta de lo más interesante.

Vía: Think Wasabi
Stripe Generator
Stripe Generator Blog
Stripe Generator – Stripe Samples

Calendarios On-Line y Calendarios Javascript – AJAX

En Smashingmagazine han publicado un post muy completo en el que enumeran distintas opciones para utilizar calendarios on-line y componentes “Date Picker”.

Calendarios On-Line - Date Pickers

Enlace:  Smashing Magazine – Online Calendars and Datepickers

jQuery: Plug-In para generar puzzles

Ben Nadel ha desarrollado un nuevo plugin para jQuery que permite generar puzzles añadiendo una sola línea al código fuente:

$( "div.puzzle, p" ).puzzle( 100 );

Puedes descargarlo o puedes probarlo tú mismo.

jQuery demo - Puzzle

 Vía: Ajaxian

Prototip 1.1

Nick Stakenburg ha reprogramado Prototip para utilizar Prototype 1.6. Con este plugin basado en Prototype podréis añadir tooltips emergentes facilmente a los enlaces, fotografías… etc etc.

Prototip 1.1 - Tooltips en Prototype

Demostración Prototip 1.1
Vía: Ajaxian
Descarga: Prototip 1.1, Prototype 1.6

Comparación entre Prototype y jQuery

Remy Sharp ha indagado en los frameworks Prototype y jQuery (los más populares a día de hoy) y ha preparado una presentación mostrando diferentes ejemplos en los dos frameworks.

Vía: Ajaxian

Javascript: Loggear movimiento del ratón

Marcel Oelke ha recuperado parte de su código para escribir un sistema que sirve para loggear el recorrido del ratón utilizando Javascript y Ajax. Es una forma interesante de analizar el comportamiento de los usuarios en tu página.

Podéis ver un ejemplo en la demostración del loggeador de recorrido en acción.

Vía: Ajaxian

Prototype 1.6.0 RC1 ya disponible

Ayer anunciaron desde la Web de Prototype la versión 1.6.0 RC1 de su popularframework. En ella encontramos numerosos cambios y mejoras em en el framework. En esta nueva versión nos encontramos entre otras cosas con un peso bastante reducido (21kb).

Vía: aNieto2K
Web: Prototype
Descargar Prototype 1.6.0 RC1

Script – Cuentagotas como en el Photoshop

John Dyer ha desarrollado un nuevo interfaz para la selección de colores basada en Prototype.

PhotoShop-like JavaScript Color Picker

No es el primer “cuentagotas” que se ha desarrollado hasta el momento pero por lo que he visto a día de hoy es de los más completos y prácticos, sobre todo para usuarios acostumbrados a trabajar con aplicaciones gráficas (Photoshop, Gimp, …) en el que se encuentran herramientas similares a esta.

Demostración Color Picker
Vía: John Dyer, Webmasterlibre

Otras herramientas similares:

abrir popup utilizando prototype

Hoy me he encontrado ante la necesidad de hacer un popup y en lugar de utilizar las clásicas funciones de javascript he optado por buscar alguna solución aprovechando las librerías de Prototype.

Tras buscar un poco por Google he encontrado un post en un blog (jehiah) con una función que puede generar un popup muy parametrizable utilizando eventos y funcionalidades de Prototype.

El ejemplo encontrado es el siguiente:

var Popup = {
  open: function(options)
  {
    this.options = {
      url: '#',
      width: 600,
      height: 500,
      name:"_blank",
      location:"no",
      menubar:"no",
      toolbar:"no",
      status:"yes",
      scrollbars:"yes",
      resizable:"yes",
      left:"",
      top:"",
      normal:false
    }
    Object.extend(this.options, options || {});

    if (this.options.normal){
        this.options.menubar = "yes";
        this.options.status = "yes";
        this.options.toolbar = "yes";
        this.options.location = "yes";
    }

    this.options.width = this.options.width < screen.availWidth?this.options.width:screen.availWidth;
    this.options.height=this.options.height < screen.availHeight?this.options.height:screen.availHeight;
    var openoptions = 'width='+this.options.width+',height='+this.options.height+',location='+this.options.location+',menubar='+this.options.menubar+',toolbar='+this.options.toolbar+',scrollbars='+this.options.scrollbars+',resizable='+this.options.resizable+',status='+this.options.status
    if (this.options.top!="")openoptions+=",top="+this.options.top;
    if (this.options.left!="")openoptions+=",left="+this.options.left;
    window.open(this.options.url, this.options.name,openoptions );
    return false;
  }
}

La forma de hacer la llamada en el HTML sería la siguiente:

<a href="path/to/page" onclick="return Popup.open({url:this.href});">link title</a>