background preloader

jQueryPlugs

Facebook Twitter

Trumbowyg : a lightweight WYSIWYG editor. Introducing Trumbowyg Why you should love it?

Trumbowyg : a lightweight WYSIWYG editor

HTML5 ready Editor and generated code are optimized for HTML5 support. Compatible with all recents browsers like IE8+, Chrome, Opera and Firefox. Fast & lightweight. 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.

jQuery PowerTip

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. Easy to use tabs plugin for jQuery/Zepto. TabbedContent is a lightweight* tabs plugin that uses the HTML5 history API to add your tab navigation to your browser’s history. * 2.6 KB packed, 1.5 KB gzipped It is compatible with both jQuery and Zepto.js libraries.

Easy to use tabs plugin for jQuery/Zepto

It also has an API that will let you switch between tabs externally. Online Demos Installing using npm npm install tabbedcontent Usage. FlyOut HTML5, Flash and static banner ads positions and layouts. jQuery Offcanvas. Hemi Intro DEMO. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Hemi Intro DEMO

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Get started today Safari bug warning! As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. Donec id elit non mi porta gravida at eget metus. Responsive Navigation. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Responsive Navigation

jQuery AniView. Cta.js - Animate your 'action-to-effect' paths! Nohtcoltd/turnbox_js. Nex - Api Documentation. jQuery responsive mousehover zoom. About AJAX-ZOOM: what makes the difference exactly?

jQuery responsive mousehover zoom

On default only the high resolution "master images" (source images) need to be defined, see "images" object / array in the example code below. This "images" object is basically the only thing which needs to be replaced dynamically by your application. All thumbnails and flyout view images are instantly generated by AJAX-ZOOM "image server" which is located at your place (server). The size of the flyout image can be set to e.g. 1200x1200px, which are at most 1.44 Mio. pixels. For a 21 megapixels master image made by e.g. Alternatively to AJAX-ZOOM PHP based "image server" the paths to these flyout "preview" images can be hardset (see "images" option below) to point to some static (already scaled) images.

Same as with thumbnails all image tiles can be generated instantly on-the-fly or pregenerated with AJAX-ZOOM special batch tool... Details about responsiveness But what about the height of this mouseover zoom? Beep.js. Gopatrik/space.js. UberVU/grid. Andreacrofts/spectrum-plugin. Andrea Crofts. Space.js – HTML-driven narrative 3D-scrolling. Glarios/jQMeter. Responsive Menu Test. Borkabrak/takenotes. jQueryTween - Lightest Tweening Engine for jQuery. Developer Friendly Using tween.js is now super duper easy with jQueryTween, as it expands it's powers in many ways.

jQueryTween - Lightest Tweening Engine for jQuery

It also comes with 2 special callbacks for your other Javascript functions. Lightweight & Modular jQueryTween is only 8Kb, and works as a controller for tween.js while this one is about 6Kb and calculates the "between" values from an initial state to a target state based on easing functions. 19 Tween Properties Yes that's right! Friendly License. OriDomi - origami for the web. Initialization Create an OriDomi instance by passing your target element to the constructor: var folded = new OriDomi(document.getElementsByClassName('paper')[0]); …or pass a selector string and OriDomi will use the first element that matches: var folded = new OriDomi('.paper'); If you prefer using jQuery, try this: var $folded = $('.paper').oriDomi({/* options object */}); // when using jQuery, iterate OriDomi methods over multiple elements like this: $folded.oriDomi('accordion', 20); // to access the OriDomi instance at the top of the jQuery selection directly: var folded = $folded.oriDomi(true);

OriDomi - origami for the web

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou. Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual <link rel="stylesheet" href="awesomplete.css" /> and <script src="awesomplete.js" async></script> tags.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

For the autocomplete, you just need an <input> text field (might work on <textarea> and elements with contentEditable, but that hasn’t been tested). Add class="awesomplete" for it to be automatically processed (you can still specify many options via HTML attributes), otherwise you can instantiate with a few lines of JS code, which allow for more customization. There are many ways to link an input to a list of suggestions. The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load: Or the following, if you don’t want to use a <datalist>, or if you don’t want to use IDs (since any selector will work in data-list): Or the following, if we want to instantiate in JS:

Slideout.js - A touch slideout navigation menu for your mobile web apps. 1.

Slideout.js - A touch slideout navigation menu for your mobile web apps.

First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body. Rithychhen. The VexFlow Tutorial. VexFlow is an engraving engine for music notation, and can be used as a rendering backend to various kinds of online music tools, libraries, and applications. It is designed to run on HTML5 Canvas and SVG. It is important to note that VexFlow is a low-level rendering API; most applications will want to use something like VexTab which is a higher-level language for rendering guitar tablature and music notation. VexFlow is written completely in JavaScript and when using it with HTML5 Canvas, requires no external libraries or dependencies. For SVG support, you will need to include the Raphael JavaScript library into your sources.

That said, this tutorial also makes use of the jQuery library to select and manipulate DOM elements. Finally, before we begin, this tutorial expects you to have some experience with programming in JavaScript and working with music notation. This source-code to this tutorial, including all the examples, is available in the GitHub repository. Favico.js - Make a use of your favicon. Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color. Slide animation Fade animation Pop animation Pop & fade animation. LukyVj/menu-to-cross-icon. Url.js. jQuery Cheatsheet. Selectors Basics Hierarchy Basic Filters Content Filters Visibility Filters Attribute Child Filters.

Chrisma/birdman.js. HTML5 Music Player. Danny Markov This time we want to share with you a cool experiment that we made. It is a music player that lives in your browser. It uses the powerful HTML5 File Reader and Audio APIs. As a result, you can just drag and drop mp3 files from your computer into the browser, and they are automatically added to your playlist. Features You can load mp3 files from your computer by dragging them and dropping them in the browser.

HTML5 Music Player How to use it. Css/flipside at master · hakimel/css. After12am/boids.js. Alumbo/jquery.parallax-scroll. Jquery.parallax-scroll demo. Wearede/DePreLoad.js. Bootstrap Popover Picker for Twitter Bootstrap 3. Plyr - A simple HTML5 media player. Secondary Sliding Navigation. Emn178/jquery-appear. Csudcy/jquery.fireworks. Trgraglia/jquery.horizonScroll.js. AnimatedModal.js. Jquery-stage. Trivial jQuery Stage Sample. PitPik/CalcSS3. Bootstrap-submenu. jAnimate - makes your animate.css rocks with jQuery. Neilj/Squire. Toastr8 Javascript. Gix075/jqueryIntroLoader. Mathachew/jquery-autotab. Dreamerslab/jquery.actual. jQuery-Tabledit. Twitter Bootstrap Wizard. Jquery.tween.js. Easy Modal for Bootstrap. Create a filtered image gallery with jQuery and Fancybox. We are going to create a Fancybox image gallery that can be filtered by different categories using jQuery and Fancybox.

If you have seen the Isotope jQuery plugin, then you get the idea of what we will be talking about. This the first part of a series of two tutorials. Let's start by defining the two main sections we would need to focus on : The categories selector (tab style)The Fancybox image gallery (thumbnails collection) The category selector First, imagine our gallery organized by different categories, i.e AnimalsLandscapesArchitecture The category selector will allow us to filter the gallery by any of the existing categories as above and browse it in Fancybox. The basic html :

IsLoading jQuery plugin. Useful.js: JavaScript examples, too useful not to share. Custom select element for Mobile interfaces. Animatr. Animatr is a jQuery plugin that allows you to create CSS3 animations using only HTML5 data-attributes. Lay out your animation steps by time (in seconds), percentages, or both. No more @keyframes or browser prefixing Run multiple animations simultaneously in one element Animatr's data-attributes style, and name, are inspired by the wonderful Skrollr.

Reveal-it.js Code Samples. Mjolnic/fontawesome-iconpicker. Mjolnic/bootstrap-colorpicker. Object-fit gallery. DanPurdy/gridSlide. Makefixed.js. Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laiconglin/bootstrap3_jquery_table_sortable. JsTree. Lastdates vSort by lastdates. vSort is a simple jQuery plugin for making lists sortable with a handle less than 1.4kB including cssTested in IE8, FireFox, ChromeLive Demo To include vSort plugin To run a javascript code after sorting is done.

Nikogu/amo. Datedropper - jQuery Dates Plugin. Dannynimmo/strapPoint. Bootstrap-checkbox. Bootstrap 3 Datepicker. Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION() Minimum Setup. Mprogress.js. Intro. The multipurpose alert & confirm. Drag and Drop Newsletter Builder using jQuery. Simbyone Newsletter Builder. MinAjax.js - A Minimalistic JavaScript Libary To Perform AJAX POST/GET. Getting It Into Your Html Usage: jQuery Store Locator Plugin. I can’t believe it’s been over a year since I first published my Google Maps store locator JavaScript code. I’ve had several requests for an updated version and that post has definitely received more traffic than any of my others. VincentLoy/jquery.tweetParser. jQuery - GraspSchedule.js.

GraspSchedule.js is a simple jQuery calendar plugin used to visualize complex schedules & events loading from JSON data, a little similar to the timeline or event calendar. Project maintained by Takahiro Watanabe. Evoluteur/structured-filter. Bouncy Navigation in CSS and jQuery. Classypicozu jQuery plugins.

Dante Editor example. Neveldo/jQuery-Mapael. Parallax-Scroll by Aen. Scrolline. Bachors/jQuery-my-instagram-gallery. KCFinder web file manager - SunHater Projects. Classypaypal jQuery plugins. Cchantep/bootstrap-combobox. Morphing Modal Window. Social Auth For PHP Standalone Sites and Applications. BlinkTitle.js.