Saturday 27 September 2014

Parallax Slider – Responsive Parallax Slider

This Jquery Plugin Parallax Slider for 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.

Detects single and multiple finger swipes, pinches and falls back to mouse ‘drags’ on the desktop.

Time and distance thresholds can be set to destinguish between swipe gesture and slow drag.

Allows exclusion of child elements (interactive elements) as well allowing page scrolling or page zooming depending on configuration.

More Demos

Parallax Slider – Responsive Parallax Slider

Wednesday 24 September 2014

jQuery sticky elements

Download Demo

This jquery plugin sticky elements for create sticky elements. It keeps your div at position you want and create rules for it to stay & hide.

1. INCLUDE JS FILES

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

2. HTML

<div class="grid" id="grid1" style="background: rgb(169, 199, 238);color: black;border: black 1px solid;">
	<img src="icons/external-link.png" class="icon">
	This is a demo grid - I, position not fixed
</div>

3. JAVASCRIPT

$("#grid5").stikify(rate: 3.4, cieling: -100);

jQuery sticky elements

Tuesday 23 September 2014

navigation scroll effect with jQuery

Download Demo

This jquery tutorial ScrollNaviJs for fix navigation on top after scroll second section content, actually navigation fix in bottom of browser when we are in first section content

How to use

1)Include jquery plugin and ScrollNaviJs

2)call scrollnavi function with navigation ID

<script src="js/jquery.js"></script>
<script src="js/scroll_navi.js"></script>
<script>
 $(document).ready(function()
 $("#nav").scroll_navi();
 );
</script>

3)put html code in body tag like below:

<div id="nav">
 <div class="container">
 <ul>
 <li><a href="#section1">Section1</a></li>
 <li><a href="#section2">Section2</a></li>
 <li><a href="#section3">Section3</a></li>
 <li><a href="https://github.com/senthilraj/ScrollNaviJs#about-me" data-outerpage="true">About Developer</a></li>
 </ul>
 </div>
</div>
 <div id="section1">Section1</div>
 <div id="section2">Section2</div>
 <div id="section3">Section3</div>

4)also put css fiel

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

Options

if you want to set scroll speed, then call method like below:

$("#nav").scroll_navi(speed:1500);

if you want to set link for another page, use data-outerpage attribute and put as ‘true’ like below:

 <a href="https://github.com/senthilraj/ScrollNaviJs#about-me" data-outerpage="true">About Developer</a>

navigation scroll effect with jQuery

Timepicki - free Time picker jquery plugin

Download Demo

This is jquery plugin for Time picker it is simple and clean timepicker so user can understand to set time for your project in input forms.

Reason to make : I have tried to search set timepicker for one of the form page, this type of timepicker only on boostrap framework as bootsstrap-timepicker, but if we use that plugin then also need to use bootstrap css and js, so that will conflict our own code css and some time make js conflict issue, that why i make it simple, so you can use easily with jquery library 1.x and 2.x too, if you find any issue or need any additional features in this plugin , kindly reach me on my mail(I mentioned on bottom of the page)

1. INCLUDE CSS AND JS FILES

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

2. HTML

<input type="text" name="timepicker" class="time_element"/>

3. JAVASCRIPT

$(document).ready(function()
 $(".time_element").js/timepicki();
);

Timepicki - free Time picker jquery plugin

FormulaJS - Microsoft Excel formula functions

Download Demo

FormulaJS is a javaScript implementation of all functions supported by Microsoft Excel and Google Spreadsheets.

Formula.js is freely distributable under the terms of the MIT license.

1. INCLUDE JS FILE

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

2. JAVASCRIPT

AT(['a', 'b', 'c', 'd', 'e'], [0, 2, 4]);
DATE(2008, 7, 8);
BIN2DEC(101010);

FormulaJS - Microsoft Excel formula functions

Thursday 18 September 2014

JVFloat.js - Floating placeholder text

Download Demo

JVFloat.js is a easy yet user-friendly jQuery plugin for creating a Floating Label Text effect using HTML5 and CSS3, which is inspirit by Matt D. Smith’s Mobile Form interplay.

1. INCLUDE CSS AND JS FILES

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

2. HTML

<input type="text" placeholder="test" class="testBox">
<input type="email" placeholder="email" class="testBox">
<input type="text" placeholder="Username">
<input type="text" placeholder="Required" required>
<input type="text" placeholder="Has ID" id="testid">
<textarea placeholder="Textarea!"></textarea>
<textarea placeholder="Textarea with id!" id="textarea"></textarea>

3. JAVASCRIPT

$('input, textarea').jvFloat();

CSS DOCUMENT

.jvFloat

this section complete styling on the div.jvFloat wrapper nearly the input generated by the script.

Rules that you mustn’t remove: position: relative;

.jvFloat .placeHolder

this section complete styling on the span.placeHolder element inboard div.jvFloat, where the copy ofinput placeholder text was stored. it’s disappeared by default.

Rules that you mustn’t remove: position: absolute;, display: none;, visibility: hidden;,opacity: 0;

.jvFloat .placeHolder.required

the styling of the required placeholder. The default color is easy red.

.jvFloat .placeHolder.active

the active state of the after mentioned section. its job are to show the hidden span.placeHolder when users is typing on the input.

Rules that you mustn’t remove: display: block;, visibility: visible;, opacity: 1

ANOTHER NOTES ON CSS

JVFloat uses CSS3 Transform and Transitions to perform the animations by default. Browsers that doesn’t support those will easy doesn’t display anything when user typing on the input elements. to fix that, enable/uncomment the legacy rules on the default CSS file, and comment out the CSS3 rules.

JVFloat.js - Floating placeholder text

Wednesday 17 September 2014

Leader.js - Inline form jQuery plugin

Download Demo

Leader.js is a comprehension to enable the user to fill a form as fast and simply as possible on mobile.

Filling forms on mobiles can be overcome, with constant scrolling, tapping and opening/ re-opening of the keyboard. Leader.js illuminate the process with a shakeup of the process.

The keyboard will stay open while moving onto the next input.

The user will automatically be moved onto the next input after competition.

The user can edit previous inputs by pressing the backspace.

The layout is also designed to use space more adroitly, letting the developer fit the form into tight spaces.

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/jquery.leader.js"></script>

2. HTML

<div class="leader"></div>

3. JAVASCRIPT

$(document).ready(function()
 $('.leader').leader(
 inputs: [
 label: 'Username', type: 'text',
 label: 'Email', type: 'text',
 label: 'Password', type: 'password',
 label: 'Repeat', type: 'password'
 ],
 onSave: function(output)
 console.log(output);
 
 );
);

Leader.js - Inline form jQuery plugin

Monday 15 September 2014

smSlider - Simple JQuery slider plugin

Download Demo

smSlider is a lightweight and flexible jQuery image slideshow plugin that features transition/easing animations, auto play, thumbnails, dots/arrows navigation and much more.

1. INCLUDE CSS AND JS FILES

<link type="text/css" rel="stylesheet" href="smslider/css/smslider.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="smslider/jquery.smslider.min.js"></script>

2. HTML

<div id="sm_slider">
 <ul>
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
</div>

3. JAVASCRIPT

$(document).ready(function()
	$('#sm_slider').smSlider()
);

4. OPTIONS

namespace string

 // name of prefix:
 $elem.smSlider( 
 namespace : 'sm' 
 );

start number

 // start with element:
 $elem.smSlider( 
 start : 0 
 );

transition string

 // animation type
 $elem.smSlider(
 // can be 'animate' or 'fader'
 transition : 'animate' 
 );

activeClass string

 // now showing element class
 $elem.smSlider(
 activeClass : 'active'
 );

autoArr boolean

 // auto generating control buttons
 $elem.smSlider(
 autoArr : true
 );

prev string

 // class of prevent control button
 $elem.smSlider(
 prev : 'sm_prev'
 );

next string

 // class of next control button
 $elem.smSlider(
 next : 'sm_next'
 );

pagination boolean

 // turn on pagination buttons
 $elem.smSlider(
 pagination : true
 );

typeCtrl string

 // style of pagination buttons
 $elem.smSlider(
 // can be 'dots' or 'numeric'
 typeCtrl : 'dots'
 );

subMenu boolean

 // turn on additional controls
 $elem.smSlider(
 subMenu : false
 );

subMenuClass string

 // css class for additional controls
 $elem.smSlider(
 subMenuClass : 'sm_submenu-item'
 );

autoPlay boolean

 // auto change current slide
 $elem.smSlider(
 autoPlay : true
 );

duration number

 // auto change animation speed
 $elem.smSlider(
 duration : 600
 );

delay number

 // auto change timeout in milliseconds
 $elem.smSlider(
 delay : 5000
 );

hoverPause boolean

 // turn on or turn off auto animation pause on hover
 $elem.smSlider(
 hoverPause : false
 );

easing string

 // animation easing
 $elem.smSlider(
 // can be 'swing' or 'linear'
 easing : 'swing'
 );

flexible boolean

 // width in persents
 $elem.smSlider(
 flexible : true
 );

animationStart function

 // callback function, called with start animation
 $elem.smSlider(
 animationStart : function() 
 //do something...
 
 );

animationComplete function

 // callback function, called with complete animation
 $elem.smSlider(
 animationComplete : function() 
 //do something...
 
 );

smSlider - Simple JQuery slider plugin

jQuery Guillotine Plugin

Download Demo

Guillotine is a jQuery plugin that allows to drag, zoom or rotate an image to select a cropping area. Like selecting the display area of a profile picture or avatar.

Responsive: The window (or selection area) is fully responsive (fluid).

Touch support: Dragging the image also works on touch devices.

Support

Dragging support for both mouse and touch devices (works on IE8).

Rotation is achieved using CSS3 ‘transform’ property, so it doesn’t work on IE8, but it’s automatically disabled on devices that don’t support it. In such case rotateLeft and rotateRightwon’t perform any action but will still trigger the event and/or callback to let you know the user is trying and allow you to handle it appropriately.

Zoom, Fit and Center are handled with absolute positioning, they work on IE8.

1. INCLUDE CSS AND JS FILES

<link href='../css/jquery.guillotine.css' media='all' rel='stylesheet'>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='../js/jquery.guillotine.js'></script>

2. HTML

Set the width of the parent element:

<div id="theparent" style="width: 80%;">
 <img id="thepicture" src="url/to/image">
</div>

The window (“the guillotine”) that will wrap around the image when the plugin is instantiated is fully responsive (fluid) so it will always take all the width left by its parent.

3. JAVASCRIPT

var picture = $('#thepicture'); // Must be already loaded or cached!
picture.guillotine(width: 400, height: 300);

Here we set the dimensions we want for the cropped image (400×300), which are totally independent of the size in which the “guillotine” or “window” is actually displayed on screen.

Even though it’s responsive, the data returned always corresponds to the predefined dimensions. In this case, it will always get a cropped image of 400 by 300 pixels.

Notice: Make sure that the target element is ready before instantiating!

If it’s an image, make sure that it is already loaded or cached before calling Guillotine, so it can get its dimensions and display it properly. You can use the onload event, the complete property or check that the image has a width greater than zero to determine if it’s loaded.

4. ADVANCED

Bind actions:

$('#rotate-left-button').click(function()
 picture.guillotine('rotateLeft');
);

$('#zoom-in-button').click(function()
 picture.guillotine('zoomIn');
);

...

Handle cropping instructions:

The plugin is not meant to actually crop images but to generate the necessary instructions to do so on the server.

You can get the instructions at any point by calling ‘getData':
```
data = picture.guillotine('getData');
// scale: 1.4, angle: 270, x: 10, y: 20, w: 400, h: 300 
```
Important: You should rotate and scale first, and then apply the cropping coordinates to get it right!

Or you can use a callback or a custom event to listen for changes:

var otherPicture = $('#other-picture');
otherPicture.guillotine(eventOnChange: 'guillotinechange');
otherPicture.on('guillotinechange', function(ev, data, action)
 // this = current element
 // ev = event object
 // data = scale: 1.4, angle: 270, x: 10, y: 20, w: 400, h: 300 
 // action = drag/rot')eLeft/rotateRight/center/fit/zoomIn/zoomOut
 // Save data on hidden inputs...
);

Set the ‘onChange’ option instead if you prefer to use a callback:

otherPicture.guillotine(
 onChange: function(data, action)
 // Do something...
 
);

5. API

Once instantiated, you can interact with the plugin by passing instructions as strings. Here is the complete public API:

// Transformations
// rotateLeft, rotateRight, center, fit, zoomIn, zoomOut
picture.guillotine('zoomOut');
picture.guillotine('rotateRight');
...

// Get current data
// scale: 1.4, angle: 270, x: 10, y: 20, w: 400, h: 300 
var data = picture.guillotine('getData');

// Get instance (Guillotine instance)
var guillotine = picture.guillotine('instance');

// Disable/Enable the plugin
picture.guillotine('disable');
picture.guillotine('enable');

// Remove the plugin (reset everything)
picture.guillotine('remove');

Optionally, you can set the initial position and state of the image by passing a data object with the initoption, similar to the one returned by ‘getData':

picture.guillotine(
 width: 400,
 height: 300,
 init: x: 35, y: 15, angle: 90 
);

jQuery Guillotine Plugin

getTable - Easy getting table cells

Download Demo

getTable is a simple jQuery Plugin for easy getting table cells that is positioned on horizontal line, vertical line or both lines that passes through the target cell.

getTable gets horizontal line (row) and vertical line (col) of table. And it gets cells that is positioned on those lines. The handling cells that is positioned on horizontal line is supported by <tr> HTML tag, but vertical line is not supported by HTML.

The cells that is extended by colspan/rowspan are parsed correctly. More lines pass through the extended cells (i.e. those cells catch more cells), and those cells are positioned on more lines (i.e. those cells are caught by more cells).

The horizontal line (row) and vertical line (col) are discerned. getTable returns a jQuery object (or Array of those), therefore you can do anything you want to those.

The table is parsed via DOM, it’s fast, correctly, and those data are cached.

1. INCLUDE JS FILES

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.gettable.min.js"></script>

2. HTML

<table class="sample-a" id="sample-1">
 <tbody>
	<tr>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
	</tr>
	<tr>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
	</tr>
	<tr>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
	</tr>
	<tr>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
	</tr>
	<tr>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
		<td class=""></td>
	</tr>
</tbody></table>

3. JAVASCRIPT

$('#sample-1 td').hover(function() 
	// Get rows that include target cell.
	rows = $(this).getTable('rows');

	// Get cols that include target cell.
	cols = $(this).getTable('cols');

	// Get cells that is included in cross line (rows and cols) of target cell, and style those.
	cells = $(this).getTable('xCells').css('backgroundColor', 'blue');
);

4. METHODS

rows

rows = target.getTable('rows')

Return an Array that includes zero or more rows. The row is a jQuery object that includes zero or more cell (<td> or <th>) elements that is positioned on a horizontal line. The cells in the row are sorted by position as from left to right, regardless of HTML source order. For example, row.eq(0) is leftmost cell like header.

The elements are selected according to the each elements that is included in current target jQuery object. The returned rows is one Array that includes all of those.

An element that is included in current target jQuery object is:

table (<table> element)

All rows in this table are selected.

row (<tr> element)

This row itself is selected.

The cell elements in this row are not the same as cell elements in <tr> element, which includes cells that is extended by rowspan in previous <tr>.

cell (<td> or <th> element)

All rows that include this cell (i.e. horizontal lines that pass through this cell) are selected.

(If you want both rows and cols of cell, use xCells method.)

Example:

var hl; // keep to restore
$('td').hover(function() 
 hl = $(this).getTable('rows')[0].addClass('highlight');
, function() 
 hl.removeClass('highlight');
);

section (<thead>, <tfoot> or <tbody> element)

All rows in this section are selected.

In any cases, the nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).

cols

cols = target.getTable('cols')

Return an Array that includes zero or more cols. The col is a jQuery object that includes zero or more cell (<td> or <th>) elements that is positioned on a vertical line. The cells in the col are sorted by position as from top to bottom, regardless of HTML source order. For example, col.eq(0) is uppermost cell like header.

The elements are selected according to the each elements that is included in current target jQuery object. The returned cols is one Array that includes all of those.

An element that is included in current target jQuery object is:

table, row, section (<table>, <tr>, <thead>, <tfoot> or <tbody> element)

All cols in this table are selected.

cell (<td> or <th> element)

All cols that include this cell (i.e. vertical lines that pass through this cell) are selected.

(If you want both rows and cols of cell, use xCells method.)

Example:

var hl; // keep to restore
$('td').hover(function() 
 hl = $(this).getTable('cols')[0].addClass('highlight');
, function() 
 hl.removeClass('highlight');
);

In any cases, the nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).

cells

cells = target.getTable('cells')

Return a jQuery object that includes zero or more cell (<td> or <th>) elements. The elements are selected according to the each elements that is included in current target jQuery object. The returnedcells is one jQuery object that includes all of those.

An element that is included in current target jQuery object is:

table (<table> element)

All cells in this table are selected.

row (<tr> element)

All cells in this row are selected.

This is not the same as cell elements in <tr> element, which includes cells that is extended by rowspan in previous <tr>.

Example:

$('#targetRow').getTable('cells').css('backgroundColor', 'blue');

cell (<td> or <th> element)

This cell itself is selected.

section (<thead>, <tfoot> or <tbody> element)

All cells in this section are selected.

In any cases, the nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).

xCells

cells = target.getTable('xCells')

Return a jQuery object that includes zero or more cell (<td> or <th>) elements that is positioned on cross line (horizontal line and vertical line) that pass through the each elements that is included in current target jQuery object. The returned cells is one jQuery object that includes all of those. The first cell of that cells is current target. i.e. cells.eq(0) is a cell on the cross point.

The elements that is not cell (<td> or <th>) are ignored.

This is not the same as merged cells that is returned by rows method and cols method, xCellsmethod returns unique cells, duplicated elements are excluded.

The nested table (table that is included in current target) is excluded (If part of the nested table is target too, of course it is included).

Example:

var hl; // keep to restore
$('td').hover(function() 
 hl = $(this).getTable('xCells').addClass('highlight');
, function() 
 hl.removeClass('highlight');
);

table

table = target.getTable('table')

Return a jQuery object that includes zero or more table (<table>) elements. The <table> elements that is included in current target jQuery object, and the <table> elements that have <tr>, <td>,<th>, <thead>, <tfoot> or <tbody> elements that is included in current target jQuery object are selected. The returned table is one jQuery object that includes all of those (duplicated elements are excluded).

5. INITIALIZE

target.getTable()

Parse the table, and cache those data.

You usually don’t need to call initialize method, because getTable parses it automatically when getTable met unknown table via other methods. And getTable caches those data, therefore parsing again is not needed.

The cases of initialize method is needed are:

You want to make preparations in advance.

You changed structure of the table that was already parsed.

If the element that is included in current target jQuery object is <table>, that table is parsed. If element is part of <table> (<tr>, <td>, <th>, <thead>, <tfoot> or <tbody>), the table that has those parts is parsed. i.e. these codes below are equals:

$('table#table1').getTable();
$('table#table1>tbody:eq(0)').getTable();
$('table#table1>tbody:eq(0)>tr:eq(0)').getTable();

getTable discern nested table correctly, therefore if td of only inner table is given, outer table is not parsed.

getTable - Easy getting table cells

Friday 12 September 2014

Simone - Taskbar and window

Download

Demos

Shared

Basics: The most basic functionality: one taskbar and one window with no additional options.

Containments: Difference between window “containment” option set to “viewport” and window “containment” options set to “visible”.

Taskbar

Taskbar “propagateWindowBlur” option: Difference between taskbar “propagateWindowBlur” option set to false and taskbar “propagateWindowBlur” options set to true.

Taskbar autohide: Two taskbars with autohide on, one with default durations, and one with custom durations.

Draggable taskbars: Two draggable taskbars with default options.

Taskbar draggable between edges: Shows what it means that taskbar is draggable between edges.

Taskbar “dropOnExisting” option: Difference between “dropOnExisting”: true and “dropOnExisting”: false.

Taskbar “menuAutoOpenOnBrowse” option: Difference between window “menuAutoOpenOnBrowse” option set to false and window “menuAutoOpenOnBrowse” options set to true.

Resizable taskbars: Resizable posibilities of horizontal and vertical taskbar.

Taskbar collisions resolving: Three draggable taskbars, showing how collisions resolving works.

Taskbar system buttons: Shows all system buttons in one taskbar.

Taskbar “windowButtonsIconsOnly” option: Difference between “windowButtonsIconsOnly”: true and “windowButtonsIconsOnly”: false.

Sortable window buttons: Difference between “windowButtonsSortable”: true and “windowButtonsSortable”: false.

Window

Confirm close functionality: Window confirm close functionality with some customization options.

Window durations: Shows how different durations are applied to window.

Window “embeddedContent” option: Shows how windows containing embedded content, like iframe, Flash game, or QuickTime video, can be dealt with.

Window groups: Basic usage of window groups.

Window interactions: Demonstrates window interactions: draggable and resizable.

Window “maximizedDraggable” option: Difference between “maximizedDraggable”: true and “maximizedDraggable”: false.

===================================================

Simone is JavaScript window manager consisting of two widgets: taskbar and window, providing a desktop-like experience. It’s especially useful for single-page applications.

Features

Easy start for developers. API known from jQuery UI.

jQuery UI Themes compatible with no additional setup. Works with jQuery UI ThemeRoller too.

Customizable with options, events and methods.

Built-in debugger.

Comes with tests.

Utilizies well-known patterns, present in other window managers.

Comes with localization support nad multilingual capabilities.

Widgets are to a point aware of each other.

Content-agnostic windows.

Software in active development.

Supported browsers

Only modern browsers are supported by Simone. No support for legacy browers, sorry.

Certain API’s, like fullscreen API, are missing in older browsers. Graceful degradation if provided.

===============================

1. INCLUDE JS AND CSS FILES

<!-- first, include jQuery -->
<script src="/js/jquery/jquery.js"></script>

<!-- second, jQuery UI Theme and jQuery UI itself is needed -->
<link href="/js/jquery-ui/themes/sunny/jquery-ui.css" rel="stylesheet">
<script src="js/jquery-ui/jquery-ui.js"></script>
<!-- it's also recommended to include jQuery UI Datepicker language files -->
<script src="/js/jquery-ui/i18n/jquery.ui.datepicker-all.js"></script>

<!-- now, include Simone -->
<link href="/js/simone/simone.css" rel="stylesheet">
<script src="/js/simone/simone.js"></script>
<!-- include translations after widgets has been included -->
<script src="/js/simone/i18n/simone.all.js"></script>

2. HTML

<div class="taskbar"></div>

<div class="window"></div>

<div class="demo">
	<div class="description">...</div>
</div>

3. JAVASCRIPT

$( document ).ready( function () 
	"use strict";

	// taskbar has to be created first
	$( ".taskbar" ).taskbar();

	// window is binded to taskbar widget,
	// so it has to be created second
	$( ".window" ).window();
);

Simone - Taskbar and window

Tuesday 9 September 2014

jQuery.isAlive animation

Download Demo

jQuery.isAlive is a jQuery plugin for complex animated sites like advanced parallax. It is fully compatible with IE7+ and all mobile platforms. Touch events are included.

jQuery.isAlive can be called for as many times as you want on your web page, is CSS3 compatible, is responsive and can be customize very easy.

jQuery.isAlive is free to use.

1. INCLUDE CSS AND JS FILES

<script type="text/javascript" src="../../jquery-1.11.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../easing.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../src/jquery.isAlive.js?v=1.8.5" charset="UTF-8"></script>

2. HTML

<div id="scroll-over-me">
	<div id="myDiv"></div>
	<div id="scroll-bar">
		<div id="scroll-bar-handler"></div>
	</div>
</div>

3. JAVASCRIPT

var animations = 
	1:
		"selector": "#scroll-bar",
		"method":"static",
		"property":"width",
		"value":"eval(elementWidth-20)"
	,
	2: 
		"selector": "#myDiv",
		"method":"animate",
		"property":"background-position",
		"step-start":0,
		"step-end":100,
		"value-start":"0px center",
		"value-end":function(s,e)
			var t = -9122+e.elementWidth;
			return t.toString()+"px center";
		
	,
	3: 
		"selector": "#scroll-bar-handler",
		"method":"animate",
		"property":"left",
		"value-start":2,
		"value-end":"eval(elementWidth-20-37)",
		"scrollbar":true
	,
;

$(window).load(function()
	$('#scroll-over-me').isAlive('create',
		elements:animations,
		duration:500,
		easing:"easeOutQuad",
		enableScrollbarTouch:true,
		useCSS3:true,
		enableGPU:true,
		onLoadingComplete:function()
			$('#myDiv').fadeIn();
		
	);
);

4. CSS

body,html
	overflow:hidden;
	margin:0;

#scroll-over-me
	width:100%;
	height:100%;
	background:black;
	position:relative;
	margin:auto;
	

#myDiv
	width:100%;
	height:100%;
	display:none;
	background-image:url(assets/360.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size:9122px auto;
	position:absolute;
	top:0px;
	left:0px;

#scroll-bar
	position:absolute;
	width:100px;
	height:40px;
	border:1px solid gray;
	bottom:20px;
	left:10px;
	border-radius:20px;


#scroll-bar-handler
	position:absolute;
	width:34px;
	height:34px;
	border:1px solid red;
	top:2px;
	left:2px;
	border-radius:100%;
	background:#ccc;
	cursor:pointer;

jQuery.isAlive animation

ScotchPanels.js - jQuery Off Canvas Menus and Panels Plugin

Download Demo

Demos

Getting Started

Side Menu – Easy Way

Side Menu – HTML5 Way

Side Menu – Dev Way

Mobile Only

Side Menu Mobile Only – with CSS

Side Menu Mobile Only – with JS

Horizontal

Horizontal Fixed Width

Horizontal Percentage Width

Vertical

Vertical Min Height

Content Helpers

HTML

Iframe

Iframe with Loader

Photo

Video

Event Helpers

Click

Hover

Touch

Styles

Transitions

Durations

Directions

Triggers

Trigger Example

Trigger – Close after “X”

Trigger – With Cookie

CSS Class Helpers

CSS Helper Classes

Browser Suport

JavaScript Only

JavaScript Only with Easing

Multiple Panels at Once

Multiple Panels

Multiple Panels – different styles

Multiple Panels – same container

Advanced (cool things)

Custom Slider

Callbacks

Loading Buttons

Nested Panels

scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project. Scotch Panels work from any container so you can put your side navigation on any element you want. It even provides excellent backwards-compatible browser support via a JavaScript fallback. Lastly, there’s over 30 stripped down code samples to get you up and running in no time.

Features

Uses CSS3 with JavaScript Fallback

Fully Responsive

Custom transition styles

Completely Customizable with tons of optional settings

Lightweight, easy to use, and only one file

Cross Browser Support

Open Source

Choose either custom HTML, images, iframes, or video panels

Optionally use HTM5 Data Attributes

Off Canvas directions from top, Bottom, left, and right

Works from any container or div

Extensive Callbacks API

Click, touch, hover, and keyboard helpers

CSS Class Helpers

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<script src="../../../dist/scotchPanels.js"></script>

2. HTML

<div id="scotch-panel">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<a href="#" class="toggle-panel"><i class="fa fa-bars"></i></a>

3. JAVASCRIPT

$('#scotch-panel').scotchPanel(
	containerSelector: 'body',
	direction: 'right',
	duration: 300,
	transition: 'ease',
	clickSelector: '.toggle-panel',
	distanceX: '70%',
	enableEscapeKey: true
);

ScotchPanels.js - jQuery Off Canvas Menus and Panels Plugin

Monday 8 September 2014

Cool Social Buttons jQuery Plugin

Download Demo

Cool Social Buttons is a jQuery plugin that adds social sharing buttons to your site without slowing it down. It is easy to use, powered by CSS3, mobile friendly and fully customizable.

The plugin has support for these networks:

Twitter

Facebook

Google+

Tumblr

1. INCLUDE CSS AND JS FILES

<!-- In the head section of your page -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="assets/cool-share/plugin.css" media="all" rel="stylesheet" />

<!-- Near the closing body tag -->
<script src="assets/cool-share/plugin.js"></script>

2. HTML

<span class="socialShare"></span>

3. JAVASCRIPT

var url = 'http://tutorialzine.com/2014/08/cool-share-jquery-plugin/';

var options = 

 twitter: 
 text: 'Check out this awesome jQuery Social Buttons Plugin! ',
 via: 'Tutorialzine'
 ,

 facebook : true,
 googlePlus : true
;

The URL parameter is optional – if it is omitted the plugin will use the URL of the current page. The second parameter is an object with social services. Facebook and Google+ don’t support any additional options, so they only take true/false. Twitter on the other hand, can prefill the contents of the tweet and associate it with a twitter user.

Cool Social Buttons jQuery Plugin

Sensei Grid - Simple data grid library in JavaScript

Download Demo

Sensei Grid is a simple data grid library written in JavaScript. The data grid is part of Datazenit, a web-based database administration tool.

Dependencies: jQuery and underscore.js/lodash.

Goals

Simplicity: Sensei Grid will be a single purpose data grid without unrelated functionality.

Small code base: Bloatware and dirty workarounds/hacks will be avoided as much as possible to keep the code base small and tidy.

Extensibility: Even though Sensei Grid will be kept simple, we will put serious effort to make it easy to extend and customize.

Stability: Sensei Grid is backed by Datazenit, meaning that the project is financially supported and will be constantly maintained and improved.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="../lib/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../dist/css/sensei-grid.css"/>

<script src="../lib/jquery/dist/jquery.min.js"></script>
 <script src="../lib/lodash/dist/lodash.min.js"></script>
 <script src="../dist/sensei-grid.js"></script>
 <script src="../dist/sensei-editors.js"></script>

2. HTML

<div class="example"></div>

3. JAVASCRIPT

Define your data array. Each row is represented by an object.

var data = [
 id: 1, title: "test",
 id: 2, title: "foo bar",
];

Currently it is mandatory to define columns in a separate array for Sensei Grid to work

var columns = [
 name: "id", type: "string",
 name: "title", type: "string"
}

Initialize grid with data and columns

var grid = $(".example").grid(data, columns);

grid.registerEditor(BasicEditor);

Render data grid in .example container.

grid.render();

Sensei Grid - Simple data grid library in JavaScript

Sunday 7 September 2014

Adapttext - Rescale text depending on it's container width

Download Demo

Adapttext is a jQuery plugin that help rescale text depending on it’s container width.

1. INCLUDE JS FILES

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

2. HTML

<p class="responsive">Hello world</p>
<p class="responsive" data-compression="10" data-max="100" data-min="10">Hello world</p>
<h1 class="responsive" data-scrollable="true">Long Text With Scrollable Support</h1>

3. JAVASCRIPT

jQuery(function($) 
 $('.responsive').adaptText();
);

Adapttext - Rescale text depending on it's container width

Mnmenu - Create dropdown menus from 'ul' lists

Download Demo

Mnmenu is a Query plugin to create dropdown menus from <ul> lists.

This is a very simple and straightforward plugin. It’s still a work in progress project with more features to come, so check for updates to see what’s new in upcoming versions.

The aim of the project is to create a very simple to style dropdown menu. You can create a totally styled menu in less than 100 line stylesheet.

Features

Nested list menu. The menu can have several nested hierarchy levels.

Menu calculates window bounds so that it’s always in the client view area.

Menu can be oriented so that it displays left-to-right, right-to-left, bottom-to-top….

Animations for display transitions. Menu is shown and hidden with animations.

HoverIntent compatible.

1. INCLUDE JS FILES

<script src="../lib/jqmin.1.10.1.js" type="text/javascript"></script>
<script src="../src/jquery.mnmenu.js" type="text/javascript"></script>

2. HTML

<ul>
 <li>First Level
 <ul>
 <li>Second Level</li>
 <li>...</li>
 </ul>
 </li>
 <li><a href="#">First level as link</a></li>
</ul>

3. JAVASCRIPT

$(document).ready(function()
	$('#idmenu').mnmenu();
);

Mnmenu - Create dropdown menus from 'ul' lists

Friday 5 September 2014

jQuery Keyboard Navigation

Download Demo

Keyboard Navigation is a Jquery plugin for scroll window to next/prev html element.

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.hotkeys.js"></script>
<script src="jquery.keyboard-navigation.js"></script>

2. HTML

<!-- Demo elements -->
<div class="posts">
	<div class="post"><b>post 1</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 2</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 3</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 4</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 5</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 6</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 7</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 8</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 9</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
	<div class="post"><b>post 10</b> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

3. JAVASCRIPT

$(function()
	// init jquey navigation
	$('.posts').keyboardNavagation();
	
	// j - next
	$(document).bind('keydown', 'j', function()
		$('.posts').trigger('scrollNext');
	);

	// k - prev
	$(document).bind('keydown', 'k', function()
		$('.posts').trigger('scrollPrev');
	);

	$('.post').on('selected', function()
		console.log('selected element', this);
	)
);

jQuery Keyboard Navigation

Tuesday 2 September 2014

Simply Toast - Simple toast messages for jQuery

Download Demo

Simply Toast is a jquery plguin that displays simple toast messages for your websites.

All css styles were extracted from bootstrap, so, if you already use bootstrap, you don’t need simply-toast.css

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="bower_components/simply-toast/simply-toast.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/simply-toast/simply-toast.min.js"></script>

2. JAVASCRIPT

$.simplyToast('This is a success message!', 'success');

$.simplyToast('This is a danger message!', 'danger');

$.simplyToast('This is a info message!', 'info');

$.simplyToast('This is also an info message!'); //'info' is the default type

$.simplyToast('This is a warning message!', 'warning');

3. OPTIONS

appendTo: "body",
customClass: false,
type: "info",
offset:

 from: "top",
 amount: 20
,
align: "right",
minWidth: 250,
maxWidth: 450,
delay: 4000,
allowDismiss: true,
spacing: 10

4. METHODS

// To create a toast message
var toast = $.simplyToast(message, type='info', options);

// To manually remove a toast message
$.simplyToast.remove(toast);

// To extend default options
$.extend(true, $.simplyToast.defaultOptions,

 'type': 'success'
);

Simply Toast - Simple toast messages for jQuery

Ads

Saturday 27 September 2014

More Demos

Wednesday 24 September 2014

Tuesday 23 September 2014

How to use

Thursday 18 September 2014

Wednesday 17 September 2014

Monday 15 September 2014

Support

Friday 12 September 2014

Features

Supported browsers

Tuesday 9 September 2014

Features

Monday 8 September 2014

Goals

Sunday 7 September 2014

Features

Friday 5 September 2014

Tuesday 2 September 2014