Wookmark jQuery Plugin

Uniform - Sexy forms with jQuery Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility. Documentation Installation Installation of Uniform is quite simple. Basic usage Using Uniform can be quite easy as well. $(function(){ $("select").uniform(); }); To “uniform” all possible form elements, just do something like this: $("select, input:checkbox, input:radio, input:file").uniform(); Extra parameters You can pass in extra parameters to control certain aspects of Uniform. selectClass (string) Default: "selector" Sets the class given to the wrapper div for select elements. radioClass (string) Default: “radio” Sets the class given to the wrapper div for radio elements. checkboxClass (string) Default: true

Turn.js: Make a flipbook with HTML5 Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. Let's code <div id="flipbook"><div class="hard"> Turn.js </div><div class="hard"></div><div> Page 1 </div><div> Page 2 </div><div> Page 3 </div><div> Page 4 </div><div class="hard"></div><div class="hard"></div></div> Features ✓ Works on iPad and iPhone. ✓ Simple, beautiful and powerful API. ✓ Allows to load pages dynamically through Ajax requests. ✓ Pure HTML5/CSS3 content. ✓ Two transition effects. ✓ Works in old browsers such as IE 8 with turn.html4.js Requirements jQuery 1.3 or above. Browser Support Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8 Devices ✓ All iOS (iPad, iPhone, iPod) ✓ Android (Chrome for Android) Improvements Turn.js 4 includes a set of significant performance improvements on its core. Complements Support About

Freetile.js - Un plugin jQuery type masonry pour layout responsive Freetile.js est un plugin jQuery permettant d'agencer dynamiquement un layout avec redimension fluide. Vous connaissez peut être Masonry ou Isotope dans le même genre de plugin, voici le dernier venu Freetile.js. Ce plugin permet d'agencer un layout composé de blocks, images etc. et d'optimiser l'espacement et alignement des blocs pour perdre le moins d'espace. Dès que le navigateur est redimensionné, les blocs de repositionnent avec un effet de transition. Quelques points le différencie des autres plugins du même type: Pas besoin de créer des colonnes pour gérer les blocs, ni leur spécifier de tailleL'algorithme de positionnement des blocs est facilement personnalisable, il sera ainsi possible de le modifier pour aligner plutôt sur la droite par exemple. Son utilisation est très simple: Il suffit de mettre en sélecteur le conteneur de votre layout, et le tour est joué! Pratique dans cette ère du responsive webdesign que l'on connait aujourd'hui. Site Officiel

Selectize.js Current Value: "awesome,neat" Add and remove items in any order without touching your mouse. Use your left/right arrow keys to move the caret (ibeam) between items. This example is instantiated from a <input type="text"> element (note that the value is represented as a string). Current Value: null This demonstrates two main things: (1) custom item and option rendering, and (2) item creation on-the-fly. The most vanilla of examples. Selectize supports <optgroup> rendering (as of v0.5.0). Current Value: ["CA","WY"] This example only allows 3 items. Current Value: "" A good example of (1) support for international characters (diacritics) and (2) how items are scored and sorted. $('#select-country').selectize(); Current Value: " This demo shows how to integrate third-party data from the GitHub API. This demo shows how to integrate third-party data from the Rotten Tomatoes API. Current Value: "web development,design" drag these items around with your mouse

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action. Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built.

jQuery Picture - Des images responsives avec du JS JQuery Picture est un plugin pratique pour permettre aux images de votre site d'être responsives. Le plugin est vraiment simple d'utilisation, mais il ne s'applique sur les nouvelles balises html5 <figure> ou encore <picture> ! Balise figure: 1.<figure class="responsive" data-media="images/small.png" data-media440="images/medium.png" data-media600="images/large.png" title="LaFermeDuWeb"> 2. 3. 4. 5. Le plugin vous autorise à utiliser plusieurs images pour différentes largeurs de son conteneur (l'élément qui l'a contient), qui varie à chaque resize du navigateur, via les attributs data-mediaXXX. Par exemple, l'image "medium.png" sera affichée pour un conteneur de 440px à 660px. Vous pouvez constater que si aucun JS n'est detecté, l'image par défaut dans la balise noscript sera affichée. Balise picture: 1. 2. 3. 4. 5. 6. 7. 8. Activation du plugin: Enfin il ne vous reste plus qu'à activer le plugin pour resize en douceur toutes nos images ! 1.$('.responsive').picture(); Site Officiel Sur Github

OriDomi - origami for the web Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right to Left Support

Lateral On-Scroll Sliding with jQuery After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. We will also add the opti View demo Download source After getting the request, we are going to show you how to create a “slide-in on scroll” effect. The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. So, let’s start! The Markup The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. The CSS The row will serve as a wrapper for the left and right elements: Demos

Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast

spin.js Mini Help System with jQuery Martin Angelov In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted. The Idea For this example to work, here is what we have to do: We have to listen for the input event on the text box. Let’s start with the markup. The HTML The first step is to lay down the HTML of the page that we will be working on: index.html <! There’s nothing out of the ordinary here – we are including a stylesheet in the head (you might want to take a look at it yourself, I won’t present it in this tutorial), jQuery and the scrollTo plugin at the bottom, along with two more js files that we will be discussing next. Mini Help System With jQuery The jQuery Code assets/js/highlight.jquery.js And voila, our text is full with pretty highlights! Here is how to use the plugin: assets/js/script.js Conclusion jQuery

Fine Uploader Live Demo and Javascript Code Examples Basic Setup Want to upload files to your own server? You need only to include a CSS file, a JavaScript file, and handle the uploads on the server side according to the technology you are using. There are absolutely no other dependencies. You can quickly set up an HTML page in order to use Fine Uploader: Download and unpack the latest version of Fine Uploader. Have a look at the following live demos for examples of common setups. Gallery View for Images In this demo, we're utilizing Fine Uploader 4's client-side image preview generation feature. This uploader is also restricted in allowed extensions (jpeg, jpg, gif, and png) This demo uses the default simple thumbnails template bundled with Fine Uploader UI. Note: File bytes are not actually being sent to the server for this demo due to limitations of the GitHub Pages server. Processing dropped files... No Dependencies jQuery Manually Trigger Uploads & Edit File Names Validation There are various options available to you when using Fine Uploader.

jQuery Quicksand plugin Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle