Noty - A jQuery Notification Plugin. Rigoneri/timeout-dialog.js. Percentage Loader. Run loaderor download on BitBucket jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes.
It is open source (BSD licensed) and available with instructions on BitBucket [here] or you can just grab the files [here] more examples Controllable It's also possible to use the percentage loader as a controller - try clicking and dragging on the widget. Multiple run loaders You can easily run multiple loaders simultaneously. Back to top. jQuery NailThumb - Créez des miniatures d'images à la volée. Avec jQuery NailThumb vous pourrez créer vos thumbnails, à la volée, à partir des images en haute-résolution sans aucune altération de l'image d'origine. En une seule ligne de code, vous pouvez créer vos miniatures coté client sans modifier les originaux. Les dimensions peuvent être déclarées directement dans vos feuilles de styles CSS ou LESS. Ce plugin peut-être intégré avec tous types de galeries d'images pour obtenir dynamiquement des versions différentes en fonction de vos besoins. jQuery NailThumb permet notamment de : recadrer, redimensionner ses photosafficher ses miniatures avec des animationsprécharger les imagesle personnaliser… Utilisation basique de jQuery NailThumb : 01. 02. .square-thumb { 03. width: 150px; 04. height: 150px; 06. 07. 08. 09. 10. 11. jQuery(document).ready(function() { 12. jQuery('.nailthumb-container').nailthumb(); 14.
Site officiel.
Learning jQuery - Tips, Techniques, Tutorials. Events. Patterns. Quicksand. Reorder and filter items with a nice shuffling animation. Home About I love Mac apps, especially for their attention to detail. CoreAnimation makes it so easy to create useful and eye-pleasing effects, like the one in this video. Quicksand aims at providing a similar experience for users on the web. Documentation At the very basic level, Quicksand replaces one collection of items with another. Use plain HTML, like an unordered list. $('#source').quicksand( $('#destination li') ); This will work for the following HTML: <ul id="source"><li data-id="iphone">iOS</li><li data-id="android">Android</li><li data-id="winmo">Windows Phone 7</li></ul><ul id="destination" class="hidden"><li data-id="macosx">Mac OS X</li><li data-id="macos9">Mac OS 9</li><li data-id="iphone">iOS</li></ul> Please note that data-* is a perfectly valid HTML5 attribute.
First container (source) is visible to the user. If you want to include a callback function, add it as a last argument: Or List of available params: Examples. Megaptery - Explorez les profondeurs du web !
20 Wonderful jQuery Tooltip Solutions. How to Create An Ajax-Based HTML5/CSS3 Contact Form. [series_html5css3] Contact form is deadly essential for any website, as it acts as a messenger which passes the opinion or enquiries of visitors to webmaster. There have been countless contact forms on the web but unfortunately most of them do not explain to you the inner working parts, so here comes a detailed tutorial to teach you to build an advanced contact form from scratch based on the pop technology, HTML5 and CSS3.
Pin it Considering the nature of a web-based e-mail contact form we are also required to dive into two separate application fields, which is the PHP backend code for sending email and jQuery functions for rich user interface. Get started now to build your own advanced contact form! Shortcut to: Demo – Get a preview of what you are buildingDownload – Download all files (php + css) Structuring the Application To get started you’ll need some type of web server to work over. These packages will set up a local server on your machine with full access to PHP.
Inside our Form HTML. Understanding jQuery Plugins | Extraordinary Thoughts. If you’re here, I’m sure it’s no surprise jQuery is an easy library to use. jQuery may be easy, but it still has its quirks and can be difficult for some to grasp beyond basic functionality and concepts. No worries, I’ve got a simple guide here to help break down code, that may seem like overly complex syntax, into simple thoughts and patterns that can be easily understood.
Here, we’ve got a basic plugin layout: You may notice the structure I’ve provided is significantly different from others. Plugins can vary depending on usage and needs. So, let’s break it down! Essentially every plugin is contained in an immediate function like so: (function(arg1, arg2) { // code})(arg1, arg2); An immediate function is, as its name insinuates, a function. Now since all public variables are inaccessible, that could be a problem seeing jQuery itself is, in fact, a public variable. (function($) { // run some jQuery using $ symbol locally})(jQuery); We’ve got a basic jQuery function via a plugin: 20+ Must See Fresh and Useful jQuery Plugins from 2011. jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code.
This post presents advanced and cutting-edge jQuery plugins that will enhance your web designs tremendously. Full screen background slideshow plugin for jQuery. The main idea is to have a grid layout created with jQuery Masonry. View more expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image. Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way. Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. FitText makes font-sizes flexible. Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Remember that awesome music player psd created by Orman Clark? A simple jQuery circular content carousel.
Demo - Pikachoose a jQuery Slideshow. jQuery QRCode - Générez des QRCode en Javascript avec jQuery. jQuery.qrcode.js est une librairie jQuery permettant de créer des QRCode à la volée en Javascript. Les QRCodes, ces codes barres carrés au motif très reconnaissable, sont de plus en plus utilisés aujourd'hui. Phénomène de mode et procédé très utile, ils permettent aux smartphones équipés de scanner le code barre pour être redirigé sur une UR par exemple ou encore afficher un message...
Voici un plugin jQuery qui vous permettra de générer très facilement un QRCode avec du texte ou une URL: 1. <div id='monQrCode'></div> Et pour générer notre QRCode dans la div HTML: Quoi de plus simple ? Le plugin est basé sur une librairie Javascript permettant de générer des QRCode, il n'utilise donc aucun service tiers. La librairie sur lequel est basé le plugin est décliné en plusieurs langages: Générer des QRCode en PHP: ScriptGénérer des QRCode en Java: ScriptGénérer des QRCode en Javascript: ScriptGénérer des QRCode en Actionscript 3: Script Site Officiel.
jQuery Proven Performance Tips And Tricks (Slides) Thanks to everyone that attended the jQuery London and London Web Standards meetups this month. As requested, here are the slides from my talks including links to all of the jsPerf tests embedded for each section. Summary In case you missed the talk, the main takeaway from it was the importance of performance-testing your JavaScript and jQuery code (and appreciating performance gotchas you can keep in mind when writing code that uses jQuery). I feel that this is an area developers can significantly benefit from investigating further.
From the feedback so far it looks like the majority of the audience found the content useful, so please feel free to share the slides if you think they can assist other developers. Thanks I'd like to extend my thanks to Adam Sontag, JD Dalton, Mathias Bynens, Andree Hansson and others for helping tech review the slides and tests. As always, thank you for reading and sharing my posts over the year. Until next time, g'luck with your projects! Addy.