Saturday 30 August 2014

Chartist.js - Simple responsive charts

Chartist.js is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either:

not responsive

use the wrong technologies for illustration (canvas)

are not flexible enough while keeping the configuration simple

are not friendly to your own code

are not friendly to designers

have unnecessary dependencies to monolithic libraries

more annoying things

What is it made for?

Chartist’s goal is to provide a simple, lightweight and non-intrusive library to responsive craft charts on your website. It’s important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing a own solution to the problem which is is already solved by the standard. We need to leverage the power of the browsers today and say good bye to the idea of solving all problems ourselves.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist is not providing it’s own event handling, labels, behaviors and anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing “Simple responsive Charts” using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="bower_components/chartist/libdist/chartist.min.css">
<script src="bower_components/chartist/libdist/chartist.min.js">

2. HTML

<div class="ct-chart ct-perfect-fourth"></div>

3. JAVASCRIPT

var data = 
 // A labels array that can contain any sort of values
 labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
 // Our series array that contains series objects or in this case series data arrays
 series: [
 [5, 2, 4, 2, 0]
 ]
;

// In the global name space Chartist we call the Line function to initialize a line chart
// As a first parameter we pass in a selector where we would like to get our chart created
// Second parameter is the actual data object
Chartist.Line('.ct-chart', data);

4. OPTIONS

var options = 
 // Don't draw the line chart points
 showPoint: false,
 // Disable line smoothing
 lineSmooth: false,
 // X-Axis specific configuration
 axisX: 
 // We can disable the grid for this axis
 showGrid: false,
 // and also don't show the label
 showLabel: false
 ,
 // Y-Axis specific configuration
 axisY: 
 // Lets offset the chart a bit from the labels
 offset: 40,
 // The label interpolation function enables you to modify the values
 // used for the labels on each axis. Here we are converting the
 // values into million pound.
 labelInterpolationFnc: function(value) 
 return '£' + value + 'm';
 
 
;

// All you need to do is pass your configuration as third parameter to the chart function
Chartist.Line('.ct-chart', data, options);

5. RESPONSIVE SETTING OVERRIDES

Configuring different chart behavior for various media is made simple with an override mechanism. The priority of the override mechanism is based on order of specification of the matching media queries.

The following example uses different label interpolations (to save some space) on small media as well as different spacing between the bars of the bar chart series. Resize your browser window to see the effect.

var data = 
 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
 series: [
 [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
 [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
 ]
;

var options = 
 seriesBarDistance: 15
;

// You can define a responsive settings array that consists of settings arrays containing a media query as first element followed by a regular Chartist.js settings object. We recommend that you store your media queries somewhere centrally and use them wherever required.
var responsiveOptions = [
 // The first responsive setting is for medium / large media only
 ['screen and (min-width: 641px) and (max-width: 1024px)', 
 seriesBarDistance: 10,
 axisX: 
 labelInterpolationFnc: function (value) 
 return value;
 
 
 ],
 // These settings will only be applied to small media
 ['screen and (max-width: 640px)', 
 seriesBarDistance: 5,
 axisX: 
 labelInterpolationFnc: function (value) 
 return value[0];
 
 
 ]
];

// In addition to the regular options we pass in our responsive options array as 4th parameter
Chartist.Bar('.ct-chart', data, options, responsiveOptions);

Chartist.js - Simple responsive charts

Friday 29 August 2014

Animsition : jQuery plugin to Add Page Transition with CSS3

Download Demo

Animsition

Animsition is a simple and easy jQuery plugin used to add page transition on css animations.

*changed the name to “animsition” from “clickstream”.

18 different animation class

Fade

fade-in fade-out fade-in-up fade-out-up fade-in-down fade-out-down fade-in-left fade-out-left fade-in-right fade-out-right

Rotate

rotate-in rotate-out

Flip

flip-in-x flip-out-x flip-in-y flip-out-y

Zoom

zoom-in zoom-out

Installation

Step 1: Link required files

<!-- animsition css -->
<link rel="stylesheet" href="dist/css/animsition.min.css">

<!-- vendor js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- animsition js -->
<script src="dist/js/jquery.animsition.min.js"></script>

Step 2: HTML markup

<div class="animsition">

 <a href="./page1" class="animsition-link">animsition link 1</a>

 <a href="./page2" class="animsition-link">animsition link 2</a>

</div>

If you want to set for each “linkElement” a different animation.

<a 
 href="./page1" 
 class="animsition-link" 
 data-animsition-out="flip-out-y"
 data-animsition-out-duration="2000"
>
 animsition link 1
</a>

<a 
 href="./page2" 
 class="animsition-link" 
 data-animsition-out="rotate-out"
 data-animsition-out-duration="500"
>
 animsition link 2
</a>

If you want to set for each page a different animation.

<div 
 class="animsition" 
 data-animsition-in-class="zoom-in"
 data-animsition-in-duration="1000"
 data-animsition-out-class="zoom-out"
 data-animsition-out-duration="800"
>
 ...
</div>

Step 3: Call the animsition

$(document).ready(function() 
 $(".animsition").animsition(
 inClass : 'fade-in',
 outClass : 'fade-out',
 inDuration : 1500,
 outDuration : 800,
 linkElement : '.animsition-link', 
 // e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])'
 touchSupport : true, 
 loading : true,
 loadingParentElement : 'body', //animsition wrapper element
 loadingClass : 'animsition-loading',
 unSupportCss : [ 'animation-duration',
 '-webkit-animation-duration',
 '-o-animation-duration'
 ]
 );
);

Animsition : jQuery plugin to Add Page Transition with CSS3

Meny - A three dimensional and space effecient menu

Download Demo

Meny is a three dimensional and space effecient menu. Meny works best in browsers with support for CSS 3D transforms, although it falls back on 2D animation for older browsers. Supports touch events for mobile devices.

1. INCLUDE JS FILES

<script src="js/meny.js"></script>

2. HTML

Meny requires two HTML elements to work: a menu and the page contents. The class names are not used by the library so chose anything you want.

<body>
 <div class="meny">
 <!-- your menu items -->
 </div>
 <div class="contents">
 <!-- your page contents -->
 </div>
</body>

Some rules, notes and best practices to keep in mind in terms of markup and styling:

The menu and contents should have the same parent element.

The background which appears behind the contents when Meny is open is not added by the library. You need to set your desired background to the parent element. The default style can be found in demo.css.

The arrow which appears when Meny is closed is also not added by the library, if you want it you can easily copy the styles from the demo.css.

The menu container will be automatically resized by the library according to configuration options.

Meny works on scrolling pages as the menu itself is fixed.

3. JAVASCRIPT

var meny = Meny.create(
 // The element that will be animated in from off screen
 menuElement: document.querySelector( '.meny' ),

 // The contents that gets pushed aside while Meny is active
 contentsElement: document.querySelector( '.contents' ),

 // The alignment of the menu (top/right/bottom/left)
 position: 'left',

 // The height of the menu (when using top/bottom position)
 height: 200,

 // The width of the menu (when using left/right position)
 width: 260,

 // The angle at which the contents will rotate to.
 angle: 30,

 // The mouse distance from menu position which can trigger menu to open.
 threshold: 40,

 // Width(in px) of the thin line you see on screen when menu is in closed position.
 overlap: 6,

 // The total time taken by menu animation.
 transitionDuration: '0.5s',

 // Transition style for menu animations
 transitionEasing: 'ease',

 // Gradient overlay for the contents
 gradient: 'rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 100%)',

 // Use mouse movement to automatically open/close
 mouse: true,

 // Use touch swipe events to open/close
 touch: true
);

4. API & EVENTS

A few handy methods API methods are included, you call these on the instance returned byMeny.create (see above).

meny.configure( mouse: false ); // change settings after initialization

meny.open();

meny.close();

meny.isOpen(); // true/false

meny.destroy(); // revert original DOM state, unbind events

The wrapper element (parent of the menu and contents) is decorated with classes based on its state:

.meny-active
.meny-top
.meny-right
.meny-bottom
.meny-left

Instances of Meny dispatch events to notify you of their state:

var meny = Meny.create( ... ) // see 3. Initialize

meny.addEventListener( 'open', function() 

 // do something on open

 );

meny.addEventListener( 'close', function() 

 // do something on close

 );

meny.addEventListener( 'opened', function() 

 // do something right after meny is opened and transitions finished

 );

meny.addEventListener( 'closed', function() 

 // do something right after meny is closed and transitions finished

 );

Meny - A three dimensional and space effecient menu

Wednesday 27 August 2014

SwishJS - Animating elements using pre-defined CSS transitions

Download Demo

SwishJS is a lightweight JavaScript library for animating elements using pre-defined CSS transitions. Includes jQuery plugin.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="../dist/css-swish-transitions.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="../dist/jquery.css-swish.js"></script>

2. HTML

<div class="demo-section">
	<div class="x-demo-1-a hidden" data-swish-transition="swish-fade">
		<span>Fade In</span>
	</div>
	<div class="x-demo-1-b" data-swish-transition="swish-fade">
		<span>Fade Out</span>
	</div>
</div>
<div class="demo-section">
	<div class="x-demo-2-a hidden" data-swish-transition="swish-zoom">
		<span>Zoom In</span>
	</div>
	<div class="x-demo-2-b" data-swish-transition="swish-zoom">
		<span>Zoom Out</span>
	</div>
</div>
<div class="demo-section">
	<div class="x-demo-3-a hidden" data-swish-transition="swish-slide">
		<span>Slide In</span>
	</div>
	<div class="x-demo-3-b" data-swish-transition="swish-slide">
		<span>Slide Out</span>
	</div>
</div>
<div class="demo-section">
	<div class="x-demo-4-a hidden" data-swish-transition="swish-3d-rotate">
		<span>3D Rotate In</span>
	</div>
	<div class="x-demo-4-b" data-swish-transition="swish-3d-rotate">
		<span>3D Rotate Out</span>
	</div>
</div>

3. JAVASCRIPT

$(function() 
	$('.demo-section div').click(function() 
		var $tar = $(this);
		$tar.swish();
		$tar.siblings('div').swish();
	);
);

Native JS

var elem = document.querySelector('#selector');
elem.swish('swish-fade', 1000);

4. ADVANCED

Data Attributes

The easiest way to use Swish is to add data attributes to your markup. Set the transition class using data‑swish‑transition and the duration withdata‑swish‑duration. The duration attribute is optional and will default to the rules in your stylesheet.

HTML

<div
 id="selector"
 data-swish-transition="swish-fade"
 data-swish-duration="500"
></div>

NATIVE JS

var elem = document.querySelector('#selector');
elem.swish();

JQUERY

$('#selector').swish();

More Methods

You can also transition in a specific direction using swishIn and swishOut. These methods take the same arguments as swish.

NATIVE JS

elem.swishIn(transition, duration);
elem.swishOut(transition, duration);

JQUERY

$('#selector').swishIn(transition, duration);
$('#selector').swishOut(transition, duration);

Default State

If the default state of your element is hidden, you will need to adddisplay: none to that element. This lets Swish know that the element isn’t visible.

Custom Transitions

Swish wouldn’t be very useful if you couldn’t supply your own transitions, and it lets you do just that! You just need a main transition class and an in and outstate. The in state is applied when the element is visible, and the out state when hidden.

CSS

.example-transition 
 transition: all 1s ease-in-out;


.example-transition.out 
 background: blue;


.example-transition.in 
 background: red;

NATIVE JS

var elem = document.querySelector('#selector');
elem.swish('example-transition');

JQUERY

$('#selector').swish('example-transition');

Return Value

Swish returns the duration of the animation in ms when called. This can be useful if you need to queue animations. Because jQuery methods are all monads, the jQuery plugin does not have this behaviour by default and requires additional parameters to be supplied.

NATIVE JS

var duration = elem.swish();
// duration = 1000, the default as specified in CSS

var duration = elem.swish('example-transition');
// duration = 1000, the default as specified in CSS

var duration = elem.swish('example-transition', 5000);
// duration = 5000, the value provided to the method

JQUERY

var duration = $('#selector').swish(true);
// duration = 1000, the default as specified in CSS

var duration = $('#selector').swish('example-transition', true);
// duration = 1000, the default as specified in CSS

var duration = $('#selector').swish('example-transition', 5000, true);
// duration = 5000, the value provided to the method

Configuration

By default Swish uses the classes in and out to show and hide elements. If this doesn’t work with your project, you can configure Swish to use other classes.

NATIVE JS

Swish(
 hiddenClass: 'out',
 visibleClass: 'in'
);

JQUERY

$.Swish(
 hiddenClass: 'out',
 visibleClass: 'in'
);

SwishJS - Animating elements using pre-defined CSS transitions

Kontext - A context-shift transition inspired by iOS

Download Demo

Kontext is a context-shift transition inspired by iOS. Created using JavaScript, CSS 3D transforms and CSS Animations.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/kontext.css">
<script src="js/kontext.js"></script>

2. HTML

<article class="kontext">
	<div class="layer one show">
		<h2>Kontext</h2>
		<p>A context-shift transition. Use the dots below or your keyboard arrows.</p>
	</div>
	<div class="layer two">
		<h2>Layer Two</h2>
	</div>
	<div class="layer three">
		<h2>Layer Three</h2>
	</div>
</article>

<ul class="bullets"></ul>

3. JAVASCRIPT

// Create a new instance of kontext
var k = kontext( document.querySelector( '.kontext' ) );


// API METHODS:

// k.prev(); // Show prev layer
// k.next(); // Show next layer
// k.show( 3 ); // Show specific layer
// k.getIndex(); // Index of current layer
// k.getTotal(); // Total number of layers


// DEMO-SPECIFIC:

var bulletsContainer = document.body.querySelector( '.bullets' );

// Create one bullet per layer
for( var i = 0, len = k.getTotal(); i < len; i++ ) 
	var bullet = document.createElement( 'li' );
	bullet.className = i === 0 ? 'active' : '';
	bullet.setAttribute( 'index', i );
	bullet.onclick = function( event ) k.show( event.target.getAttribute( 'index' ) ) ;
	bullet.ontouchstart = function( event ) k.show( event.target.getAttribute( 'index' ) ) ;
	bulletsContainer.appendChild( bullet );


// Update the bullets when the layer changes
k.changed.add( function( layer, index ) 
	var bullets = document.body.querySelectorAll( '.bullets li' );
	for( var i = 0, len = bullets.length; i < len; i++ ) 
		bullets[i].className = i === index ? 'active' : '';
	
 );

document.addEventListener( 'keyup', function( event ) 
	if( event.keyCode === 37 ) k.prev();
	if( event.keyCode === 39 ) k.next();
, false );

var touchX = 0;
var touchConsumed = false;

document.addEventListener( 'touchstart', function( event ) 
	touchConsumed = false;
	lastX = event.touches[0].clientX;
, false );

document.addEventListener( 'touchmove', function( event ) 
	event.preventDefault();

	if( !touchConsumed ) 
		if( event.touches[0].clientX > lastX + 10 ) 
			k.prev();
			touchConsumed = true;
		
		else if( event.touches[0].clientX < lastX - 10 ) 
			k.next();
			touchConsumed = true;
		
	
, false );

Kontext - A context-shift transition inspired by iOS

Monday 25 August 2014

Infobox Error message jquery plugin

Download Demo

Infobox Plugin is a jquery highly customizable light weight pop up plugin that allows display Error message

you can use either with “jquery ui” library to get extra aniamtion effect on pop up or else you can also use only with “jquery” library Any one who knows basic javascript or jquery can easily use this plugin

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/infobox.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type='text/javascript' src='js/infobox.js'></script>

2. HTML

<div id="error">Error</div>
<div id="sucess">Sucess</div>
<div id="normal">Normal</div>

3. JAVASCRIPT

$( "#error" ).click(function() 
	$("body").infobox(
		type : 'error',
		tittle : 'Fatal Error',
		message : 'You got an error',
		overlay : 'true',
		effect : 'on',
		anim : 'bounce', /*slide,fold,bounce,,scale*/
		vposition : 'right',
		hposition : 'bottom',
		timeout : '4000',
		speed : '1000',
		animatefrom :'left'
		
	);
);

$( "#sucess" ).click(function() 
	$("body").infobox(
		type : 'sucess',
		tittle : 'succes You made it',
		message : 'You passed success fully',
		overlay : 'true',
		effect : 'on', 
		anim : 'slide', /*slide,fold,bounce,scale*/
		vposition : 'right',
		hposition : 'bottom',
		timeout : '4000',
		speed : '1000',
		animatefrom :'down'
		
	);
);

$( "#normal" ).click(function() 
	$("body").infobox(
		type : 'normal',
		tittle : 'Please continue',
		message : 'Continue your task and update ',
		overlay : 'true',
		effect : 'on', 
		anim : 'scale', /*slide,fold,bounce,scale*/
		vposition : 'right',
		hposition : 'bottom',
		timeout : '4000',
		speed : '1000',
		animatefrom :'up'
		
	);
);

4. OPTIONS

$("body").infobox(
	type : 'sucess', /*here you can define sucess, error ,normal*/

	tittle : 'succes You made it', /*here you can define error message tittle*/

	message : 'You passed success fully', /*here you can define error message*/


	overlay : 'true', /*here you can define "true' or "false" to hide overlay while pop up*/

	effect : 'on', /*this is the one of the main part ,define "off" if u are not using jquery ui library*/

	anim : 'slide', /*here you can define diffrent animation like slide,fold,bounce,scale if you are uisng "jquery ui"*/

	vposition : 'right', /*here you can define vertcal postion of pop up*/

	hposition : 'bottom', /*here you can define horizontal postion of pop up*/

	timeout : '4000', /*here you can define timeout to hide the pop up*/
);

Infobox Error message jquery plugin

Responsive Dropdown Menu Plugin

Download Demo

Responsive Dropdown Menu is A small jQuery plugin which allows you to create various types of menus for mobile devices. You can create a menu which can be toggled with a tap on mobile devices, a mmenu where each submenu can be toggled or a select list menu.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/cssmenumaker.js"></script>

2. HTML

<div id="cssmenu">
	<ul>
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Products</a>
			<ul>
				<li><a href="#">Widgets</a></li>
				<li>
					<a href="#">Wdigets 2</a>
					<ul>
						<li><a href="#">Plugins</a></li>
						<li><a href="#">Extensions</a></li>
						<li><a href="#">Modules</a></li>
					</ul>
				</li>
				<li><a href="#">Support</a></li>
				<li><a href="#">Another Widget</a></li>
			</ul>
		</li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

3. JAVASCRIPT

$("#cssmenu").menumaker(
	title: "Menu",
	format: "multitoggle"
);

4. OPTIONS

$("#cssmenu").menumaker(
 title: "Menu", // The text of the button which toggles the menu
 breakpoint: 768, // The breakpoint for switching to the mobile view
 format: "multitoggle" // It takes three values: dropdown for a simple toggle menu, select for select list menu, multitoggle for a menu where each submenu can be toggled separately
);

Responsive Dropdown Menu Plugin

Saturday 23 August 2014

Promin : jQuery plugin to boost your HTML forms Looks

Download Demo

A jQuery plugin to boost your HTML forms to level awesome!

By presenting the form in chunks, it will consume less space, look better and improves a user’s experience.

Usage

HTML

Your HTML needs little change in order for Promin to work. That means your form will still work if Promin does not for whatever reason.

All you have to do is add the pm-step class to each step, like so:

<form>
 <div class="pm-step">
 <input name="name" />
 </div>

 <div class="pm-step">
 <input name="email" />
 </div>

 <div class="pm-step">
 <textarea name="message"></textarea>
 </div>
</form>

JavaScript

$('#form').promin(options);

Options

Actions

options.actions = 
 /*
 submit: 'default' // Submit form normally
 submit: 'ajax' // Submit form via AJAX
 submit: false // Do nothing (use event handler)
 */

 submit: 'default'
;

Events

options.events = 
 /*
 Returning false on any of these events will
 cancel the operation.

 i: the current field index
 fields: list of all fields
 */

 // Called after the field index has changed
 change: function(i) ,

 // Called after .promin('next') is called
 next: function(i) ,

 // Called after .promin('previous') is called
 previous: function(i) ,

 // Called when the form is being submit
 submit: function(fields) ,

 // Called after .promin('reset') is called
 reset: function() 
;

Shortcuts

options.shortcuts = 
 /*
 Each shortcut (next, previous or reset) consists of an array of shortcuts.
 One shortcut can need multiple keys, defined as an array.

 next: [
 9, // tab
 13, // return/enter
 [13, 17] // enter + ctrl
 ]

 Note that are different keys are set in $.promin.key as listed below
 */

 next: [ $.promin.key.tab, $.promin.key.enter ], // tab or enter
 previous: [[ $.promin.key.tab, $.promin.key.shift ]], // tab and shift
 reset: [ $.promin.key.escape ] // escape
;

/*

$.promin.key = 
 backspace: 8,
 tab: 9,
 enter: 13, // alias for return
 return: 13,
 shift: 16,
 ctrl: 17,
 alt: 18,
 caps: 20,
 escape: 27,
 space: 32,
 pageup: 33,
 pagedown: 34,
 end: 35,
 home: 36,
 left: 37,
 up: 38,
 right: 39,
 down: 40,
 del: 46


*/

AJAX callback

options.ajaxCallback = function(data) 
 // data: Contents of requested page
;

Methods

$('#form').promin('next'); // Move form one step behind
$('#form').promin('previous'); // Move form one step ahead
$('#form').promin('show', i); // Show specific field <i>

$('#form').promin('reset'); // Reset and rewind the form
$('#form').promin('submit'); // Submit form manually

Promin : jQuery plugin to boost your HTML forms Looks

Velocity.js : Accelerated jQuery Animation

Download Demo

Velocity is a smart animation engine that re-implements jQuery’s $.animate() for significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve workflow.

In just 9Kb zipped, Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, SVG support, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.

Quickstart

bower install velocity
npm install velocity-animate
<script src="//cdn.jsdelivr.net/jquery.velocity/0.11.8/jquery.velocity.min.js"></script>

Which file should I use?

See VelocityJS.org/#dependencies for more information. jquery.velocity.js will soon be renamed to velocity.js as the jQuery dependency is dropped.

Velocity.js : Accelerated jQuery Animation

Parallax Slider

Download Demo

This content slider incorporates a parallax scrolling effect where each slide and its contents glide into view at different speeds, creating a captivating visual experience. Visual intrigue aside, however, Parallax Slider is an easy to customize, responsive slider that can adapt to different screen and device sizes, by supporting a percentage value as its width.

Features

Entire contents of slider defined via HTML markup. Each slide consists of a background image layer plus any number of content layers. Each layer within the slide is glided in sequentially after a slight delay following the previous.

The Slider supports two orientations- horizontal (default), or vertical (up down scrolling) instead.

Slider supports either fixed or fluid (percentage) dimensions via CSS, allowing for a responsive slider.

Slider can be set to automatically rotate and optionally stopping after x cycles.

Persistence of last viewed slide supported, so when the user reloads the page, the slider resumes from the last slide.

Slider automatically pauses onMouseover.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="parallaxslider.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.velocity.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

<script src="parallaxslider.js" type="text/javascript">

2. HTML

<div id="myparallaxslider" class="parallaxslider">

	<div class="slide">
		<div class="bgoverlay" data-bgimage="zenrocks.jpg"></div>
		<div class="desc">A cairn is a man-made pile (or stack) of stones, used as trail markers in many parts of the world. -Wikipedia</div>
		<div class="desc">
			<div style="position:absolute; bottom:15px; left:30px; width:250px; background:black; font:normal 105% Germand; padding:10px; font-style:italic; border-radius:10px; line-height:1.4em;">
			“Letting go is the lesson. Letting go is always the lesson. Have you ever noticed how much of our agony is all tied up with craving and loss?” <br />- Susan Gordon Lydon 
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="callalilies.jpg"></div>
		<div class="desc">
			<div style="position:absolute; width:150px; right:10px; line-height:1.5em; background:#E2AF16; padding:10px; border-radius:7px">“The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
			</div>
		</div>
		<div class="desc">
			<div style="position:absolute; bottom:1em">Cally Lily is a perennial plant, evergreen where rainfall and temperatures are adequate. -Wikipedia
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="leaf.jpg"></div>
		<div class="desc">
			<div style="position:absolute; top:40%; background:#754B08; font:normal 100% Germand; padding:10px; font-style:italic; border-radius:10px">
			“Problems that remain persistently insoluble should always be suspected as questions asked in the wrong way” <br /><br />Alan Wilson Watts
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="rowan.jpg"></div>
		<div class="desc" style="padding:0">
			<img src="strip1.jpg" style="position:absolute; top:0; opacity:0.9" />
		</div>
		<div class="desc" style="padding:0">
			<img src="strip2.jpg" style="position:absolute; top:135px; opacity:0.9" />
		</div>
		<div class="desc" style="padding:0">
			<img src="strip3.jpg" style="position:absolute; top:259px; opacity:0.9" />
		</div>
	</div>

</div>

<a href="javascript:firstparallaxslider.navigate('back')">Back</a> | <a href="javascript:firstparallaxslider.navigate('forth')">Forth</a>

Understanding the structure of the parallax slider’s markup

The slider’s markup consists of a main DIV with an unique ID and CSS class of =”parallaxslider”. Then for each slide, it consists of the following:

A <div class=”bgoverlay”> element to display a background image. Use the data-bgimage attribute to specify the full path to the background image, which is easier than using CSS’s style=”background:url(…)”, though the later method also works.

Any number of <div class=”desc”> elements to show arbitrary pieces of content that slide in one after the next. This DIV acts as a content holder, and should not be modified in any way via CSS, such as add padding/ margin or CSS positioning to it. Instead, define contents inside this DIV and stylize those contents to achieve the desired contents positioning and look. The following shows two examples of a slide’s markup, one correct, one incorrect:
Correct

<div class="desc">
	<div style="position:absolute; width:150px; right:10px;">
		“ The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
	</div>
</div>

Incorrect

<div class="desc" style="position:absolute; width:150px; right:10px;">
	The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
</div>

So as you can see, the <div class=”desc”> tag itself should always be left untouched, with no style added to it.

All “bgoverlay” and “desc” DIV are animated into view in succession, with a delay as defined by options.delaybtwdesc between them.

3. JAVASCRIPT

Add the below code to the HEAD section of your page:

var firstparallaxslider=new parallaxSlider(
 wrapperid: 'myparallaxslider', //ID of DIV on page to house slider
 displaymode: type:'manual', pause:3000, cycles:2, stoponclick:true, pauseonmouseover:true,
 delaybtwdesc: 500, // delay in milliseconds between the revealing of each description layer inside a slide
 navbuttons: ['left.png', 'right.png', 'up.png', 'down.png'], // path to nav images
 activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
 orientation: 'h', //Valid values: "h" or "v"
 persist: true, //remember last viewed slide and recall within same session?
 slideduration: 1000 //transition duration (milliseconds)
);

Parallax Slider

Thursday 21 August 2014

DropzoneJS - Drag&drop file uploads with image previews

Download Demo

DropzoneJS is an open source library that provides drag and drop file uploads with image previews and shows nice progress bars.

Main features

Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like

Retina enabled

Multiple files and synchronous uploads

Progress updates

Support for large files

Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.

Well tested

Browser support

Chrome 7+

Firefox 4+

IE 10+

Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)

Safari 6+

DropzoneJS - Drag&drop file uploads with image previews

Serialize Object - Converts HTML form into JavaScript object

Download Demo

Serialize Object is a jquery plugin that Converts HTML form into JavaScript object

Adds the method serializeObject to jQuery, to perform complex form serialization into JavaScript objects.

The current implementation relies in jQuery.serializeArray() to grab the form attributes and then create the object using the input name attributes.

This means it will serialize the inputs that are supported by .serializeArray(), that use the standard W3C rules for successful controls to determine which inputs should be included; in particular:

The input cannot be disabled and must contain a name attribute.

No submit button value is serialized since the form is not submitted using a button.

Data from <input type=”file”> inputs are not serialized.

1. INCLUDE JS FILES

2. HTML

3. JAVASCRIPT

.serializeObject — serializes the selected form into a JavaScript object

$(‘form#contact’).serializeObject();

//=> user: email: “jsmith@example.com”, pets: ["cat", "dog"]

.serializeJSON — serializes the selected form into JSON

$(‘form#contact’).serializeJSON();

//=> ‘“user”:“email”:”jsmith@example.com”,”pets”:["cat","dog"]’

FormSerializer.patterns — modify the patterns used to match field names

Many of you have requested to allow – in field names or use . to nest keys. You can now configure these to your heart’s content.

$.extend(FormSerializer.patterns,

validate: /^[a-z][a-z0-9_-]*(?:\[(?:\d*);

$.extend(FormSerializer.patterns,

validate: /^[a-z][a-z0-9_]*(?:\.[a-z0-9_]+)*(?:\[\])?$/i

);

Validating and Key parsing

validate — only valid input names will be serialized; invalid names will be skipped

key — this pattern parses all “keys” from the input name; You will want to use /g as a modifier with this regexp.

Key styles

push — pushe a value to an array

$(“form”).serializeObject();

//=> foo: [a, b]

fixed — add a value to an array at a specified index

$(“form”).serializeObject();

//=> foo: [, , "a", , "b"]

named — adds a value to the specified key

$(“form”).serializeObject();

//=> foo: bar: “a”, bof: “b”, hello: “world”

Serialize Object - Converts HTML form into JavaScript object

FocusPoint - Intelligent cropping for flexible image containers

Download Demo

More Demos

Lizard

Kangaroo

Dolphin

Bird

full screen

FocusPoint is a jQuery plugin for ‘responsive cropping’. Dynamically crop images to fill available space without cutting out the image’s subject. Great for full-screen images.

1. CALCULATE YOUR IMAGE’S FOCUS POINT

An image’s focus point is made up of x (horizontal) and y (vertical) coordinates. The value of a coordinate can be a number with decimal points anywhere between -1 and +1, where 0 is the centre. X:-1 indicates the left edge of the image, x:1 the right edge. For the y axis, y:1 is the top edge and y:-1 is the bottom.

image

2. INCLUDE CSS AND JS FILES

3. HTML

Specify the image dimensions and focus point coordinates on the image container. Note: I know it shouldn’t really be necessary to specify image dimensions but I’ve found this to be more reliable than reading the dimensions from the image. Example:

4. JAVASCRIPT

Usually the best place for this will be inside your $(document).ready() function.

//Fire plugin

$(‘.focuspoint’).focusPoint();

There aren’t many configuration options available at the moment, but if you want to you can prevent images being re-focused when the window is resized like so:

$(‘.focuspoint’).focusPoint(

reCalcOnWindowResize : false

);

You can re-focus images at any time with adjustFocus(). This recalculates where the image should be positioned in the frame. An example where you may need to do this is if you are using FocusPoint images within a slider. FocusPoint can’t do it’s calculations properly if an image container is hidden (as it won’t have any dimensions), so you should trigger adjustFocus() on the target container as soon as it becomes visible. Example:

$(‘.focuspoint’).adjustFocus()

5. TIPS AND TRICKS

Image composition

In order for this concept of ‘fluid cropping’ to work well, your images will need to include some negative space around the subject that you are happy to be cropped out when necessary. You don’t need space on every side of the subject – but for maximum flexibility you’ll want to include both some vertical and horizontal negative space.

Pure CSS alternative

You can get a similar effect to this technique using only CSS and the background-position andbackground-size properties. Browser support isn’t as good (at the moment) and your image won’t be positioned exactly the same way – but it’s pretty close. The CSS technique leans towards preserving the original composition while FocusPoint is biased towards keeping the subject of the image in the centre of the frame. Depending on your requirements either technique may suit you better.

SilverStripe CMS integration

This plugin plays really well with the silverstripe-focuspoint module, which lets you set the focuspoint on any image with just a click, and makes the info available in your front-end templates so you don’t have to do any math. It also provides really easy ‘destructive’ cropping outputting resampled images cropped to a particular width and height based on the same logic.

FocusPoint - Intelligent cropping for flexible image containers

jQuery.fracs - Determine the visible fractions of an HTML element

Download Demo

jQuery.fracs determines some fractions for an HTML element (visible fraction, fraction of the viewport, …) and also provides the coordinates of these areas. As a bonus there is a page outline feature as seen on the right.

1. INCLUDE JS FILES

2. HTML

3. JAVASCRIPT

$(“#outline”).fracs(“outline”,

crop: true,

styles: [

selector: 'header,footer,section,article',

fillStyle: 'rgb(230,230,230)'

,

selector: 'h1',

fillStyle: 'rgb(240,140,060)'

]

);

jQuery.fracs - Determine the visible fractions of an HTML element

Tuesday 19 August 2014

Validate.js - Lightweight JavaScript form validation library

Download Demo

validate.js is a lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 2kb gzipped, and customizable!

Features

Validate form fields from over a dozen rules

No dependencies

Customizable messages

Supply your own validation callbacks for custom rules

Chainable customization methods for ease of declaration

Conditionally validate certain form fields

Works in all major browsers (even IE6!)

Modeled off the CodeIgniter form validation API

1. INCLUDE JS FILES

2. HTML

<form name=”example_form” action=”#” method=”POST”>

<label for=”req”>Required field:</label>

<label for=”alphanumeric”>Alphanumeric field:</label>

<label for=”password”>Password:</label>

<label for=”password_confirm”>Password Confirmation (match password):</label>

<label for=”email”>Email:</label>

<label for=”minlength”>Min length field (min. 8 chars):</label>

<label for=”tos_checkbox”>Required checkbox (example: Terms of Service)</label>

<input name=”tos_checkbox” id=”tos_checkbox” type=”checkbox”>

<button class=”button gray” type=”submit” name=”submit”>Submit</button>

</form>

3. JAVASCRIPT

new FormValidator(‘example_form’, [

name: 'req',

display: 'required',

rules: 'required'

,

name: 'alphanumeric',

rules: 'alpha_numeric'

,

name: 'password',

rules: 'required'

, matches[password]‘

,

name: ‘email’,

rules: ‘valid_email’

,

name: ‘minlength’,

display: ‘min length’,

rules: ‘min_length[8]‘

,

name: ‘tos_checkbox’,

display: ‘terms of service’,

rules: ‘required’

], function(errors, evt)

if (errors.length > 0)

// Show the errors

);

new FormValidator(formName, fields, callback)

The FormValidator object is attached to the window upon loading validate.js. After creation, it will validate thefields on submission of the form named formName.

The formName passed in to validate must be the exact value of the name attribute of the form

An array of fields will be used to perform validation on submission of the form. The array must contain objects containing these properties:

name (required) – The name attribute of the element.

display (optional) – The name of the field as it appears in error messages. If not present in the object, thename parameter will be used.

Example: If your field name is user, you may choose to use a display of “Username.”

rules (required) – One or more rules, which are piped together.

Example – required|min_length[8]|matches[password_confirm]

depends (optional) – A function that runs before the field is validated. If the function returns false, the field is never validated against the declared rules.

depends: function(field)

return Math.random() > .5;

A callback will always be executed after validation. Your callback should be ready to accept two parameters.

errors – An array of errors from the validation object. If the length > 0, the form failed validation

This array will contain javascript objects with up to three properties:

- id: The id attribute of the form element

- name: The name attribute of the form element

- message: The error message to display

- rule: The rule that prompted this error

event – If the browser supports it, the onsubmit event is passed in.

function(errors, event)

if (errors.length > 0)

var errorString = ”;

for (var i = 0, errorLength = errors.length; i < errorLength; i++)

errorString += errors[i].message + ‘<br />’;

el.innerHTML = errorString;

Validate.js - Lightweight JavaScript form validation library

Sunday 17 August 2014

HTML Builder with jQuery & Bootstrap

Download Demo

HTML Builder is a nifty little Javascript application which allows end-users to easily compose custom HTML designs using pre-defined HTML elements. The HTML Builder script comes with several sample HTML elements (the ones as displayed in the live demo), however the script really shines when used with your own custom HTML elements!

Custom elements are easily added, and the process is explained in the detail in the provided documentation (also found online here).

HTML Builder features

build custom HTML pages using predefined HTML elements

create your own custom HTML elements with ease

integrates seamlessly with CSS frameworks (like Bootstrap, Foundation, etc)

create multiple pages in one session

edit CSS and links

export the created pages (incl CSS, Javascript and images)

basic editing of written content (only available for non IE browsers)

beautiful add-on for HTML template authors!

Setup HTML Builder with your own HTML template

HTML Builder makes it extremely easy to configure the script with your own HTML template, allowing users to easily create custom pages! It’s very easy to integrate your own HTML elements (simply create the element files and configure the elements.json file, more details are included in the documentation).

Besides adding your own HTML elements, you can also easily configure which elements are allowed to be edited (CSS) by the user and which CSS attributes are editable. You can even go as far as specifying values from which the user can choose for certain CSS attributes (for example, COLOR can be either: red, black or yellow). HTML Builder allows for total flexibility and control!

Requirements

web server with PHP enabled (the export function requires PHP)

browser to access the script

IDEAL FOR HTML TEMPLATE AUTHORS

Are you an author selling HTML templates are you looking to provide your customers with an easy way to customise your products after purchasing it? HTML Builder makes integration with HTML templates extremely easy and your customer will the fact they can easily create their own custom pages using your designs!

Themeforest authors who have purchased an extended license are allowed to bundle HTML Builder with their HTML templates!

Change log

Emergency patch 2014-08-13:
- issue with nested editable elements not being clickable

Emergency patch 2014-08-12:
- missing scroll inside the elements section on Chrome/Safari (OSX)
- escaped content when exporting (on older versions of PHP)

v1.2 - 2014-08-12
- implemented CSS editing and link editing

v1.1 - 2014-08-06
- improved export function; now exports entire site including CSS, JS and images

HTML Builder with jQuery & Bootstrap

jQuery Color Cycle Plugin

Download Demo

Color Cycle is a jQuery plugin that continuously fades the background color of selected element(s). Has options for setting colors as an array as well as animation time and loop time.

1. INCLUDE JS FILES

<!-- jQuery v1.8.3 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery UI v 1.8.23 -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- jQuery Color Cycle Plugin -->
<script src="color-cycle.min.js"></script>

2. HTML

<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>

3. JAVASCRIPT

 $(function()
 $('a').colorCycle();
);

4. OPTIONS

$('a').colorCycle(
 // colors as array on strings pass any valid CSS color value.
 colors: ['red', 'rgb(0,255,0)', '#0000ff'],

 // starting and end range for animation time in milliseconds.
 animationStartRange: 1000,
 animationEndRange: 2000,

 // starting and end range for loop time in milliseconds.
 loopStartRange: 1000,
 loopEndRange: 4000
);

jQuery Color Cycle Plugin

Saturday 16 August 2014

imgSlider : jQuery plugin for creating Image Comparison

Download Demo

A simple jquery plugin for creating image comparison sliders.

Getting started

Download the code from here

Unzip and include the files on your page

 <link rel="stylesheet" type="text/css" href="./css/imgslider.css">

 <script type="text/javascript" src="./js/imgslider.js"></script>

HTML decoration for your images goes like this

<div class="slider">

 <div class="left image">

 <img src="before.jpg"/>

 </div>

 <div class="right image">

 <img src="after.jpg"/>

 </div>

</div>

Include the following near the end of the page.

<script type="text/javascript">

 $('.slider').slider();

</script>

Known Issues

Touch events haven’t been added yet. It may not work as expected on tablets and phones

Files have not been minified

imgSlider : jQuery plugin for creating Image Comparison

Thursday 14 August 2014

Menuzord – jQuery CSS3 Responsive Megamenu

Download Demo

Menuzord is a responsive megamenu pack to help you to define a modern navigation for your website.

FEATURES

Fully Responsive

Menuzord is responsive and is ready for use in desktops, tablets and mobile devices.

16 Skins

Is included 16 skins for different behaviors of Menuzord. Each skin has his own visual behavior

Bootstrap compatible

Menuzord is compatible with the Bootstrap most recent versions

8 Color Schemes per Skin

For each color scheme Menuzord has 8 preset colors. 16 Skins x 8 Color Schemes = 128 visual variations

Dropdowns

You can use Menuzord like a dropdown menu, with diferent alignments

Megamenu

You can use Menuzord like a megamenu. Versatility is no problem.

Grid System

Do you need organize some content inside the menu? Ok, Menuzord provides a complete grid system to help you.

Cross browser

Support for all major browsers, including touchscreen devices and mobile devices

Right/Left alignment

The menu can be set Left-to-Right or Right-to-Left to adapt easily on your layout

Click or Hover

Menuzord supports “click” event or “hover” event to show submenus

Configurable delays

You can easily set the delay time and the time of appearance of submenus

Icons

Menuzord supports icons from Font-Awesome. There are over 440 icons available.

Vertical tabs

Menuzord provides preset vertical tabs to help you display the content in panels inside the megamenu

CSS animations

8 CSS3 animations are available to give some stunning effects to the menu

Fully customizable

Menuzord is easy to customize, including the skins and color schemes

Free updates

Updates, bug fixes and improvements without additional cost

Menuzord – jQuery CSS3 Responsive Megamenu

Crossfilter : Fast Multidimensional Filtering for Coordinated Views

Download Demo

Fast Multidimensional Filtering for Coordinated Views

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records; we built it to power analytics for Square Register, allowing merchants to slice and dice their payment history fluidly.

Since most interactions only involve a single dimension, and then only small adjustments are made to the filter values, incremental filtering and reducing is significantly faster than starting from scratch. Crossfilter uses sorted indexes (and a few bit-twiddling hacks) to make this possible, dramatically increasing the performance of live histograms and top-K lists. For more details on how Crossfilter works, see the API reference.

Example: Airline on-time performance

The coordinated visualizations below (built with D3) show nearly a quarter-million flights from early 2001: part of the ASA Data Expo dataset. The dataset is 5.3MB, so it might take a few seconds to download. Click and drag on any chart to filter by the associated dimension. The table beneath shows the eighty most recent flights that match the current filters; these are the details on demand, anecdotal evidence you can use to weigh different hypotheses.

Some questions to consider: How does time-of-day correlate with arrival delay? Are longer or shorterflights more likely to arrive early? What happened on January 12? How do flight patterns differ betweenweekends and weekdays, or mornings and nights? Fork this example and try your own data!

Crossfilter : Fast Multidimensional Filtering for Coordinated Views

Wednesday 13 August 2014

jQuery Sharp calendar pluggin

Download Demo

Sharp Calendar is a jQuery plugin that creates a modern, animated and highly customizable calendar widget on your website. it shows a Horizontal or vertical calendar.

1. INCLUDE CSS AND JS FILES

<link rel=stylesheet href="sharpCalendar/css/jquery.sharpCalendar.css" type="text/css" media="screen">		
<script type="text/javascript" src="others/jquery.js"></script>
<script type="text/javascript" src="sharpCalendar/script/jquery.sharpCalendar.js"></script>
<script type="text/javascript" src="others/jquery.mousewheel.js"></script>

2. HTML

<div id="dsel1"></div>
<div id="wtf"></div>

3. JAVASCRIPT

var selectedDates = [["09-07-2014", 2], ["11-07-2014"], ["01-07-2014"], ["07-07-2014", 2]];
var sc1 = $("#dsel1").SC(
	animate: true,
	useWheel: true,
	vertical: true,
	sizes: 'equal', 
	callbackDelay: 500,
	years: 1,
	months: 3,
	days: 5,
	invert: false,
	combineMonthYear: true,
	showDayArrows: false,
	showDayNames: true,
	monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
	dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
	doubleDigitsDays: true,
	allowSelectSpans: true,
	selectedDates: selectedDates,
	callback:function(cal) 
	 $("#wtf").html("Selected date: " + cal.currentDate + "<br>Clicked: " + cal.clicked);
	
);

jQuery Sharp calendar pluggin

ProgressJs - A themeable progress bar library for everything

Download Demo

ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for any object on the page. You can design your own template for progress bars or simply customize them.

You can use ProgressJs to show the progress of loading contents (images, videos, etc.) on the page to the users. It can be used on all elements including textboxes, textareas or even the whole body.

It’s light-weight, easy to use, customizable, free and open-source.

1. INCLUDE CSS AND JS FILES

<script src="progress.js"></script>
<link href="progressjs.css" rel="stylesheet">

2. HTML

<textarea id="countTextarea" placeholder="Start typing.." rows="4"></textarea>

3. JAVASCRIPT

//to set progress-bar for whole page
progressJs().start();
//or for specific element
var prgjs = progressJs("#countTextarea").setOptions( theme: 'blackRadiusInputs' ).start();
prgjs.set(50);

4. API

progressJs([targetElm])

Creating an ProgressJS object.

Available since: v0.1.0

Parameters:

targetElm : String (optional) Should be defined to start progress-bar for specific element, for example: #targetElement.

Returns:

progressJs object.

Example:

progressJs() //without selector, set progress-bar for whole page
progressJs("#targetElement") //start progress-bar for element id='targetElement'

progressJs.start()

Start the progress-bar for defined element(s).

Available since: v0.1.0

Returns:

progressJs object.

Example:

progressJs().start()

progressJs.set(percent)

Set specific percentage to progress-bar

Available since: v0.1.0

Parameters:

percent: Number

Set to specific percentage

Returns:

progressJs object.

Example:

progressJs().set(20); //set progress to 20%

progressJs.autoIncrease(size, millisecond)

Set an auto-increase timer for the progress-bar.

Available since: v0.1.0

Parameters:

size: Number

The size of increment when timer elapsed

millisecond: Number

Timer in milliseconds

Returns:

progressJs object.

Example:

progressJs().start().autoIncrease(4, 500); //every 500 milliseconds, percentage + 4

progressJs.increase([size])

Increase the progress-bar bar specified size. Default size is 1.

Available since: v0.1.0

Parameters:

size: Number

The size of increment

Returns:

progressJs object.

Example:

progressJs().increase(); //increase one percent
progressJs().increase(2); //increase two percent

progressJs.end()

End the progress-bar and remove the elements from page.

Available since: v0.1.0

Returns:

progressJs object.

Example:

progressJs().start().set(20).end()

progressJs.setOption(option, value)

Set a single option to progressJs object.

Available since: v0.1.0

Parameters:

option : String

Option key name.

value : String/Number

Value of the option.

Returns:

progressJs object.

Example:

progressJs().setOption("theme", "black");

progressJs.setOptions(options)

Set a group of options to the progressJs object.

Available since: v0.1.0

Parameters:

options : Object

Object that contains option keys with values.

Returns:

progressJs object.

Example:

progressJs().setOptions( 'theme': 'black', 'overlayMode': true );

progressJs.onbeforeend(providedCallback)

Set a callback function for before end of the progress-bar.

Available since: v0.1.0

Parameters:

providedCallback : Function

Returns:

progressJs object.

Example:

progressJs().onbeforeend(function() 
 alert("before end");
);

progressJs.onbeforestart(providedCallback)

Set a callback function to call before start the progress-bar.

Available since: v0.1.0

Parameters:

providedCallback : Function

Returns:

progressJs object.

Example:

progressJs().onbeforestart(function() 
 alert("before start");
);

progressJs.onprogress(providedCallback)

Set callback function to call for each change of progress-bar.

Available since: v0.1.0

Parameters:

providedCallback : Function

Returns:

progressJs object.

Example:

progressJs().onprogress(function(targetElm, percent) 
 alert("progress changed to:" + percent);
);

ProgressJs - A themeable progress bar library for everything

Tuesday 12 August 2014

Slider - A jQuery slide plugin

Download Demo

Slider is a jQuery slide plugin for creating a responsive & cross-browser image slider that supports full screen, multiple effects, navigation, autoplay, easing, change speed and trigger…

1. INCLUDE JS FILES

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/slider.js"></script>

2. HTML

<div class="slider">
 <div class="slider-content">
 <div><img src="img/picture-1.jpg" alt="Picture 1"></div>
 <div><img src="img/picture-2.jpg" alt="Picture 2"></div>
 <div><img src="img/picture-3.jpg" alt="Picture 3"></div>
 </div>
 <div class="slider-nav">
 <div class="slider-active"></div>
 <div></div>
 <div></div>
 </div>
 <div class="slider-prev slider-disabled">&lsaquo;</div>
 <div class="slider-next">&rsaquo;</div>
</div>

3. JAVASCRIPT

$(".slider").slider(
 activeClass: "slider-active",
 autoplay: true,
 contentClass: "slider-content",
 disableClass: "slider-disabled",
 duration: 5000,
 effect: "fade",
 easing: "swing",
 navClass: "slider-nav",
 nextClass: "slider-next",
 prevClass: "slider-prev",
 speed: 1000,
 trigger: "click"
);

Slider - A jQuery slide plugin

Collections - Drag and Drop jquery collection add-on

Download Demo

Collections is a Drag and Drop jquery collection add-on for ecommerce site.

1. INCLUDE CSS AND JS FILES

<link href="assets/css/ars_coolection.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="assets/js/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/js/vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/js/collection.js" type="text/javascript"></script>

2. HTML

<!--BEGIN COLLECTION DETAIL PAGE-->
<div class="ars_Collcontent">
 <div class="ars_Collbody">
 <div class="ars_CollMid">
 	<div class="ars_CollBanner">
 	<div class="ars_CollMainbox">
 	<div class="ars_Colldiv1" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item1.jpg" class="dragimg" alt="Image1" />
					</div>
 <div class="ars_Colldiv2" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item2.jpg" class="dragimg" alt="Image2" />
					</div>
 <div class="ars_Colldiv3" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item3.jpg" class="dragimg" alt="Image3" /> 
					</div>
 <div class="ars_Colldiv4" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item4.jpg" class="dragimg" alt="Image4" />
					</div>
 <div class="ars_Colldiv5" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item5.jpg" class="dragimg" alt="Image5" />
					</div>
					<div class="ars_Colldiv6" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item6.jpg" class="dragimg" alt="Image6" /> 
					</div>
 <div class="ars_Colldiv7" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item7.jpg" class="dragimg" alt="Image7" /> 
					</div>
 <div class="ars_Colldiv8" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src=" assets/images/collection_item8.jpg" class="dragimg" alt="Image8" />
					</div>
 <div class="ars_Colldiv9" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item9.jpg" class="dragimg" alt="Image9" /> 
					</div>
 <div class="ars_Colldiv10" id="img_div">
						<div class="ars_popClose"><a href="#">CLOSE</a></div>
						<img src="assets/images/collection_item10.jpg" class="dragimg" alt="Image10" /> 
					</div>
 </div>
 
 </div>

 <div class="ars_clr"></div>
 </div>
 </div>
</div>
<!--END COLLECTION DETAIL PAGE-->

Collections - Drag and Drop jquery collection add-on

Bootstrap Color Picker Sliders

Download Demo

Bootstrap Color Picker Sliders is a Bootstrap 3 optimized advanced responsive color selector with color swatches and support for human perceived lightness. Works in all modern browsers and on touch devices. Bootstrap 3 optimized responsive color selector with HSV, HSL, RGB and CIE-Lch selectors and color swatches.

1. INCLUDE CSS AND JS FILES

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" media="all">
<link href="src/bootstrap.colorpickersliders.css" rel="stylesheet" type="text/css" media="all">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tinycolor/0.11.1/tinycolor.min.js"></script>
<script src="src/bootstrap.colorpickersliders.js"></script>

2. HTML

<div id="hsvflat"></div>

3. JAVASCRIPT

 $("#hsvflat").ColorPickerSliders(
 color: "rgb(36, 170, 242)",
 flat: true,
 sliders: false,
 swatches: false,
 hsvpanel: true
);

Bootstrap Color Picker Sliders

Monday 11 August 2014

Fattable - Create scrollable table with infinite rows and columns

Download Demo

Fattable is a javascript Library to create table with infinite scroll, with infinite number of rows and number of columns.

Big table (more 10,000 cells) don’t do well with DOM. Your scroll will start getting choppy.

Also big tables can rapidly grow in sizes. It is not always possible to have clients download or even retain all of the table data. Fattable includes everything required to load your data asynchronously.

This library is

light : no library needed, smaller than 10KB)

fast (only visible element are in DOM, the exact same DOM element are recycled over and over, )

async friendly : the API makes it simple to fetch your data aysnchronously.

powerful and unbloated : Design is up to you. Style the table via css and use your painter to hook up events, and render your content in your cell.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href='fattable.css'>
<script src='fattable.js'></script>

2. HTML

<div id='container'></div>

3. JAVASCRIPT

var columnWidths = [
	150, 120, 600, 250,
];
for (var i=columnWidths.length; i<10000; i++) 
	var columnWidth = (Math.random() * 100 + 100) 

var painter = new fattable.Painter();
painter.fillCell = function(cellDiv, data) 
	cellDiv.textContent = data.content;
	if (data.rowId % 2 == 0) 
		cellDiv.className = "even";
	
	else 
		cellDiv.className = "odd";
	


painter.fillCellPending = function(cellDiv, data) 
	cellDiv.textContent = "";
	cellDiv.className = "pending";



var tableData = new fattable.SyncTableModel();

var c=0;

tableData.getCellSync = function(i,j) 
	return 
		"content": "Cell " + i + "," + j+"


tableData.columnHeaders = ["Country Name", "Country Code", "Indicator Name", "Indicator Code", "1960", "1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"];

tableData.getHeaderSync = function(j) 
	return "Column " + j;


var table = fattable(
 "container": "#container",
 "model": tableData,
 "nbRows": 40000,
 "rowHeight": 35,
 "headerHeight": 40,
 "painter": painter,
 "columnWidths": columnWidths
);


window.onclick = function() 
	c += 1;
	table.refreshAllContent(true);
;

window.onresize = function() 
	table.setup();

4. API

var table = fattable(
 "painter": painter, // your painter (see below)
 "model": model, // model describing your data (see below)
 "nbRows": 1000000, // overall number of rows
 "rowHeight": 35, // constant row height (px)
 "headerHeight": 100, // height of the header (px)
 "columnWidths": [300, 300, 300, 300] // array of column width (px) 
)

5. PAINTER

painter is an object which role is to fill the content of your cells, and columnHeaders. It is expected to implement the following interface.

var painter = 

 "setupHeader": function(headerDiv) 
 /* Setup method are called at the creation
 of the column header. That is during
 initialization and for all window resize
 event. Columns are recycled. */
 
,
 "setupCell": function(cellDiv) 
 /* The cell painter tells how 
 to fill, and style cells.
 Do not set height or width.
 in either fill and setup methods. */
 
,
 "fillHeader": function(headerDiv, data) 
 /* Fills and style a column div.
 Data is whatever the datalayer
 is returning. A String, or a more
 elaborate object. */
 colHeaderDiv.textContent = data;
 
,
 "fillCell": function(cellDiv, data) 
 /* Fills and style a cell div.
 Data is whatever the datalayer
 is returning. A String, or a more
 elaborate object. */
 cellDiv.textContent = data;
 
,
 "fillHeaderPending": function(headerDiv) 
 /* Mark a column header as pending.
 When using an asynchronous.
 Its content is not in cache
 and needs to be fetched */
 cellDiv.textContent = "NA";
 
,
 "fillCellPending": function(cellDiv) 
 /* Mark a cell content as pending
 Its content is not in cache and 
 needs to be fetched */
 cellDiv.textContent = "NA";
 
;

Actually this very simple implementation is the default. And it is available as fattable.Painter, so that you can just override it.

6. DATALAYER

Synchronous Data Layer

If your data is not too big, you probably can just fetch your data all at once, and then display the table. For this simple use case, the best is probably to extend the SyncTableData object.

You just need to extend fattable.SyncTableModel and implement the following methods


 "getCellSync": function(i,j) 
 return "cell " + i + "," + j;
 ,
 "getHeaderSync": function(i,j) 
 return "col " + j;

Asynchronous and paged async model

You probably don’t want your backend to receive one request per cell displayed. A good solution to this problem is to partition your table into pages of cells.

Queries are only sent when the user stops scrolling.

To use such a system, you just have to extend the PagedAsyncTableModelclass with the following methods. In addition, it include a simple LRU cache.


 "cellPageName": function(i,j) 0;
 var J = (j / 29) ,
 "fetchCellPage": function(pageName, cb) 
 // Async method to return the page of 
 var coords = JSON.parse(pageName);
 var I = coords[0];
 var J = coords[1];
 getJSON("data/page-" + I + "-" + J + ".json", function(data) 
 cb(function(i,j) 
 return 
 rowId: i,
 content: data[i-I*128][j-J*29]
 ;
 );
 );
 ,
 "headerCellPage" : function(j) 
 // Same as for cellPageName but for cells.
 ,
 "fetchHeaderPage" : function(j) 
 // Same as for fetchCellPage but for headers

Custom async model

If you want to go custom, you can implement your own data model, it just has to implement the following methods :


 hasCell: function(i,j) 
 // returns true if getting the data of the cell (i,j )
 // does not require an async call false if it does need it.
 ,
 hasHeader: function(j) 
 // ... same thing for column header j
 ,
 getCell: function(i,j,cb) 
 // fetch data associated to cell i,j 
 // and call the callback method cb with it
 // as argument
 ,
 getHeader: function(j,cb) 
 // ... same thing for column header j

Fattable - Create scrollable table with infinite rows and columns

Ads

Saturday 30 August 2014

What is it made for?

Friday 29 August 2014

Animsition

18 different animation class

Wednesday 27 August 2014

Monday 25 August 2014

Saturday 23 August 2014

Usage

HTML

JavaScript

Options

Actions

Events

Shortcuts

AJAX callback

Methods

Features

Thursday 21 August 2014

Main features

Browser support

Tuesday 19 August 2014

Sunday 17 August 2014

HTML Builder features

Setup HTML Builder with your own HTML template

Requirements

IDEAL FOR HTML TEMPLATE AUTHORS

Themeforest authors who have purchased an extended license are allowed to bundle HTML Builder with their HTML templates!

Change log

Saturday 16 August 2014

Getting started

Thursday 14 August 2014

FEATURES

Fast Multidimensional Filtering for Coordinated Views

Example: Airline on-time performance

Wednesday 13 August 2014

Tuesday 12 August 2014

Monday 11 August 2014