jQuery plugin - Flex - Demo. Pinterest clone html mockup (designed by rocodev) Save images with Wookmark. jQuery Plugin. BlocksIt.js - Dynamic Grid Layout jQuery Plugin. Look Inside BlocksIt.js is a jQuery plugin for creating dynamic grid layout.
It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How? Well, simply specific the number of columns you wish to have and BlocksIt.js will do the rest for you. Also, you can even combine the ‘blocks‘ and make a huge block! How It Works BlocksIt.js will re-position the selected elements using CSS absolute position property. Start the new block from left to right, andPlace the new block under shortest block. How to use 1. It should works well with jQuery 1.7.1 (haven’t tested for lower version). 2.) 3.) #Note: If the blocks contains of <img> element, be sure to specific the images’ height before calling .BlocksIt()function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status.
Isotope. DateTimePicker jQuery plugin - DatePicker and TimePicker in one - select date and time - XDSoft. Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms.
It's easy to customize options. Source code on GitHub or download (zip). Don't use file datetimepicker.js from this server. It's not CDN. jQuery ReSmenu - Select based responsive menu. jQuery ReSmenu is a very simple and lightweight (~1Kb) jQuery plugin that collapse ul menus into selects on responsive layouts.
Download it on GitHub To use it you just have to include jQuery and a copy of the plugin in your head or footer: Let's say this is your menu: <div class="menu_container"><ul class="toresponsive"><li><a href="/">Home</a></li><li class="current-menu-item"><a href="test.htm">Link</a></li><li><a href="test.htm">Link 2</a></li><li><a href="test.htm">Link 3</a></li><li><a href="test.htm">Link 4</a></li></ul></div> Now the only thing to do is to trigger the menu with: $(window).ready(function () { $('.toresponsive').ReSmenu(); }); If you need more control here's the plugin settings: Some examples.
jQuery ReStable - Responsive tables to list jquery plugin. jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.
Download it on GitHub To use it you just have to include jQuery and a copy of the plugin in your head or footer: Let's say this is your table: <table class="mytable"><thead><tr><td>Period</td><td>Full Board</td><td>Half Board</td><td>Bed and Breakfast</td></tr></thead><tbody><tr><td>01/10/12 - 02/10/12</td><td>20 €</td><td>30 €</td><td>40 €</td></tr><tr><td>03/10/12 - 04/10/12</td><td>40 €</td><td>50 €</td><td>60 €</td></tr><tr><td>05/10/12 - 06/10/12</td><td>70 €</td><td>80 €</td><td>90 €</td></tr></tbody></table> Now the only thing to do is to trigger the action with: $(window).ready(function () { $.ReStable(); });
jQuery Label Better by Pete R. Feedback Me examples. Share Button Test. Switchery - iOS 7 style switches for your checkboxes. What is Switchery?
Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly. Licensed under the MIT License. Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+ If you like this module and you're a fan of iOS 7 style UI widgets, check out Powerange. Fork the GitHub repo. CountUp.js. Js - jQuery plugin for HTML5+JSON interactive tables and more. Demo Processing...
To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: $('#my-table').dynatable(); How it works Dynatable does three things: Read / Normalize The HTML table is scanned and normalized into an array of JSON objects (or collection) where each JSON object (or record) corresponds to a row in the table. This 3-step approach has several advantages: Efficient reading/operating/writing Since the logic and operations occur on the JSON collection, the DOM operations (reading and writing/drawing) are grouped together, making interactions quick and efficient.
Normalization The first module normalizes an HTML table into a JSON collection. The following table: Results in this JSON collection: Unheap - A tidy repository of jQuery plugins. Unheap - A tidy repository of jQuery plugins. Jquery.matchHeight Tests. App Showcase with Grid Overlay. JQuery Complexify. Websites have a responsibility to users to accurately tell them how good a password is, and this is not an easy job.
If your password is 8 characters long and only formed of lower case characters, you need to make it better, perhaps by adding a number or more characters. If your password is 25 characters long but happens to not contain a number, you shouldn't be forced by a password security policy to add one, you clearly have a very secure password. Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons. Note: I use the term 'casually' because this is only client-side validation and anyone could turn it off. I recommend implementing a minimum length check server-side as well. Complexity Rating Unicode Complexify supports Unicode and will add appropriate complexity for the size of character set included in a password.
Chardin.js. jQuery Google Map. Introduction jQuery Google Map is a jQuery Plugin allows you to easely manipulate the Google Map API.
You are now able to create maps, add some markers et create routes. Ractive.js. Firechat - open source chat built on Firebase. 50 super plugins jQuery récents pour rendre votre site ergonomique et attrayant. Cela fait quelques années que le Javascript et notamment jQuery – qui simplifie et norme son utilisation – continuent d’être de plus en plus utilisés.
Aujourd’hui cette technologie est toujours plus facile à exploiter grâce à l’installation de plugins, c’est-à-dire de petits modules de code. Il n’a jamais été aussi facile qu’aujourd’hui de rendre un site ergonomique, originale et attractif ! Ces 50 plugins sélectionnés avec soin parmi les milliers existants vous permettront de transformer n’importe quel site fade en site riche, intuitif, interactif et ergonomique, y compris sur mobile. Leur mise en place est en général très simple. Selon le plugin et ses capacités son utilisation et les réglages varient de très faciles à plus avancé pour les connaisseurs. Plugins pour réaliser des sites avec effets de scroll et/ou de la parallax Parallax.js Parallax.js.
Morris.js. Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href=" <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>4 <script src=" If you don’t want to use the CDN-hosted assets, then you can extract them from the zip bundle and upload them to your own site.
Morris.js. jQuery File Upload Demo. Checkboxes and radio buttons customization (jQuery and Zepto) plugin. Pickadate.js. Examples. Progression.js. Documentation ..:: Getting Started Include the relevant files Firstly include jQuery and the progression.css and progress.js files. jQuery Pin. jQuery PowerTip. PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience. Download v1.2.0Zip file with examples, CSS, and script. Here are some basic examples of PowerTip in actions. You can also fiddle with PowerTip on the official JSFiddle demo. Placement examples Mouse follow example The PowerTip for this box will follow the mouse.
Progression.js. Pretty powerful tooltips - Demos. HTML, Text and AJAX qTip2 allows you to use not only regular textual content, but also complex HTML from other elements on the site. It can even pull content in from other pages via jQuery's .ajax() functionality, and supports in-built titles and close button. Styles and Customisation Not much of an artist? No problem! Choose a style from below to change the styling of every qTip on the page! qTip2 even supports styling via the jQuery UI Themeroller themes! Positioning Featuring a fully configurable, human-readable positioning system, qTip2 allows you to easily position your tooltips using element corners, and even reposition themselves when the viewport sizes changes! Sidr - A jQuery plugin for creating side menus. Thumbnail Grid with Expanding Preview. A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
View demo Download source If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. The simple jQuery plugin for lovers of one page websites. Have you used SMINT in a project? Id love to see what you've done. Id like to put together a gallery of the best SMINT website, with links back to the designers/developers, so if you have a great example of a SMINT powered website, send me a message on twitter @rabmyself SMINT V3 is finally here!
No, really it is! Finally got, a some downtime to have a look and update a few of the bugs and rework how it functions slightly. One of the main changes is that you no longer have to give you links an Id, you can just use a # as the href, such as href="#section1". The annoying bug of the menu bar sticking down the page when refreshed has been removed, though I havent been able to thoroughly test this yet, but it seems to work as intended. Added the ability to make internal links scroll the sections too by adding the class 'intLink'. If you have links in your main menubar that you want to link to an external site, just add the class 'extLink'. Its not 100% perfect, but its improving! PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane.
Advertisement. 50 super plugins jQuery récents pour rendre votre site ergonomique et attrayant. jQuery Plugin Registry.