Masonry
Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP)
Quick links: Jump Start Introduction Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did. What exactly is GSAP? The GreenSock Animation Platform is a suite of tools for scripted animation. TweenLite: the core of the engine which handles animating just about any property of any object. Loading the GSAP files Check out the download screen where you can download a zip containing minified and uncompressed files, or you can just paste a CDN link right into your page. Since TweenMax includes TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin, this one file gives you tons of goodies to play with and the CDN should help things load very quickly. Basic tweening
accounting.js - format money / currency in JavaScript
accounting.js is a tiny JavaScript library for number, money and currency formatting, with optional excel-style column rendering (to line up symbols and decimals). It's lightweight, fully localisable and has zero dependencies. Library Methods formatMoney() - format any number into currency The most basic function of this library is money-formatting numbers, with currency symbol, precision (places), and thousand/decimal separators: formatColumn() - format a list of values for column-display This table demonstrates how accounting.js can take a list of numbers and money-format them with padding to line up currency symbols and decimal places (NB: white-space:pre is needed for the browser to render the padded spaces): // Format list of numbers for display: accounting.formatColumn([123.5, 3456.49, 777888.99, 12345678, -5432], "$ "); formatNumber() - format a number with custom precision and localisation toFixed() - better rounding for floating point numbers Demo / Try it out Money formatting: 1. 2.
:: Alessandro Ferrini :: FerroSlider jQuery Plugin
A simple, powerful, responsive and customizable jQuery sliding plugin. Powered by HTML5 and CSS3. Latest version : 2.3.3 Downloaded 40768 times What is it? FerroSlider is a free jQuery plugin that allows you to organize the contents of websites in a unusual and cool way and navigate through them with a sliding effect. Slide everything Organize any type of content, such as images, text, pages, lists and so on. The Matrix The contents can be positioned and organized as you want: by row, by column or using a custom displacement, also called "The Matrix". Brand new FerroSlider 2 has been completely recoded from past versions. Responsive & universal FerroSlider uses standard HTML and CSS rules and is responsive and compatible with all the major browsers and with the two main mobile environments, Android and iOS. What you need FerroSlider only needs the main jQuery core (>= 1.9), and the Rico Sta. Compatibility
Dashing - The exceptionally handsome dashboard framework.
Here's a sample dashboard with 2 widgets. With a name of sample.erb, it becomes accessible at /sample. Each widget is represented by a div element needing data-id and data-view attributes. data-id: Sets the widget ID which will be used when pushing data to the widget. data-view: Specifies the type of widget that will be used. Both these widgets are of the same type: Number. Anatomy of a widget an HTML file used for layout and bindings a SCSS file for styles a coffeescript file which allows you to handle incoming data & functionality Number widget's HTML: Widgets use batman bindings in order to update their contents. You may notice the piping '|' characters in some of the data-bind's above. Number widget's Coffeescript: By default, whenever a widget receives JSON data, it mixes in the received data onto itself. Laying out the widgets Dashing uses gridster.js to create a layout for your widgets.
Free simple icons for your next project
Follow @iconmonstr Support me ads via Carbon 3 months ago 4 months ago 5 months ago Made in Germany © 2014 iconmonstr Ask me a quick question @iconmonstr Imprint License Donate
Forms
Default Form To create a default inline form, add the pure-form classname to any <form> element. <form class="pure-form"><fieldset><legend>A compact inline form</legend><input type="email" placeholder="Email"><input type="password" placeholder="Password"><label for="remember"><input id="remember" type="checkbox"> Remember me </label><button type="submit" class="pure-button pure-button-primary">Sign in</button></fieldset></form> Stacked Form To create a stacked form with input elements below the labels, add the pure-form-stacked classname to a <form> element alongside pure-form. Aligned Form To create an aligned form, add the pure-form-aligned classname to a <form> element alongside pure-form. Multi-Column Form (with Pure Grids) To create multi-column forms, include your form elements within a Pure Grid. Grouped Inputs To group sets of text-based input elements, wrap them in a <fieldset> element with a pure-group classname. Input Sizing Required Inputs Disabled Inputs Read-Only Inputs
Scrolling Parallax: A jQuery Plugin
Scrolling Parallax examples Simple scrolling parallax effect Multiple, layered parallaxes for a nice depth effect Parallax in all directions: vertical and horizontal scrolling Parallax called on a piece of inline HTML markup About Scrolling Parallax Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. Basic use of the Scrolling Parallax plugin is extremely easy. The Scrolling Parallax plugin is also very versatile. Download the Scrolling Parallax Plugin for jQuery Scrolling Parallax for background images Using the parallax for a background image is incredibly easy. $.scrollingParallax('img/background-parallax.jpg'); This will append the image to the page, and stretch its dimensions as described above. This would stretch the background width to 200% of the screen size, and enable the parallax to work on horizontal as well as vertical scrolling. Scrolling Parallax on jQuery objects $('div.parallax-div').scrollingParallax(); staticSpeed : .2
