Moderador del foro: ZorG |
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.) |
jQuery |
Ajustar la altura de un conjunto de divs a la altura de la más alta con jQuery Interesante función que permite ajustar la altura de un conjunto de cajas a la altura de la más alta de todas ellas. Un ejemplo de uso podría ser el siguiente: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Creando share buttons animados En este link podrás ver el demo de como quedarán los botones animados con Jquery que te enseñaremos en este tutorial PASO 1 PASO 2 PASO 3 PASO 4 PASO 5 PASO 6 PASO 7 PASO 8 PASO 9 PASO 10 Descarga el editable de Share buttons Jquery Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Jquery: ocultar mostrar varios elementos Ocultar o mostrar un elemento es posible hacerlo con múltiples elementos sin tener que agregar un script por cada elemento, para eso hay que usar id que identifiquen a los elementos y clases para conocer su estado. Simplemente con fines didácticos he planteado el ejemplo usando el evento onclick y usando clases sin embargo es posible simplificarlo mucho más asignando el click desde jquery y no usando clases sino atributos. El HTML de los elementos Es posible usar cuantos elementos se requieran y puede usarse cualquier tipo de elemento no exclusivamente div, basta que les pongamos un id y la clase que me indica su estado (visible/invisible) Para el menú que muestra u oculta los elementos, sería el siguiente script: La función para ocultar/mostrar usando jquery Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Jquery: Búsqueda Instantanea
PARTE I Últimamente se han puesto de moda las búsquedas instantáneas usando AJAX como el aún en prueba Google Instant o el script experimental para hacer un YouTube Instant, en realidad implementar soluciones así no es nada del otro mundo el verdadero problema radica en que generan un mayor tráfico y pueden sobrecargar el servidor si tienen demasiados usuarios. En este tutorial de dos partes voy a destripar el código de youtube instant, simplificarlo un poco y mostrar como hacer los cambios para que funcione con cualquier sitio web 2.0 (entendiendo que esos son los sitios que cuentan con un API para acceder a su contenido externamente ya sea en formato XML o Json), este script podría funcionar con YouTube, Flickr, Google, Google Images, etc… Sugerencias de Google Estructura del buscador Instant.js Bueno veámoslo por partes: Lo primero es crear las variables que nos indiquen el estado de la búsqueda y además asignen los eventos cuando escribo y cuando dejo de escribir De esta forma cuando escribo un término ejecuta la función doInstantSearch que primero comprueba si hay cosas que buscar, luego borra la búsqueda pasada y finalmente mediante AJAX le pide a Google que le envíe palabras clave // Borra los resultados de la busqueda pasada // Empieza la busqueda Este otro es para sugerencias con youtube var the_url = 'http://suggestqueries.google.com/complete/search?hl=es&ds=yt&client=youtube&hjson=t&jsonp=window.yt.www.suggest.handleResponse&q='+encodeURIComponent(searchBox.val())+'&cp=1'; A su vez esta función va a invocar a otra, fijémonos en la linea var the_url = ‘http://suggestqueries.google.com/complete/search?hl=es&hjson=t&jsonp=window.xt.handleResponse&q=’+encodeURIComponent(searchBox.val())+’&cp=1′; Tenemos que procesar el array que nos envía google con posibles sugerencias para extraer unicamente la más acertada, también sería posible que se genere un combo con el resto de opciones pero para hacerlo más simple me voy a conformar con una. Esa función a su vez debe llamar otra función encargada de parsear el array, una 2da función que devuelve datos y veré en la 2da parte del tutorial y finalmente una 3era función que finaliza la búsqueda. Como prometí aquí va la segunda parte del tutorial para búsqueda instantánea, voy a mostrar como adaptarlo a 2 páginas web distintas en el primer caso una forma simple usando la web de NeoTeo y para el segundo caso voy a hacer un Flickr Instant usando su respuesta JSON. NeoTeo Flickr Instant Primero voy a buscar resultados con esta función: Ahora el problema es convertir ese resultado json en algo más coherente y útil para el usuario, lo que logro con la función “displayImages” Este método es válido para cualquier resultado json de donde sea que provengan basta alterar los nombres de las variables que no siempre son link, title, etc. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
jQuery: Crea un seleccionador de ventana activa al estilo Opera Mobile Siempre es divertido jugar con jQuery, especialmente cuando se trata de recrear algo que disfrutamos de usar. Tal es el caso del seleccionador de ventana activa con el que cuenta el navegador Opera Mobile. Aquí veremos cómo lograr este interesante efecto en nuestro sitio, en cualquier navegador. En el efecto al que nos referimos, las ventanas abiertas están posicionadas una debajo de la otra, y sólo una porción de las mismas es visible. Sólo la que está por delante de la pila es la que resulta totalmente visible. El hacer clic sobre cualquiera de esas ventanas ocasiona, mediante un agradable efecto, que la ventana cliqueada se posicione en la parte superior de la pila y la ventana que ha dejado de ser activa se sitúe ahora al final de la misma. Haz clic en este enlace para ver una demostración del efecto>> En el caso de nuestras "ventanas", no son más que una lista desordenada de elementos li, cuyo contenido es propio. Lo siguiente, con jQuery, son las variables de cuánto se esconderá cada ventana, y cuánto se deslizará a la izquierda o a la derecha. Luego, le asignamos una id a todas, que luego utilizaremos para posicionarlas. Y ahora, la parte principal. Cuando un usuario hace clic sobre una ventana, muchas cosas pasan. Primero, se determina la posición de la ventana que ha sido cliqueada y de la ventana que fue elegida previamente. Si la ventana cliqueada está a la izquierda de la ventana elegida, todas las ventanas antes de la cliqueada se deslizarán a la izquierda. Si la ventana cliqueada está a la derecha de la ventana elegida, todas las ventanas después de la cliqueada se deslizarán a la derecha. Para deslizar las ventanas a la derecha, tomamos el id de la ventana cliqueada (sumándole 1 para prevenir que se deslice) y la colocamos en un bucle a través de todas las ventanas, hasta el final. En ese momento deslizamos todas las ventanas hacia la derecha, colocándolas por debajo de la ventana cliqueada (utilizando z-index) y finalmente las deslizamos de vuelta hacia la izquierda. Para el otro lado, es similar aunque más costoso. Pero antes de deslizar ventanas, debemos remover la clase .current de la vieja ventana elegisa y asignársela a la nueva ventana cliqueada. Haz clic en este enlace para ver una demostración del efecto>> Esperamos que te sea de mucha utilidad. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
jQuery: 2D Transform, gran efecto para galerías de fotos Con este efecto, podrás lograr que los thumbnails de la galería se fundan, formando la foto que haya sido seleccionada. Y eso no es todo. No dejes de ver la demostración de este atractivo efecto, y descargar el plugin para utilizarlo en tu sitio web. No sólo sorprende el efecto logrado con los thumbnails: Además, al pasar a la siguiente foto de la galería, la foto que estamos viendo se dividirá en varios paneles que se sustituirán de a uno hasta quedar formada la siguiente. Haz clic en este enlace para ver una demostración del efecto >> El nombre del plugin es 2D Transform. Este plugin utiliza el filtro matrix en IE y las nuevas propiedades transform de CSS3 para realizar transformaciones 2D en cualquier elemento DOM. Es totalmente compatible con todos los navegadores, y se ha tenido especial cuidado con soportar las propiedades translate() y transform-origin de IE. Haz clic en este enlace para descargar el plugin 2D Transform >> ¡Esperamos que te sea de utilidad! Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Doodle Google Navidad Jquery El Doodle de Navidad fue un efecto de fotos realizado en Jquery, aquí les dejamos como lo hicieron. Esperamos les guste. En este link puedes ver lo que haremos: DEMO EN LÍNEA PASO1 PASO 2 PASO 3 [b]PASO 4 PASO 5 PASO 6 PASO 7 Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Imágenes con bordes redondeados para todos los navegadores IMGr es un plugin para la librería jQuery que nos permite redondear los bordes de nuestras imágenes utilizando CSS3 en los navegadores modernos que lo soportan y VML en los que no. Admite la configuración de los bordes permitiéndonos estilos diferentes en cada esquina, cambio de colores, estilo, etc. Es totalmente no-obstrusivo permitiendo que el elemento <img> no necesite modificaciones. Su modo de uso es extremadamente sencillo. Descargamos el plugin IMGr y luego linkeamos en el <head> de nuestro documento: Luego inicializamos el script, puede colocarse entre etiquetas <head> o bien antes del cierre de </body> $("img.ex1").imgr({size:"3px",color:"yellow",radius:"10px"}); $("a#update").click(function(){ }); Podemos ver el demo en acción en este link así también como la explicación de todas las opciones disponibles. Es compatible con la mayoría de los navegadores actuales. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Efecto de superposición del menú con jQuery A lo largo de este tutorial vamos a ver como crear un menú sencillo que se activa una vez que se pasa el ratón por sus opciones, dejando en segundo plano la información del fondo. El menú se quedará blanco y aparecerá un submenú con opciones. Para crearlo utilizaremos jQuery. Vamos a empezar a crear la estructura HTML, que consiste en un contenedor DIV para el menú, que contendrá una lista desordenada para el menú. Cada opción principal del menú, tendrá un enlace y un DIV donde indicaremos las opciones del submenú. <div id="oe_overlay" class="oe_overlay"></div> <ul id="oe_menu" class="oe_menu"> <li> <a href="">Collections</a> <div> <ul> <li class="oe_heading"> Summer 2011 </li> <li><a href="#">Milano</a></li> ... </ul> <ul> ... </ul> <ul> ... </ul> </div> </li> <li> <a href="">Projects</a> <div style="left:-111px;"> ... </div> </li> <li> <a href="">Fragrances</a> <div style="left:-223px;"> <ul class="oe_full"> <li class="oe_heading"> Fashion Fragrances </li> <li><a href="#">Deálure</a></li> <li><a href="#">Violet Woman</a></li> <li><a href="#">Deep Blue for Men</a></li> <li><a href="#">New York, New York</a></li> <li><a href="#">Illusion</a></li> </ul> </div> </li> <li><a href="">Events</a> <div style="left:-335px;"> ... </div> </li> <li><a href="">Stores</a> <div style="left:-447px;"> ... </div> </li> </ul> </div> Veamos ahora el código correspondiente a los estilos. Lo primero que debemos de asegurarnos es que borramos los estilos, para asegurarnos que no cojan estilos de otras zonas. Luego empezaremos por asignar el overlay para el cuerpo, que será un DIV con la propiedad “opacity” a 0. La posición será fija, y siempre partiendo desde la esquina superior izquierda de la pantalla. Los estilos del menú principal son los siguientes: Es posible que desee adaptar su floatiness una vez que usted está planeando integrar esto en alguna parte en su sitio. Lo que es importante, es la colocación de los elementos de la lista. Los estilos para los enlaces del menú superior, tienen los siguientes estilos. Con el JavaScript, cambiaremos la clase del menú a “hovered”, cuyos estilos son: Los elementos del submenú no estarán visibles en un principio, y solo se mostrarán cuando se pase por la opción principal. Os dejamos los estilos Lo siguiente son los estilos para los enlaces del submenú. Por último veremos el código JavaScript que se encarga de la animación. La idea principal es que cuando se pase por el menú, el resto de la pantalla se oscurezca, mientras que el menú se queda de forma activa. Lo primero que haremos será guardar algunos elementos: var $oe_menu = $('#oe_menu'); Cuando pasemos por algún elemento del menú, añadiremos las clases “slided” y “seleted” al elemento. El correspondiente submenú aparecerá y los otros se ocultarán. Por último, indicamos lo que debe de suceder cuando entramos en el área del menú. Pueden ver una demo aquí. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Manejo de imágenes con jQuery: Despliegue secuencial Es común querer darle una buena presentación a nuestro sitio utilizando y manejando imágenes de manera original, por ello muchas veces recurrimos a métodos que nos permiten crear efectos de alta calidad pero con el defecto que estropean la funcionalidad y el tiempo de respuesta de nuestro sitio. En muchas ocasiones para lograr esto recurrimos al uso de imágenes grandes, pesadas o dentro de una presentación Flash, lo que arruina en gran medida tanto la estética como el flujo del sitio. El sitio continuará funcionando pero con respuestas largas y esto solo decrementará en gran medida la demanda de uso de nuestros servicios; ya que la experiencia del usuario al navegar por nuestra página Web será bastante frustrante. Es por ello que debemos buscar las mejores técnicas para lograr el efecto que deseamos sin necesidad de recurrir a tales usos. Aunque es prácticamente imposible crear un sitio totalmente eficiente para las necesidades de todos los usuarios, debemos lograr reducir cualquier aspecto que pueda estropear su experiencia en el sitio y así este pueda tener éxito. El uso de jQuery En esta ocasión crearemos un efecto para que una serie de imágenes se muestre de manera secuencial, es decir que cada elemento vaya apareciendo en nuestra página de manera progresiva y siguiendo un orden lineal horizontal. Si bien hay muchas maneras de realizar esta tarea, hoy, en esta ocasión vamos a utilizar una técnica que utiliza funciones recursivas para agregar los efectos. La estructura HTML Lo primero que debemos hacer es crear nuestra estructura del documento HTML, donde agregaremos 8 imágenes dentro de una lista desordenada y dos links que llevaran por id “mostrar” y “ocultar”, conteniendo el mismo texto. CSS de la lista Desarrollo del Script Una vez hecho esto, lo primero que se toma en cuenta para el desarrollo del script es que al momento de cargar la página se debe mandar llamar una función que determine el número de elementos a mostrar y contenga los dos métodos a llamar mediante los links mostrar y ocultar. Para esto utilizaremos la sentencia document.ready y dentro de ella cargaremos la función madre que contendrá las dos funciones dependientes que serán activadas mediante el evento “click” que se efectúa sobre los links. Finalmente pasamos a definir el contenido de cada una de las funciones internas, que serán las encargadas de llevar acabo el efecto de mostrar y desplegar de manera secuencial nuestras imágenes. Para darle un estilo elegante a nuestra transición, usaremos la librería FadeIn y FadeOut de jQuery, las cuales nos permiten agregar efectos de desvanecimiento a cualquier elemento que este contenido en nuestra página, ya sean capas, imágenes o texto. La función “mostrar” utilizará el efecto FadeIn para que cada imagen se muestre cada 400 ms, y de manera recursiva mande llamar a la función “mostrarimg”. Para uso de la recursividad crearemos una varible con el nombre de “i” la cual tendrá el valor de 0 como default. Una vez iniciado el ciclo esta variable ira aumentando de valor cada vez que se llame a “mostrarimg”. Esto dejará de funcionar una vez que la variable i alcance un valor inexistente en la lista. Cuando la función devuelva un elemento que no existe, jQuery devolverá un objeto vacío, y deja de llamar al efecto fadeIn. Lo mismo haremos del lado de la función “ocultar” pero con las siguientes variantes, en vez de utilizar FadeIn utilizaremos FadeOut para ocultar, le daremos un tiempo de 200 ms, esto porque queremos dar la sensación de que el borrado de imágenes es más rápido. En vez de tomar a “0” como el valor default de la variable “i”, tomaremos el tamaño de nuestra lista como el valor, de esta manera “i” será igual a 8 ya que son 8 los elementos que componen nuestra lista. Finalmente en vez de incrementar el valor dentro de nuestro ciclo, lo iremos disminuyendo, de esta manera primero desaparecerá la última imagen y el ciclo concluirá con la primera. Código final Conclusión Con esto no queremos demeritar lo que se hace y sigue haciendo con Flash, queda claro que no todos pensamos igual, y quizás para muchos siga siendo de su preferencia el ver y utilizar codificaciones de sitios completos en Flash, lo que tratamos de expresar aquí son alternativas que nos ofrecen un mejor rendimiento e incluso una mejor presentación estética, cada quien decidirá la manera de utilizarlas y escogerá las herramientas de su predilección para realizar esta clase de efectos. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Desplazamiento animado en anclas de enlaces con jQuery Estábamos buscando para un proyecto la manera de hacer desplazamientos dentro de la página de una forma menos brusca a la que brinda el html. Como sabréis, se pueden crear enlaces que apunten a zonas concretas dentro de la misma página con el elemento href=#. Esto es útil por ejemplo, cuando la página tiene mucho contenido y por tanto mucho scroll vertical, para poner ayudas al usuario y llevarle a zonas importanes de la página con los típicos enlaces de “saltar a contenido”. Esto se puede hacer con HTML básico de esta manera: Creas el enlace ancla que va a llevar a otra parte de la página: Creas el id para la zona de la página a donde quieres que lleve el ancla: El funcionamiento es perfecto, lo que no me gusta es el modo de hacerlo que tiene el HTML, ya que provoca un salto brusco. Bueno, para hacerlo de forma suavizada, tal y como se muestra en este ejemplo, se consigue poniendo este código JavaScript (jQuery) en el head de tu web o en un archivo externo .js: $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000); return false; } } }); }); Voilá, con este pequeño código en jQuery nada intrusivo se consigue un bonito efecto para tus desplazamientos de página. Particularmente pienso que este pequeño detalle ayuda a mejorar la usabilidad de este tipo de enlaces. Pensamos que hay que evitar el uso de enlaces de ancla dentro de las páginas por la sencilla razón de que el usuario tiene un modelo mental bien definido acerca del comportamiento de los enlaces, de forma que cuando pincha en un link espera ser dirigido a una página web distinta de la que está visitando. Los enlaces de ancla violan ese modelo mental al enlazar a zonas dentro de una misma página, lo que puede confundir al usuario. Con este efecto en jQuery queda más clara la acción del enlace, puesto que en todo momento ves lo que está pasando al notar el desplazamiento, mientras que con html el cambio es tan brusco que parece que te has teletransportado a otro sitio (con perdón de la forma de explicarlo). EDITO: releyendo el post veo que no he puesto en ningún sitio que hay que cargar jQuery para hacerlo funcionar… Lo he dado por entendido al tratarse de un script en jQuery, pero por si alguien no se había dado cuenta, en el de la web donde vaya este código, hay que cargar jQuery. Lo podemos cargar del cdn de Google para evitar usar recursos de mi servidor, con esta línea: Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Slide out Navi con Jquery Aquí les dejamos este tutorial de slide navigation con CSS y Jquery pueden ver el demo en linea en este link. PASO 1 PASO 2 PASO 3 PASO 4 PASO 5 PASO 6 PASO 7 PASO 8 PASO 9 PASO10 PASO 11 Descarga el editable de Page Navigation con Jequery Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Haz zoom a tus imágenes utilizando el plugin para jQuery Zoomy Zoomy es un plugin desarrollado en JavaScript que nos permitirá hacer zoom a las imágenes que tengamos en nuestras aplicaciones. De esta forma nos podemos ahorrar tener que hacer varios tamaños de las imágenes que vamos subiendo, sino que simplemente, con enlazar estas a la librería, nos permitirá verlas de una forma más grande. Además de la funcionalidad que nos ofrece esta utilidad, su sencillo uso la hace una herramienta muy recomendada para su uso. Con muy pocas líneas de código, podremos tener funcionando el plugin en nuestra aplicación. También dispone de varias opciones para poder personalizar nuestra la aplicación. Para utilizar el plugin, lo primero que debemos de hacer es añadir las librerías a nuestro proyecto, tanto jQuery como el plugin. Luego, debemos de enlazar la imagen, asignándole la clase que hará el zoom: Por último tendremos que hacer la llamada a la función que hace el zoom: Como hemos dicho, se pueden añadir funcionalidades extras, como indicar el área del zoom, si la forma será cuadrada o redonda... Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Pasos para implementar el plugin calendario jQuery El objetivo de este post es mostrar a las personas que tengan un mínimo de conocimientos sobre Javascript, cómo implementar un sistema de calendario, pero sin complicarles la vida con explicaciones sobre cómo está hecho el script. Osea, daremos una simple receta para poder implementar el calendario jQuery en una web. Vamos a mostrar cómo hacer un calendario como este. Descarga los archivo del calendario Copia los archivos del calendario Añade la hoja de estilos del calendario El lugar adecuado para poner esa etiqueta seria la cabecera de la página y tienes que asegurarte que la ruta hacia la hoja de estilos está correcta. Incluye los scripts de jQuery y el plugin del calendario Nuevamente, tienes que asegurarte que las rutas a los archivos del calendario están bien puestas. Estas etiquetas, en principio, también deberían colocarse en la cabecera. Coloca el código HTML para mostrar un INPUT de texto Convierte el campo de texto en un campo de calendario con código Javascript Ese script lo puedes colocar en cualquier lado del código HTML y, una vez que cargue la página, hará que el campo de texto se convierta en un campo para escribir una fecha por medio del calendario. Código completo de una página que utiliza el plugin del calendario Puedes copiar y pegar ese código HTML y debe funcionarte el calendario, siempre que verifiques que las rutas a los recursos como la hoja de estilos CSS y los scripts están correctas. Para acabar, puedes ver el ejemplo en marcha en una página aparte. Esperamos que el plugin del calendario te haya funcionado sin mayor complicación. Podrás comprobar que hemos colocado el calendario con colores básicos en escala de grises, para que encaje en el diseño de cualquier web. Podrás cambiar esos colores y muchas otras cosas en la hoja de estilos CSS. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Selector rápido del año para el calendario jQuery Cómo hacer un control para poder seleccionar el año que queremos ver en el calendario jQuery Ya tenemos un sistema para la selección de fechas bastante funcional. La única cosilla que nos facilitaría bastante la selección de fechas es poder seleccionar directamente un año, sin tener que navegar por los meses siguiente y anterior. Imaginar que necesitamos seleccionar una fecha que está 6 años hacia delante en el calendario. Tendríamos que ir 12 x 6 meses hacia delante para poder mostrar el mes y año del que queremos seleccionar la fecha y eso es poco práctico. Así que, para evitar que la navegación por meses se quede corta, vamos a hacer un pequeño control para poder seleccionar cualquier año. El resultado de lo que vamos a realizar se puede ver en una página aparte. Control para el cambio de año Eso es todo, con esta modificación ya queda listo el calendario jQuery, por lo menos todo lo que hemos querido implementar en estas fases. Seguramente otras personas necesitarán otras modificaciones, y esperamos que al haber visto el calendario en sus distintas etapas sea más sencillo encontrar por uno mismo el lugar o lugares donde se debe modificar. Con todo, hemos creado un calendario dinámico para la selección de fechas en menos de 300 líneas de código, que ocupa 9 KB de código Javascript, lo que lo hace más que razonablemente ligero para utilizar en cualquier proyecto. Además, a través de la hoja de estilos, cualquier persona podrá alterar radicalmente el aspecto del calendario para adaptarlo al look & feel de su sitio web. Código completo del plugin calendario Si lo deseas, puedes ver este último ejemplo de calendario en una página aparte. Recuerda que si deseas aprender a usar este calendario en tu proyecto debes seguir las explicaciones del post anterior. Por nuestra parte y por el momento, nada más... esperamos que este desarrollo haya sido fácil de entender y sea fácil de utilizar por los interesados en utilizar un datepicker en sus proyectos. Sobre todo, esperamos que una persona con conocimientos de jQuery pueda modificarlo para adaptarlo a las necesidades propias de cada uno. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||