Drag to Share like Mashable using jQuery

Learn how to replicate the mashable way of drag to share with jQuery and jQuery UI.

Demo

Ext JS Designer Preview

This new version adds many new features to improve your efficiency creating application designs. Once you get accustomed to these features its difficult to live without them.

Demo

jQuery Dynamic Validator

Demo

jQuery Highlighter

Highlighter with keyboard navigation, can be customized easily

Example

Beta version markItUp! Universal markup editor

markItUp is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

http://markitup.jaysalvat.com/home/

jquery gadget plugin

The jquery.gadget plugin provides a way of combining javascript with a html resource and css, providing a simple, scoped lifecycle and a standardised approach to writing modular, self contained ajax gadgets.

jTimepicker Yet another jQuery time picker plugin

jTimepicker is a jQuery plugin for set hours and minutes individually with jQuery UI Slider. 

Demo | Download

Making A Slick Content Slider

Demo | Download

Password (un)Masking

Windows Vista has a nice option labeled Show characters right below password input fields:

"Show characters" checkbox under password input field

Useit.com recommends it: Stop Password Masking — It’s time to show most passwords in clear text as users type them.
So without further ado, here’s what it looks like on the web:
masking/unmasking passwords demo
This is the HTML code from the example:

<form>
 <label>
  Password: <br />
  <input id="password" name="password" type="password" />
 </label>
 
 <label>
  <input id="showcharacters" name="showcharacters" type="checkbox" /> 

Show characters
 </label>
</form>

And this is the JavaScript jQuery that toggles the masking and unmasking of the password field:

$(document).ready(function() {
 
 $('#showcharacters').click(function() {
  if ($(this).attr('checked')) {
   $('#password').replaceWith('<input id="password" name="password" 

type="text" value="' + $('#password').attr('value') + '" />');
  } else {
   $('#password').replaceWith('<input id="password" name="password"

 type="password" value="' + $('#password').attr('value') + '" />');
  }
 });
 
});

I personally think this is better than the iPhone method of showing only the last typed character, because well… when using a real keyboard I type my passwords faster than I’d be able to read them letter by letter. Which means I type really fast or read really slow.
Either way this would be a better solution to having to type a password two times in order to confirm it.

Fancy Jquery ajax Form

Demo | Download

SuperBoxSelect - Facebook style combo box component with EXT JS

SuperBoxSelect is an extension of the ComboBox component which displays selected items as labelled boxes within the form field. As seen on facebook, hotmail and other sites, it combines both auto-complete and multi-selection capabilities.

Examples |  Download

Tu propia linea de tiempo como Twitter

DemoDownload

A simple AJAX website with jQuery

DemoDownload

Un estupenda galeria en Jquery

Demo | Download 

A Stylish Navigation Menu With jQuery

Demo  | Download

Create an AJAX-driven shopping cart

All the products are going to be stored in a MySQL database, with PHP showing and processing the data. jQuery will drive the AJAX-es on the page, and with the help of the simpletip plugin will add to an interactive check out process.

Demo | Shopping Car
Tutorial | Tutorial
Download | Files

Make An Elastic Thumbnail Menu - Boing Boing

En un intento constante de ofrecer métodos alternativos para arreglar los menús, he reconstruido un menú en miniatura elástica.

¿Qué hace exactamente?

     * Amplía las opciones de menú cuando se esta sobre el elemento.
     * Los elementos de menú se expanden.
     * Ver la demostración para ver en acción.

El HTML

Rápido y fácil, el marco general que va a utilizar es el siguiente:

El CSS

Normalmente, cuando una etiqueta div tiene que ampliar para dar cabida a más contenido, lo hace hacia abajo, añadiendo altura en la parte inferior del elemento en lugar de la parte superior. Para este menú nos quieren hacer exactamente lo contrario - cuando el usuario se desplaza sobre la miniatura debe ampliar hacia arriba (pensar sobre cómo funciona el muelle de OSX).

Vamos a ir sobre esto, haciendo uso de la posición: fijo, que básicamente nos permite "fijar" los elementos en el fondo. Analicemos por los elementos.

/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }

/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}

/* Each individual menu item fixed to the bottom with display:inline-table to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-table; } 

El jQuery

en mi ejemplo sirve a dos propósitos:

    1. Cambiar el tamaño de las imágenes a tamaños más pequeños cuando las cargas de la primera página.
    2. Animar a las imágenes de mayor tamaño cuando sobrevolaban.

He aquí el fragmento de código que hace todo esto posible (con comentarios en línea para las explicaciones):

$(document).ready(function(){
 $('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size

 $('.menuitem').mouseover(function(){ //When mouse over menu item

  gridimage = $(this).find('img'); //Define target as a variable
  gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size

 }).mouseout(function(){ //When mouse no longer over menu item

  gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size

 });
});

Internet Explorer escalado de imagen Fix

Esto ha sido señalado a la atención antes, pero cuando se trata de cambiar el tamaño de imágenes, Internet Explorer no hacer un buen trabajo a menos que agregue las siguientes líneas en tu CSS:

img { -ms-interpolation-mode: bicubic; }

Después de ocuparse de ese arreglo, su menú está listo para rodar, muy bien hecho.

Create a Realistic Hover Effect With jQuery

Create a Realistic Hover Effect With jQuery, two different effects available shadow and reflection. Looks stunning. Check out the demo.

 

Fuente | ajaxrain.com

Documentacion | http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/ 

Demo | http://adrianpelletier.com/sandbox/jquery_hover_nav/ 

Download | Download

MultiSelect Items

Its a easy-to-use, paginated, filterable multi-select widget built on MooTools. Es muy facil de usar, paginacion, filtrado multiseleccion desarrollado con MooTools.

Fuente | ajaxrain.com
Demo | http://www.justindonato.com/demo/mtmultiselect/

Crear un efecto de puerta corredera con jQuery

 

 

Aprende a realizar un impresionante cuatro esquinas de deslizamiento efecto fácilmente con jQuery. Es una solución elegante, único y genial para la galería de imágenes en miniatura. Este tutorial incluye una explicación detallada que le guiará a través de todo el proceso.

 

Fuente:www.ajaxrain.com 

Tutorial: http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery 

Demo:http://www.queness.com/resources/html/slicing/index.html