Cargador jQuery. Crear un efecto de “cargar página” o “loading” en jquery mientras se van cargando todos los elementos de la página web es realmente sencillo gracias a la función load() de jQuery. A continuación un ejemplo que puedes customizar el css a tu gusto de mil formas. 1º. Creamos damos estilos al div que aparecerá primero por encima del resto (con posición absoluta en css) hasta que se cargen ya todos los elementos del documento, que es cuando este div ya desaparecera. 2º. Insertamos en script dentro del “head” de nuestro documento: $(window).load(function () { // Una vez se cargue al completo la página desaparecerá el div "cargando" $('#cargando').hide();}); Y por último, insertamos el div con id “cargando” al principio o final del “body” de nuestra página web: <body><div id="cargando">Cargando...
Y aquí ya va todo el contenido (divs, imagenes, etc...) de tu pagina... Si tengo tiempo ya os pondré algunos ejemplos diferentes de cargadores utilizando este simple script como base. Averiguar si un elemento tiene una clase CSS con jQuery. Alternar imagen al hacer hover y mouseout | Jose Aguilar. (8 votos, promedio: 5,00 de 5) Loading ... En este artículo vamos a ver un ejemplo interesante que en muchos casos nos podría ser de gran utilidad.
Se trata de tener 2 imagénes, ya sea de un artículo, producto, noticia o lo que fuese y que al pasar el ratón por encima y sacarlo se produzca una alternación de ambas imágenes. Tendremos 2 imágenes dentro de un contenedor: Los estilos necesarios serían: Y luego faltará la clave del asunto, el código jQuery que simula la alternación de las imágenes utilizando la función animate() con el atributo “opacity”. Ver ejemplo en funcionamiento. Meny - A three dimensional and space efficient menu concept. jQuery Content Slider | Responsive jQuery Slider | bxSlider. IE7-js compatibilidad de Internet Explorer con navegadores modernos. Libería Javascript ie7-js, para hacer que Internet Explorer se comporte como los navegadores modernos y acepte los estándares del HTML5.
Estamos ante una librería bien sencilla de implementar, pensada para acabar con los dolores de cabeza que Internet Explorer nos produce a muchos desarrolladores cuando se trata de hacer que un sitio web se vea igual en este navegador que en otros clientes web modernos. La librería ofrece básicamente compatibilidad con Microsoft Internet Explorer ¡¡desde la versión 5.5!! Hacia adelante, por medio de unos scripts Javascript muy sencillos de instalar. Realmente será copiar y pegar un pequeño código que incluye el script, con un condicional para que solamente lo cargue cuando sea necesario. Nota: No ofrece compatibilidad con Internet Explorer 9, pues este navegador ya ha dado un salto de calidad, o mejor dicho, de respeto a estándares abiertos, por lo que su forma de trabajar ya es muy compatible con los navegadores de última generación. Conclusión. Fokus - Emphasized text-highlighting using JavaScript. It's that time of the year again! In late 2010, having spent five great years working at Fi, I was determined to change up my professional life.
After interviewing with Qwiki and accepting the position of Lead Interactive Developer it was decided; I was moving to San Francisco! It took a good few months of hard work to sort out all of the practicalities but it was definitely worth it now that I'm here. Fortunately I've still been able to keep this site updated and worked on a variety of projects and experiments throughout the year. The first project to see the light of day was Sketch, a drawing tool that mimics the style of old cartoons. It was refreshing to build something that allows others to be creative. Now – almost a year later – over 78,000 sketches have been saved. Sketch was followed by a short freelance project which involved building an interactive and animated logo for a Canadian media production company called Meru.
Blur.js. Scroll infinito con jQuery. También conocido como endless scrolling , endless pageless , paginación sin páginas , etc… es un patrón de interfaz de usuario del que se viene hablando desde hace unos años, aunque es últimamente cuando parece que lo veo implementado en cada vez más sitios. El ejemplo por antonomasia es por supuesto el de Google Reader, pero hay muchos más: Facebook (fijaros que lo hace una vez cuando vas a mitad de página), Digg, Bing, Vimeo, Dropular…. Básicamente consiste en cargar más contenido dinámicamente conforme te acercas al final de la página, de forma que la navegación por el mismo no queda interrumpida en ningún momento. Viene a ser un sustitutivo de la paginación tradicional . Luego comentaré los pros y contras que pienso tiene esta técnica. Antes contar cómo lo he implementado en mi tumblr, micro Usuario de Internet , algo que llevaba bastante tiempo queriendo hacer y que sin duda opino le va como anillo al dedo.
Hay 4 formas de lanzar el evento para traerse más contenido. De-Pagify. De-pagify let's you easily enable endless scroll for paged sites such as fmylife , digg , failblog and other blog sites to enable functionality similar to Bing image search . The latest code & documentation is available at . View Demo Usage Typical usage will follow the pattern: jQuery(link).depagify(options); Recipes Here are a couple popular, ready-to-go bookmarklets you can inject into everyday websites. Options Where link matches the "Next Page" link and options can override any of the following: container : ( defaults to body ) Where content is appended and where remote content comes from filter : ( defaults to null ) Selector or function to filter remote content trigger : ( defaults to 0.90 ) Float, integer, string or function to determine when to load remote content.
Examples To play around with de-pagify, you should probably get the jQuerify Bookmarklet which will inject jQuery into the page. Secondly, take advantage of the De-Pagify Bookmarklet. 14 plugins de jQuery para crear el efecto de scroll infinito. Uno de los efectos más bonitos y útiles que existen actualmente es el del scroll infinito, el cuál nos permite cargar contenido dinámico cada vez que el scroll llega hasta abajo. Facebook y Twitter incluyen este efecto, de tal forma que se ahorra la paginación y de alguna forma se hace más fluida la carga de contenido sin tener que cargar toda la página de nuevo.
De hecho, el problema es ese, hacer un efecto que sea lo más eficiente ya que si no se controla adecuadamente puede ocasionar que cada vez que el scroll baja se vuelva a cargar el contenido y eso ocupa tener que hacer peticiones, etc. Por eso les traigo 14 plugins de jQuery para crear el efecto de scroll infinito, para que elijamos el que más nos gusta y lo probemos en nuestro sitio o aplicación web. DIY jquery infinite scroll – Más información Create Infinite Scroll Effect Using jQuery – Más información Tutorial para crear un efecto de scrolling infinito con Javascript infini_scroll – MORE INFO Endless Scroll – Más información. Better, Stronger, Safer jQuerify Bookmarklet. A long time ago I built myself a little bookmarklet to load jQuery on pages that don't already have it.
The idea was to allow me to play around with any page on the web, using jQuery in the Firebug (and now Safari or IE8) console. I blogged about it, got lots of great feedback, and then blogged about an improved version. Now that a lot more great feedback has come through the comments of the updated bookmarklet post, I've decided to update it one more time. The Bookmarklet Update: May 7, 2012 Apparently, Safari 5.1 is stricter than other browsers in its enforcement of URL encoding for bookmarklets. The literal "%" needs to be converted to "%25" — something my bookmarklet generator was not doing when it encountered el.style.left='50%'. To use the bookmarklet, drag the following link to your bookmark/favorites list: Then, when you're on a page in which you want to play around with jQuery in the console, just click the bookmarklet.
Problems with the Other One A Few Improvements in This One. 14 plugins de jQuery para crear el efecto de scroll infinito. Magnific Popup: lightboxes responsive. Parallax Slider with jQuery. Los 8 mejores compresores CSS/Javascript gratis para optimizar tu web. La velocidad de una página web es un factor muy importante a la hora de que Google valore nuestra optimización en los buscadores (SEO), además de que una página lenta hará que los usuarios se marchen antes de lo previsto. Por ello, existen herramientas que pueden ayudarnos a optimizar y mejorar el tiempo de nuestra página web, como son los compresores CSS o Javascript (También podemos optimizar las imágenes web, algo que aligerará la carga igualmente).
En general estas herramientas funcionan depurando nuestro código, es decir, eliminando los bytes que no sirvan (redundancia) y mejorando la escritura del código. Aquí muestro una lista de los 8 mejores compresores CSS y Javascript gratis para mejorar la velocidad de carga de nuestra página web gracias a Thedesignsuperhero: 1. Site Load Test Escribe tu dirección y ve como carga todo de rápido. 2. Herramienta que agrupa el código CSS y Javascript en un único archivo. 3. 4. 5. 6. 7. 8. Interface elements for jQuery - About Interface. About Interface Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.
The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commercial usage as long as you keep the copyright notice in each of Interface's JavaScript source file. Please use jQuery's bug tracker to inform us about bugs, suggestions and feature requests. About jQuery jQuery is a new type of JavaScript library. jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun. jQuery achieves this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable. Visit jQuery's website for more information. TTabs. Tutorial rápido de jQuery. El mejor resumen de lo que es jQuery lo podemos encontrar en el lema de su propia página web: “La librería JavaScript para escribir menos y hacer más”.
Ampliando algo más esta definición, dejémoslo en que es una forma de convertir el desarrollo de la parte de cliente de una aplicación web en algo mucho más divertido, rápido y sencillo, facilitando la interacción con los elementos del árbol de documento, el manejo de eventos, el uso de animaciones, etc. Con algo más de 4 años de vida, jQuery se ha convertido en la librería JavaScript más utilizada actualmente, y es que, además, es gratuita, de código abierto (bajo licencia MIT y GPL v2) e increíblemente ligera. Entre sus usuarios podemos encontrar a Google, Microsoft, IBM, Amazon, Twitter, WordPress, Mozilla o Drupal. Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en nuestro proyecto. También podemos cargarla directamente desde el CDN que mantiene Google: el de Microsoft: o el del propio jQuery. Manual de jQuery. Libro gratuito de jQuery en español - Fundamentos de jQuery.
jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de interfaces web debería de conocer. El propósito de este libro es proveer un resumen de la biblioteca, de tal forma que para cuando lo haya terminado de leer, será capaz de realizar tareas básicas utilizando jQuery y tendrá una sólida base para continuar el aprendizaje. El libro fue diseñado para ser utilizado como material en un salón de clases, pero también puede ser útil para estudiarlo de forma individual.
La modalidad de trabajo es la siguiente: En primer lugar se dedicará tiempo a comprender un concepto para luego realizar un ejercicio relacionado. Algunos de los ejercicios pueden llegar a ser triviales, mientras que otros no tanto. El objetivo es aprender a resolver de manera fácil lo que normalmente se resolvería con jQuery. Las soluciones a todos los ejercicios están incluidas en el mismo material de aprendizaje. Obtener el Material de Aprendizaje Añadir JavaScript a una Página Ejercicios Operadores. Free Image Carousels for Web Developers.
One of biggest problem often faced by web developers is limited space. Using image carousels and slider components can be an easy way to add rich content to your site with little ease even with limited space. All you have to do is to select which carousel will be best for you. Keeping this in mind, I present a collection of 14 Image Carousels which can be of your use. Hope you like it. Carousel.us Carousel.us is a Javascript 3D carousel, using the MooTools framework. Download Here Galleriffic Galleriffic was inspired by Mike Alsup’s jQuery Cycle plugin, but with performance in mind for delivering a high volume of photos. Download Here Zoomimage Zoomimage – presents your images in stylish way. Download Here Beautiful jQuery slider This slider has some really useful index navigation that lets you flip between each slide using a number rather than the usual side sliders. Jquery.js : Download Herescripts.js : Download Here jQuery Slider II Download Here Space Gallery Download Here Download Here S3 Slider.
20+ Demos Showing Advanced jQuery Effects. Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery.
Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash. 1. Flip! A jQuery plugin This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y‑axis. 2. jQuery Quicksand plugin This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects. 3. 4. 5. 6. 7. jQuery Circulate 8. 9. 10. 11. 12.
8 plugins JQuery para mejorar layouts y UI's. En alguna ocasión debes trabajar en un proyecto que tenga requerimientos de una UI o layout – cosas que pueden ser echas solo con CSS-. Con proyectos como ese, JQuery puede ser útil. Así que en este artículo WDL ha recopilado algunos plugins JQuery que te ayudarán a mejorar las características de las layouts o UI’s cuando haya que optimizar y aumentar las capacidades de las UI’s o layouts. equalize.js Un plugin JQuery para igualar la altura o anchura de los elementos. jQuery Scroll Path jQuery Scroll Path es un plugin para definir caminos de scroll personalizados, usando canvas para dibujar líneas y arcos. freetile.js Freetile es un plugin que muestra el contenido del sitio web de un modo muy organizado, con una layout dinámicas y responsive. gridster.js Gridster es un plugin jQuery que permite arrastrar layouts desde elementos o columnas. rcarousel rcarousel – carrousel en JQuery. jQuery HiddenPosition Posicionar cualquier elemento, aunque esté oculto. turn.js BookBlock.