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

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

jQuery Masonry 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

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

Hovercard - a jQuery plugin with built in Twitter and Facebook cards Hover over the red text to see the hovercard in action: jQuery is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 by John Resig is an application developer at Khan Academy. He was a JavaScript tool developer for the Mozilla Corporation. at BarCamp NYC. jQuery is free, open source software, dual-licensed under the MIT License and GNU General Public License, Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. View Source <p>jQuery is a cross-browser JS library designed to simplify the client-side scripting of HTML. <p>jQuery is free, open source software, dual-licensed under the MIT License and GNU General Public License, Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

OriDomi - origami for the web 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

Great Ways to Learn jQuery These jQuery resources will set you on the path towards mastering jQuery. Written Articles Getting Started with jQuery – this is the official jQuery getting started guide.jQuery for JavaScript Programmers – Simon Willison (creator of django) gives you an introduction to jQuery for people who already understand JavaScript.jQuery Crash Course – Nathan Smith gives a quick introduction to jQuery on Digital Web Magazine.Introduction to jQuery – Rick Strahl, well-known for his work developing with Microsoft technologies, gives his introduction to jQuery with part two covering using jQuery with ASP.NET. E-Books jQuery Fundamentals – open-source e-book written by Rebecca Murphey in collaboration with other well-known members of the jQuery community.jQuery Enlightenment – Cody Lindley’s e-book covers advanced topics on jQuery with links to working code examples in jsbin. jQuery Books Slideshows Learning Screencasts Attend a training course Hire a Corporate jQuery Trainer Conferences jQuery Meetups Podcasts

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

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

jqPagination, a jQuery pagination plugin (obviously) Introduction jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number. The plugin will ensure that only valid pages can be selected, a valid request will result in the paged callback. First, previous, next and last buttons work out of the box, but are optional. Download Fork on GitHub Here are a few key points: Design agnostic Customisable Degrades beautifully Super simple to integrate with your app / site Uses jQuery... who doesn't love jQuery?! Demo It's oversized too, so you can try it when you're drunk! Show / hide event log: Installation Installation is super easy, for a basic setup you'll need the following HTML: And now we'll need to initialise the plugin against our HTML: Customisation Options Callbacks Methods current_page max_page

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.

Chained AJAX Selects Martin Angelov In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. The idea for this tutorial was suggested by Casper Hansen from Denmark. The HTML As you can see from the screenshot below, the select box is accompanied by a title that explains what the selection is about. Chained AJAX Selects with jQuery and PHP When adding more questions, additional LIs are created by jQuery. index.html – generated code <ul id="questions"><li><p>What would you like to purchase? You might notice in the demo page that we aren’t using the default browser select controls. The jQuery code Here is what our jQuery code does in short – it fetches the select boxes information as JSON from the server, generates their HTML, and sets up event listeners for selection changes. In the code, this is achieved using two JavaScript functions: You can see them below. assets/js/script.js Done