jqDnR :: Minimalistic Drag'n'Resize for jQuery Who? jqDnR Minimalistic Drag'n'Resize for jQuery What? jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. Features; Drag + Drop Element Posistioning South East ResizingDefinable Drag and Resize "handles"Translucent Dragging, Preservation of Original Opacity Why? I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. If you like jqDnR, please consider a dontation to support its development: When? Current Version: 2007.08.19 +r2 (c) 2007 Brice Burgess under The MIT License Where? Download the Plugin (jqDnR.js - 972 bytes) Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position. How? Examples 1. Javascript 2. 3. Etc.
SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) controller.removeTween('#fade'); Example:
Stripe Generator - ajax diagonal stripes background designer jRumble | A jQuery Plugin That Rumbles Elements About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. Please read this before using jRumble. The Author My name is Jack Rugile. Like the Plugin? This plugin is free to use, however, if you enjoy jRumble and want to show some support, feel free share it or make a donation. Usage Include jQuery and jRumble Include jQuery and jRumble just before your closing body tag. Initialize jRumble on a Selector and Trigger Start or Stop You can do this in a script tag within your HTML or in an external JavaScript file. // Initialize jRumble on Selector $('#rumble-element').jrumble(); // Start rumble on element $('#rumble-element').trigger('startRumble'); // Stop rumble on element $('#rumble-element').trigger('stopRumble'); Demos Ranges View Source Speeds Opacity Trigger Examples Documentation Options/Defaults Known Issues Changelog v1.3 - December 3, 2011 v1.2 - October 23, 2011
jQuery.parallax Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
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
Adapt.js - Adaptive CSS scrolldeck.js Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"
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 Chosen - a javascript select thingy 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
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.
Opera mobile window chooser, recreated with jQuery It’s always fun to play with jQuery especially when you are trying to recreate something that you enjoy using. One such thing is window chooser in Opera Mobile browser where opened windows are positioned below each other and only a portion of each window is visible. The one on the top is current window that is fully visible. Clicking on those windows is followed by some nice effect. View demo Our “windows” are nothing more than simple unordered list. On the very beginning we define how much each window will be hidden and how much it will slide to the left and right. var itemWidth = $("#container li").width(); // hide 50% of each window var itemPosition = itemWidth * 50 / 100; // slide each window 60% if its width var itemMove = itemWidth * 60 / 100; // move windows below each other and assign ID to each $("#container li").each(function(i) { $(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i); }); Now the main part. Here’s how we slide windows to the right.