Hoy vamos a aprender como hacer una búsqueda instantánea al estilo de Google. En el siguiente código mostramos la forma más básica para conseguir este resultado, vamos a verlo: Primero creamos el archivo principal, podemos llamarlo como queramo. En este archivo mostraremos la caja de búsqueda y mostraremos los resultados: HTML jQuery Ahora vamos con […]

Hoy vamos a aprender a utilizar el evento .scroll de jQuery, así como animar el desplazamiento de la página de un lugar a otro con un bonito efecto. Lo primero incluimos la librería jQuery: Para animar el desplazamiento de la página, utilizamos el siguiente código; Lo que hace este código, es obtener la posición de […]

Con HTML5 y Javascript vamos a previsualizar la imagen que seleccionamos desde un campo «File«, todo esto es posible gracias a la API de archivos de HTML5. Vamos con el código: CSS HTML Javascript El código Javascript debe ir al final de la página. Aquí podemos ver el código completo: Ver ejemplo

Utilizando jQuery podemos cargar el contenido de un archivo en un div con unas pocas líneas de código. Para ello primero tenemos que cargar la librería jQuery, podemos hacerlo utilizando la librería de Google: Y ahora creamos la función: «La variable div» es la referencia del DIV donde vamos a cargar el archivo. Para utilizar […]

iPicture es un plugin de jQuery que sirve para poner Tooltips en imágenes. Con este plugin podemos configurar distintas animaciones, podemos agregar todos los tooltips que queramos sobre una imagen, cambiar de color los botones de los tooltips, podemos cambiar la fuente, etc. Su uso es realmente sencillo, vamos a ver paso a paso la […]

InnerFade Un bonito efecto de transición que podemos aplicar tanto en imágenes como en textos. jQuery Easing Plugin Este plugin de Jquery contiene bastantes efectos interesantes. HighlightFade Cambios de escala y algunos efectos interesantes. jQuery Cycle Plugin Varias transiciones: verticales, horizontales, etc. Dynamic Page / Replacing Content Un elegante menú con algunas transiciones animadas al […]

Alertify es un script escrito con Jquery, el cual nos permite utilizar los siguientes elementos Javascript personalizados: alert(), confirm() y prompt(). Además también nos permite utilizar sus notificaciones, las cuales son muy agradables y sencillas de utilizar y modificar. Este script está completamente en Inglés en su página oficial. Pero cuando en Reacción estudio estuvimos […]

Tanto Google y Mozilla, tienen extensiones para sus navegadores que utilizan animaciones simples pero elegantes para mejorar la página. Una de las extensiones utilizadas por Google es un básico margin-top para cambiar entre los dos paneles: un panel gráfico y un panel de detalles. HTML CSS Jquery Ver ejemplo

Nivo Slider es un slider creado con Jquery, tiene una versión totalmente gratuita para páginas webs, y luego una versión de pago para WordPress. Características de la versión para páginas web: 16 transiciones únicas Simple configuración Soporta imágenes con enlaces Etiquetas HTML 3 temas diferentes Uso gratuito bajo la licencia MIT Características del plugin para […]

Jquery File Upload es sin duda el mejor script para subir archivos a nuestro servidor web, incluye la posibilidad de hacer drag & drop (arrastrar y soltar) en los archivos desde el escritorio, barra de progreso, subida múltiple de archivos, etc. Y claro está, totalmente gratuito, ya que cuenta con una licencia MIT. Características: Subida […]

Pues hoy les presento este estupendo plugin de Jquery (Jcrop) que sirve para cortar imágenes a través de una interfaz y posteriormente guardar la imagen cortada en el servidor con un simple código PHP. Lo primero que tenemos que hacer es descargarnos el plugin desde su página web. Después debemos incluir los siguientes archivos que […]

Les voy a enseñar como podemos subir una imagen a nuestro servidor y poner la dirección de esta imagen en un campo de texto de nuestro formulario sin la necesidad de recargar la página. Para subir la imagen usamos PHP, y para poner la dirección de la imagen en el formulario usamos Javascript. Primero, en […]