Friday 29 August 2014

Rome : Customizable Date & Time Picker

Customizable date (and time) picker. Opt-in UI, no jQuery!.Rome synchronizes in real-time with inputs, never steals focus, and its CSS is entirely customizable!

Oh, rome synchronizes in real-time with inputs, never steals focus, and its CSS is entirely customizable!

_{Rome depends on moment. It doesn’t depend on jQuery or other weird frameworks, though.}

Install

From npm or Bower.

npm install --save rome

bower install --save rome

Note that if you’re using the standalone version, the API is published under the rome global. If you’re using CJS, then you’ll have to require('rome').

Setup

You can use your own distribution of moment, using rome.standalone.js.

<script src='moment.js'></script>
<script src='rome.standalone.js'></script>

You could just use the bundled rome.js distribution, which comes with moment in it.

<script src='rome.js'></script>

If you need to do anything regarding internationalization, refer to moment for that. Ideally, make those changes before starting to create Rome calendar components.

Rome : Customizable Date & Time Picker

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

Sweep.js - Smoother color transitions

Download Demo

Sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces. Ordinary CSS transitions or existing frameworks like Velocity.js convert HSL colors to RGB beforetransitioning. sweep.js addresses this by letting you transition through the color spectrum.

1. INCLUDE JS FILES

<script src="path/to/sweep.js"></script>

2. HTML

<div id="ex1" class="example"><p>Click</p></div>

3. JAVASCRIPT

//click
var ex1 = document.querySelector('#ex1');
ex1.addEventListener('click', function() 
 sweep(ex1, 'backgroundColor', '#a8f', '#a8f', direction: -1, duration: 2000);
, false);

4. OPTIONS

Using sweep.js to transition an element’s color is easy. Whenever you want to trigger an HSL sweep, call:

sweep(target, properties, fromColor, toColor[, options])

target : element that you wish to animate

properties : CSS properties that you wish to animate (string or array of strings)

fromColor : initial color before the transition

toColor : final color after the transition

options (optional) : an object that can set the following:
- callback : function to be called once the animation finishes
- direction : clockwise (1) or counterclockwise (-1)
- duration : time (in ms) to complete the animation
- space : ‘HSL’, ‘HUSL’, or ‘RGB’

Sweep.js - Smoother color transitions

Thursday 28 August 2014

jQuery Tbl Tree - Making hierarchical tree from HTML tables

Download Demo

Demos

Tree on second column

Large Table with 2800 rows

Level Pickers

Tbl Tree is a jQuery plugin making hierarchical tree from HTML tables.

Features

Create Tree table from HTML table

Comparibaly fast on big tables

Ability to specify column to make a tree

Compatible with jquery-ui $.widget

Ability to save the state of the tree

Ability to expand/collapse by level of hierarchy

1. INCLUDE CSS AND JS FILES

<link type="text/css" href="css/jquery.tbltree.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/jquery.tbltree.js"></script>

If you want to use saveState: option, then need to include $.coocke plugin as well:

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

2. HTML

Create HTML Table by adding ‘row-id’ and ‘parent-id’ attributes to “tr” tags. Attributes names can be configured by options `rowAttr` and `parrentAttr`.

<table id="table1">
 <tr>
 <th>Title</th><th>Column 1</th><th>Column 2</th><th>Column 3</th>
 </tr>
 <tr row-id="1">
 <td>Level 1</td><td class="data">2</td><td class="data">2</td><td class="data">2</td>
 </tr>
 <tr row-id="1.1" parent-id="1" >
 <td>Level 1.1</td><td class="data">2</td><td class="data">2</td><td class="data">2</td>
 </tr>
 <tr row-id="2">
 <td>Level 2</td><td class="data">2</td><td class="data">2</td><td class="data">2</td>
 </tr>
 <tr row-id="2.1" parent-id="2" >
 <td>Level 2.1</td><td class="data">2</td><td class="data">2</td><td class="data">2</td>
 </tr>
</table>

3. JAVASCRIPT

$(function() 
 // initialize with default options
 $( "#table1" ).tbltree();
);

jQuery Tbl Tree - Making hierarchical tree from HTML tables

Wednesday 27 August 2014

Jeegoo - Flexible lightweight popup plugin

Download Demo

Demos

Configure popup

Confirm dialog

Database applications

Tooltip

Image popup

1. INCLUDE CSS AND JS FILES

<link href="/jeegoopopup/skins/blue/style.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/jeegoopopup/jquery.jeegoopopup.1.0.0.min.js"></script>

2. HTML

<a href="dog.jpg" class="popup"><img src="dog.jpg" style="width:100px"/></a>

3. JAVASCRIPT

$(function()
	$('a.popup').click(function(e)
		$.jeegoopopup.open(
			html: '<img src="' + $(this).attr('href') + '" />', 
			skinClass: 'jg_popup_basic', 
			resizable: false,
			draggable: true,
			fixed: false
		);

		$('#jg_popup_content').unbind('click.close').bind('click.close', function()
			$.jeegoopopup.close();
		);
		return false;
	);
);

Open a popup by calling

$.jeegoopopup.open(options);

where options is an object which can be configured with properties and callbacks.

Close a popup by calling

$.jeegoopopup.close(arguments);

Arguments passed to the close method are passed to the onClose callback of the topmost popup.

A (new) popup can be opened or closed from within (same domain) iframes by callingwindow.parent.$.jeegoopopup.open(options); or window.parent.$.jeegoopopup.close(arguments);

Jeegoo - Flexible lightweight popup plugin

jQuery Multiselect - Converts all multiselect fields into checkboxes

Download Demo

jQuery Multiselect is a jQuery plugin which converts all multiselect fields into checkboxes

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/jquery.multiselect.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.multiselect.js"></script>

2. HTML

<select name="users_list" id="users_list" multiple="multiple" size="15">
 <optgroup label="General Techniques">
	<option value="G1">G1: Adding a link at the top of each page ... </option>
	<option value="G4">G4: Allowing the content to be paused and restarted ... </option>
	<option value="G5">G5: Allowing users to complete an activity without any time... </option>
	<option value="G8">G8: Creating an extended audio description for the ... </option>
	<option value="G9">G9: Creating captions for live synchronized media... </option>
	<option value="G10">G10: Creating components using a technology that ... </option>
 </optgroup>
 <optgroup label="HTML Techniques">
	<option value="H2">H2: Combining adjacent image and text links for the same ... </option>
	<option value="H4">H4: Creating a logical tab order through links, form ... </option>
	<option value="H24">H24: Providing text alternatives for the area ... </option>
 </optgroup>
 <optgroup label="CSS Techniques">
	<option value="C6">C6: Positioning content based on structural markup... </option>
	<option value="C7">C7: Using CSS to hide a portion of the link text... </option>
 </optgroup>
 <optgroup label="SMIL Techniques">
	<option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
	<option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
	<option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
 </optgroup>
 <optgroup label="ARIA Techniques">
	<option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
	<option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
	<option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
 </optgroup>
 <optgroup label="Common Failures">
	<option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
	<option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
	<option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images ... </option>
	<option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
 </optgroup>
</select>

3. JAVASCRIPT

$(function()
 $users_list = $('#users_list');
 $users_list.multiselect(
 listWidth: 400
 );
);

jQuery Multiselect - Converts all multiselect fields into checkboxes

Swipe-li - Three Pane Swipeable Element

Download Demo

Swipe-li is a three pane swipeable element. Swipe right for accept. Swipe left for reject. (AngularJS directive)

Dependencies

jQuery

AngularJS

Angular-touch

Hammerjs

Modernizr

1. INCLUDE CSS AND JS FILES

 <link rel="stylesheet" href="swipe-li/swipe-li.css">

<!-- Dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.min.js"></script>
<!-- endDependencies -->

<!-- Scripts -->
<script src="swipe-li/swipe-li.min.js"></script>

2. HTML

<div ng-repeat="item in list">
	<div
	 swipe-li
	 class="item"
	 disabled=""
	 intent="true"
	 accept="done(item)"
	 reject="skip(item)"
	 main-content="'sample-content.html'"
	 accept-content="'accept-content.html'"
	 reject-content="'reject-content.html'"
	 reset-to-content="false"
	 ng-class="invert: item.doInvert"
	></div>
 </div>

The Directive

disabled: disable the swipe-li element.

intent: user Intent Detection. If the user drags the pane > 50% of the width the swipe will auto complete.

accept: accept callback.

reject: reject callback.

main-content: template for the start pane.

accept-content: template for the accept pane.

reject-content: template for the reject pane.

reset-to-content: should the swiped pane reset back to start pane on complete

Content of sample-content.html file

<div class="main-content">item.name</div>

Content of accept-content.html file

<div class="icon-ok"></div>

Content of reject-content.html file

<div class="icon-cancel"></div>

3. JAVASCRIPT

You then need to declare a dependency on the swipeLi module: angular.module(‘myApp’, ['swipeLi']);

'use strict';

angular.module('swipeLiDemo', [
	'swipeLi'
])
.controller('MainCtrl', ['$scope', function ($scope) 

	$scope.list = [
	
	 name: 'Spectacles',
	 doInvert: false
	,
	
	 name: 'Giraffe',
	 doInvert: false
	,
	
	 name: 'Turtle',
	 doInvert: false
	,
	
	 name: 'Shark',
	 doInvert: false
	,
	
	 name: 'Lamp',
	 doInvert: false
	,
	
	 name: 'Chocolate',
	 doInvert: false
	,
	
	 name: 'Beef',
	 doInvert: false
	,
	
	 name: 'Drawer',
	 doInvert: false
	,
	
	 name: 'Brocolli',
	 doInvert: false
	,
	
	 name: 'Tomato',
	 doInvert: false
	,
	
	 name: 'Plate',
	 doInvert: false
	,
	
	 name: 'Zebra',
	 doInvert: false
	];

	$scope.doInvert = false;

	$scope.done = function (item) 
	 console.log('%s marked as accepted!', item);
	 item.doInvert = true;
	;

	$scope.skip = function (item) 
	 console.log('%s marked as rejected!', item);
	 item.doInvert = true;
	;

]);

Swipe-li - Three Pane Swipeable Element

Monday 25 August 2014

Bootstrap Validator - Best jQuery plugin to validate form fields

Download Demo

Demos

Basic

Adjusting feedback icon position

Set validator options via HTML 5 attributes

Play with HTML 5 input types and attributes

Validate a form placed inside a Bootstrap modal

Use multiple elements with the same name

Toggle field

Advance

Adding dynamic field

Using Ajax to submit the form

Changing default behaviour

Complex form

Enable/disable validator

Overriding default options

Showing messages in custom area

Showing required icon for the mandatory fields

Showing valid message

Bootstrap Validator is a best jQuery plugin to validate form fields. Designed to use with Bootstrap 3

Code

Written from scratch

Very solid and clean

Core and validators code are separated

JSHint free

HTML 5

Fully support declarative settings

Support HTML 5 attributes

Support HTML 5 input types

Validators

Provide 48 built-in validators and counting!

Easy to write a new validator

Internationalization

Friendly

Show feedback icons based on field validity

Focus on the first invalid field

Don’t validate until given length

Possible to show errors as tooltip/popover

Flexible

Define field by name or CSS selector

Possible to indicate excluded fields

Enable/disable validators on the fly

Support dynamic option

Support dynamic fields

Support dynamic messages

Compatibility

Bootstrap Multiselect

Chosen

Color Picker, Date Picker

iCheck

Select2

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>

<!-- Either use the compressed version (recommended in the production site) -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>

If you want to use the default message translated in the language package, then finally include it:

<script type="text/javascript" src="/path/to/src/js/language/languagecode_COUNTRYCODE.js"></script>

2. HTML

<form>
 <div class="form-group">
 <label>Username</label>
 <input type="text" class="form-control" name="username" />
 </div>
 <div class="form-group">
 <label>Email address</label>
 <input type="text" class="form-control" name="email" />
 </div>
</form>

3. JAVASCRIPT

$(document).ready(function() 
 $('form').bootstrapValidator(
 message: 'This value is not valid',
 feedbackIcons: 
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 ,
 fields: 
 username: 
 message: 'The username is not valid',
 validators: 
 notEmpty: 
 message: 'The username is required and cannot be empty'
 ,
 stringLength: 
 min: 6,
 max: 30,
 message: 'The username must be more than 6 and less than 30 characters long'
 ,
 regexp: 
 regexp: /^[a-zA-Z0-9_]+$/,
 message: 'The username can only consist of alphabetical, number and underscore'
 
 
 ,
 email: 
 validators: 
 notEmpty: 
 message: 'The email is required and cannot be empty'
 ,
 emailAddress: 
 message: 'The input is not a valid email address'
 
 
 
 
 );
);

Bootstrap Validator - Best jQuery plugin to validate form fields

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

Friday 22 August 2014

Title.js - Browser Title Bar Manipulation

Download Demo

Title.js – Browser Title Bar Manipulation JavaScript Library With No Dependency.

1. INCLUDE JS FILES

2. JAVASCRIPT

Add Prefix

Add Suffix

Change Predefined Title

Animation: Marquee Effect

Animation: TypeWriter Effect

Title.js - Browser Title Bar Manipulation

Thursday 21 August 2014

jQuery.qrcode - Dynamically generate QR codes

Download Demo

jQuery.qrcode enables you to dynamically add QR codes to your website. Choose between rendering the code in a canvas or with divs. The latter will be fine even for older browser. The generated QR code will be in the least possible version requiered to encode the content (least number of blocks).

1. INCLUDE JS FILES

2. HTML

3. JAVASCRIPT

$(‘.selector’).qrcode(

“width”: 100,

“height”: 100,

“color”: “#3a3″,

“text”: “http://js-tutorial.com”

);

4. OPTIONS

The available options and their default values are:

// render method: ‘canvas’, ‘image’ or ‘div’

render: ‘canvas’,

// version range somewhere in 1 .. 40

minVersion: 1,

maxVersion: 40,

// error correction level: ‘L’, ‘M’, ‘Q’ or ‘H’

ecLevel: ‘L’,

// offset in pixel if drawn onto existing canvas

left: 0,

top: 0,

// size in pixel

size: 200,

// code color or image element

fill: ‘#000′,

// background color or image element, null for transparent background

background: null,

// content

text: ‘no text’,

// corner radius relative to module width: 0.0 .. 0.5

radius: 0,

// quiet zone in modules

quiet: 0,

// modes

// 0: normal

// 1: label strip

// 2: label box

// 3: image strip

// 4: image box

mode: 0,

mSize: 0.1,

mPosX: 0.5,

mPosY: 0.5,

label: ‘no label’,

fontname: ‘sans’,

fontcolor: ‘#000′,

image: null

jQuery.qrcode - Dynamically generate QR codes

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, (?=\[\])/gi,

named: /^[a-z0-9_-]+$/i

);

$.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

Sunday 17 August 2014

Full-Screen Pop-Out Navigation with jQuery & CSS3

Download Demo

It’s becoming a common approach to hide the navigation, make it accessible after a click on the menu link. “One click more than necessary” some of you may argue. It really depends by the specific case IMO. I mean Amazon could never hide the entire navigation on a big device. But if you have a website with a relatively modest quantity of content, a huge menu with few important call-to-action buttons, it makes sense to drive the user’s attention to those buttons first, then let her/him explore the rest.

One step further is to make the header – therefore the menu link – always accessible. We already suggested a new approach to achieve that. Today we take inspiration from how Medium reveals the header when you change your scrolling direction – from down to up. Quite smart!

Full-Screen Pop-Out Navigation with jQuery & CSS3

Notification center for jQuery

Download Demo

Notification center is a jquery plugin that implements a simple notification center like like Apple OS X.

FEATURES

Document title modification to show alert count

Display only a certain amount of notifs at once

Sound notification if the user is on an other tab/page

Per type Sounds/Colors/alert timeout and notif count displayed

Pop up alerts that are not retained in the notif pane

Click overlay when the pane is open so any click closes the pane

Notif callbacks, including a redisplay notification option

Export callback so you can save the list of current notifs

Mobile compat, includes options for swipe delete on notifs

Mobile on notifications stay in viewport even with pinch zoom

CSS Styled allows lots of styling control to the site

Allow ajax and/or faye alerts on top of js calls to create alerts

Allow Sticky notifications, sticky notifications also have an optional settable action button

1. INCLUDE CSS AND JS FILES

<link href="css/notifcenter.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.notificationcenter.js"></script>

Want to display the date for each notification?
Include Moment.js and Livestamp.js and ENJOY

Want mobile support with swipe delete? Try it on a mobile device, swipe left on a notif in the notification panel to delete it.
Include jquery.mobile.js and ENJOY :) (jquery.mobile.css not required)

2. HTML

<body>
	<div id="noticationcentermain">
		[...]all your html[...]
	</div>
</body>

3. JAVASCRIPT

$('body').notificationcenter(
	center_element: "#notificationcenterpanel",
	body_element: "#noticationcentermain",
	toggle_button: "#notificationcentericon",
	add_panel: true,
	notification_offset: 0,
	display_time: 5000,
	types: [],
	type_max_display: 5,
	truncate_message: 0,
	header_output: 'icon type count',
	counter: true,
	default_notifs: [],
	faye: false,
	ajax: false,
	ajax_checkTime: 5000,
	alert_hidden: true,
	alert_hidden_sound: "sounds/Funk",
	store_callback: false
);

Notification center for jQuery

Friday 15 August 2014

Continuous calendar - Date picker and range selector

Download Demo

Continuous calendar is a jQuery plugin that allows Date picker and range selector with scrollable months instead of paged.

Features

Date dragging

No pagination, continuous month flow

Range shifting by dragging

Range expand with Shift + Mouse click

Display current date

Allow disabling of dates

Month select

Week select

Popup support (with current day in calndar icon)

Support for different date formats

Support for specifying holidays or disabled days

Support for setting minimum range

AMD Support

Supported languages

English

Estonian

Finnish

Latvian

Russian

Swedish

Supported browsers

IE7 ->

FireFox

Chrome

Opera

Safari

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.css" />
<!-- required JavaScript files -->
<script type="text/javascript" 	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" 	src="http://reaktor.github.com/jquery-continuous-calendar/build/jquery.continuousCalendar-latest.js"></script>

2. HTML

<!-- range selection is attached to fields with class startDate and endDate -->
<div id="dateRange1">
 <input type="hidden" class="startDate" name="range_start">
 <input type="hidden" class="endDate" name="range_end">
</div>

3. JAVASCRIPT

$("#dateRange1").continuousCalendar();

Continuous calendar - Date picker and range selector

Thursday 14 August 2014

Fly! 3D – Attractive jQuery Effect

Download Demo

Fly! 3D is an attractive jQuery Effect.By using this plugin your whole screen is fill with fly objects.

Main Features

Web GL/Canvas

Auto switch

3D Effact

Any image

Any amount

Any speed

Live Camera

Easy integration

Responsive & touch

Fly! 3D – Attractive jQuery Effect

Waves : Click effect Inspired by Google’s Material Design

Download Demo

Waves is a Click effect inspired by Google’s material design.

Getting Started

It’s easy to use Waves. Download the latest version of Waves from Github repository. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use!

<!DOCTYPE html>
<html>
 <head>
 <title>Waves example</title>

 <link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />

 </head>
 <body>
 <a href="#" class="waves-effect waves-button">Click Here</a>

 <script type="text/javascript" src="/path/to/waves.min.js"></script>
 <script type="text/javascript">
 Waves.displayEffect();
 </script>
 </body>
</html>

Advanced:

Waves also provide LESS, SCSS, and SASS source. So, feel free to used it

To put Waves effect on your buttons, just add .waves-effect and .waves-buttonclass to your buttons.

<button class="waves-effect waves-button">Click Here</button>

<!-- It also support a, input submit and input button tag -->
<a href="#" class="waves-effect waves-button">A Tag</a>
<input type="submit" class="waves-effect waves-button" value="Input Submit">
<input type="button" class="waves-effect waves-button" value="Input Button">

Normally, the effect will not work on single tag element like <input>. That’s why Waves will wrap <input> inside <i> automatically if you display the effect.

<!-- Before displaying the effect -->
<input class="waves-button-input" type="submit" value="Button C">

<!-- After displaying the effect -->
<i class="waves-effect waves-button waves-input-wrapper" style="width:85px;height:36px;">
 <input class="waves-button-input" type="submit" value="Button C">
</i>

Waves can also be applied with icons (like FontAwesome) by using waves-circle, so you can give the icons Waves effect. It’s simple, just give additional.waves-effect and .waves-circle class to your <i> tags and Waves will wrap icon inside circle spot that will prevent Waves effect spreading.

<i class="fa fa-gear waves-effect waves-circle"></i>

You can also give Waves effect to other element tag like <div> or <img>. All you need to do is just put .waves-effect class. For element that not have closing tag like <img>, you have to wrap it inside <span>, and for element that have blocky display like <div>, you need to put .waves-block class to keep its shape.

<!-- For single tag element -->
<span class="waves-effect">
 <img src="/path/to/images.jpg">
</span>

<!-- For blocky display to keep its shape -->
<div class="waves-effect waves-block">
 Block A
</div>

Waves : Click effect Inspired by Google’s Material Design

3dbook : 3D Book Created with jQuery & CSS3

Download Demo

This is 3d book created all by myself. All book is made by HTML5, CSS3 transitions and bit of javascript / jQuery code.

3dbook : 3D Book Created with jQuery & CSS3

Wednesday 13 August 2014

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

Ads

Friday 29 August 2014

Thursday 28 August 2014

Features

Wednesday 27 August 2014

Monday 25 August 2014

Basic

Advance

Saturday 23 August 2014

Usage

HTML

JavaScript

Options

Actions

Events

Shortcuts

AJAX callback

Methods

Friday 22 August 2014

Thursday 21 August 2014

Sunday 17 August 2014

FEATURES

Friday 15 August 2014

Features

Thursday 14 August 2014

Getting Started

Wednesday 13 August 2014