Home Blog

Notify.js – A jQuery plugin to provide simple browser based notifications with customization

Notify.js – A jQuery plugin to provide simple browser based notifications with customization

Basic Usage

Element Notifications

You can place notifications on any element:

$(".elem-demo").notify("Hello Box");

Like this

box

Global Notifications

If you don’t specify an element, notification will appear in the top left (unless you specify a different position – See Positioning)

$.notify("I'm over here !");

Notification Styles

Each style may define a set of classes to use to substyle the notification. The pre-packaged version includes a bootstrap notification style (see more below in Styling). These classes include:

Success

$.notify("Access granted", "success");

Info

$.notify("Do not press this button", "info");

Warning

$.notify("Warning: Self-destruct in 3.. 2..", "warn");

Error

$.notify("BOOM!", "error");

Note: This page has set the default class to"success" with$.notify.defaults({ className: "success" });.

Positioning

The position string option is used to describe both vertical and horizontal alignment. Element notifications and Global notifications can be vertically repositioned to: "top", "middle" or "bottom" and horozontally repositioned to: "left", "center" or "right". If we don’t provide a position option the default alignments are defined in the default settings: globalPosition and elementPosition. When only one alignment is provided, the vertical alignment is middle and horizontal alignment is centre.

$(".pos-demo").notify(
  "I'm to the right of this box", 
  { position:"right" }
);

We can position the notification around this box

Use this positioning tool to see all possible position combinations.

Element Global

An awesome cool

larrrggggeeee box

API

$.notify( string|object, [ options ])

string|object – global notification data
options – an options object or class name string

$.notify( element, string|object, [ options ])

element – a jquery element
string|object – element notification data
options – an options object or class name string

$( selector ).notify( string|object, [ options ])

selector – jquery selector
string|object – element notification data
options – an options object or class name string

$.notify.addStyle( styleName, styleDefinition )

styleName – string (the style option references this name)
styleDefinition – style definition object (see Styling below)

$.notify.defaults( options )

options – an options object (updates the defaults listed below)

Options

The options object listed above are in the form below. This object below is the actual used to check option validity and set defaults.

{
  // whether to hide the notification on click
  clickToHide: true,
  // whether to auto-hide the notification
  autoHide: true,
  // if autoHide, hide after milliseconds
  autoHideDelay: 5000,
  // show the arrow pointing at the element
  arrowShow: true,
  // arrow size in pixels
  arrowSize: 5,
  // position defines the notification position though uses the defaults below
  position: '...',
  // default positions
  elementPosition: 'bottom left',
  globalPosition: 'top right',
  // default style
  style: 'bootstrap',
  // default class (string or [string])
  className: 'error',
  // show animation
  showAnimation: 'slideDown',
  // show animation duration
  showDuration: 400,
  // hide animation
  hideAnimation: 'slideUp',
  // hide animation duration
  hideDuration: 200,
  // padding between element and notification
  gap: 2
}


Download : https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js

Website / Demo: https://notifyjs.com


Thanks for reading,
Web Editor

jQuery SignField – Provides signature field as jQuery component, using either a sketch pad or an uploaded signature file for E-Sign (Electronic Signature) features

jQuery SignField – Provides signature field as jQuery component, using either a sketch pad or an uploaded signature file for E-Sign (Electronic Signature) features

jQuery Signature 12-Jan-2016

Setup

Following scripts must be included at bottom of page body.

<script src="jquery.js"></script>
<script src="sketch.min.js"></script>

<!-- Localized messages -->
<script src="lang/jquery.signfield-en.min.js"></script>

<!-- Component script -->
<script src="js/jquery.signfield.min.js"></script>

JavaScript usage

Any element can be turned into a signature field.

Consider element thereafter as original one you want to replace with a signature field.

<div id="uniqueId" class="classes" data-name="fieldName" 
  data-max-size="2048" data-pen-tickness="3" data-pen-color="red" ></div>
  • id (optional): Signature field identifier.
  • class (optional): CSS classes, if present applied on signature field.
  • data-name (required): Field name, used on submit.
  • data-max-size (optional): If present, used as limit in kB to upload signature file.
  • data-pen-thickness (optional, default = 2): If present and if sketch (canvas) is supported, defines pen thickness.
  • data-pen-color (optional): If present and if sketch is supported, defines pen color.

Then calling $("#uniqueId").signField() will replace original element with a signature field as following (considering ${orig.x} is value of attribute x on original element).

<div id="${orig.id}" class="${orig.class}">
  <!-- If canvas is supported by browser -->
  <label class="radio sketch-radio">
    <input type="radio" name="${orig.name}-type" value="canvas" />
    <!-- + Localized label -->
  </label>
  <a class="clear-canvas"><!-- Localized message --></a>
  <canvas></canvas>

  <label class="radio file-radio">
    <input type="radio" name="${orig.name}-type" value="file" />
    <!-- + Localized label --> 
  </label>
  <!-- end of if -->

  <input type="file" name="${orig.name}-file" />
  <span class="message"></span>
</div>

Canvas size is defined by CSS, you may want to enforce it so that size of sketch image data is compliant with what you expect (e.g. #uniqueId canvas { width: 200px; height: 100px } ensure sketch image is 200×100).

If signature component wants to raise an error, CSS class has-error is added to the nesting div element, and localized message written in its span.message.

Methods

addError

.signField('addError', "errorKey", "message")

Adds and displays a custom error.

$('#signature').signField('addError', "file.error.type-unsupported", 
  "This kind of file is not supported");
// #signature should have been previously set up as signature field

If custom error is related to a selected file, then key must starts with file.error..

errors

.signField('errors')

If there is error for a signature field, returns array of error keys or [] (if none).

var errs = $('#signature').signField('error');
// #signature should have been previously set up as signature field

filename

.signField('filename')

Returns name of selected file if any, or null if none.

var filename = $('#signature').signField('filename')

imagedata (getter)

.signField('imagedata')

Returns image PNG data for a sketched signature, in data URI format if any, or null if none.

var imagedata = $('#signature').signField('imagedata')

imagedata (setter)

.signField('imagedata', dataURI)

Load PNG image from given dataURI into signature canvas (if supported).

$('#signature').signField('imagedata', aDataUri)

selectiontype

.signField('selectiontype')

Returns type of selected signature, either file or canvas (or null if none).

var seltype = $('#signature').signField('selectiontype')

Events

change

Fired when field value is changed, either by uploading a signature file or by sketching one.

$("#signature").on('change', function() { 
  var signature = $(this);
  // ...
})

Website: https://github.com/cchantep/jquery.signfield

 


 

Thanks for reading,
Web Editor

jQuery Capitalize – A Plugin that provides capitalization for your input fields (or any other element) for proper names, places

jQuery Capitalize – A Plugin that provides capitalization for your input fields (or any other element) for proper names, places

 

Using the plugin

Include jQuery and the plugin on a page. Apply the plugin to the elements you want.

<input type="text" id="name" />

<script src="jquery.js"></script>
<script src="jquery.capitalize.min.js"></script>
<script>
$(document).ready(function(){
    $('#name').capitalize();
});
</script>

Output sample

Before After
JOÃO A.DA SILVA João A. da Silva
ruA DA praça xv Rua da Praça XV
jonnas fonini Jonnas Fonini
LOUIS VAN GAAL Louis van Gaal
áREa de teRra Área de Terra

 


Website: http://fonini.github.io/jquery-capitalize/

Source Code: https://github.com/fonini/jquery-capitalize/releases


Thanks for reading,
Web Editor

Phoenix – A jQuery plugin that saves form field values or state to Local Storage via HMTL5 Web Storage APIs

Phoenix – A jQuery plugin that saves form field values or state to Local Storage via HMTL5 Web Storage APIs

Lost connections, crashed browsers, broken validations – all these forms data user had filled in with efforts gets lots adds end user frustration.

Phoenix is a jQuery plugin that saves data entered inside form fields locally and restores it in case the browser crashes or the page is refreshed accidentally.

Phoenix keeps bad things away from your forms. It is very tiny – 3Kb (1Kb gziped), but powerful. Phoenix saves form fields values, checkboxes and radio button states to your browser Local Storage using HTML5 Web Storage API.

If at any point the Internet connection goes offline, the browser crashes, the page is refreshed or the form doesn’t validate, the user filling in the form can restore the form to his last version instead of re-filling all the form fields again.

 

jQuery Phoenix 12-Jan-2016

Usage:

<form id=’stored-form’>
<input type=”text” class=”phoenix-input” />
<textarea type=”text” class=”phoenix-input”></textarea>
</div>

$(‘.phoenix-input’).phoenix()
$(‘#my-form’).submit(function(e){
$(‘.phoenix-input’).phoenix(‘remove’)
})

 

Options

You can pass an options object on Phoenix initialization.

$('.phoenix-input').phoenix({
    namespace: 'phoenixStorage',
    webStorage: 'sessionStorage',
    maxItems: 100,
    saveInterval: 1000,
    clearOnSubmit: '#stored-form',
    keyAttributes: ['tagName', 'id']
  })

Possible options are:

  • namespace – webStorage namespace (if you don’t like default) – string: phoenixStorage,
  • webStorage – method used; sessionStorage or localStorage, (localStorage by default) – string: localStorage,
  • maxItems – max items to store (every form field is an item) – integer: 100,
  • saveInterval – how often to save field values to localStorage (milliseconds). If it’s negative, field will only be saved when invoking save method – integer: 1000
  • clearOnSubmit – form selector (when you submit this form Phoenix will clean up stored items) – string: false
  • keyAttributes – define which element attributes will be used to find the correct element to populate – array: ['tagName', 'id', 'name']

Methods

When Phoenix initialized you can use API methods to manage it. Call method with $(selector).phoenix('methodName'), where methodName is one of these:

  • start – start saving timer, it will save field values every saveIntervalms (saveInterval is an option as you remember)
  • stop – stop saving timer
  • load – load value from stored item to field
  • save – save value from field to stored item
  • remove – stop saving timer and remove stored item from localStorage

NB Phoenix doesn’t remove stored item from localStorage by itself. So don’t forget to call remove event when you don’t need filled in form field values anymore or use clearOnSubmit option with form id.

Events

Every Phoenix method call fires an event you can bind to. For example

$('.phoenix-input').bind('phnx.loaded', function (e) {
  console.log('Data loaded... ')
})

Events naming is very obvious, so try them out

  • phnx.started
  • phnx.stopped
  • phnx.loaded
  • phnx.saved
  • phnx.removed

Compatibility

Browsers

Any compatible with HTML5 Web Storage API browser works well with Phoenix.

  • Chrome 4+
  • Firefox 3.5+
  • Safary 4+
  • Opera 10.5+
  • IE 8+
  • All modern mobile browsers (except Opera Mini)

Website: https://github.com/kugaevsky/jquery-phoenix

 


 

Thanks for reading,
Web Editor

 

 

Credits:  Nick Kugaevsky 

 

 

jQuery GridManager – Structural editor for rows and columns in popular CSS frameworks. Create, reorder, update & delete rows and columns in grid layouts

jQuery GridManager – An easy way of building rows and grids with built in editable regions. Create, reorder, update & delete rows and columns in grid layouts used by frameworks such as Bootstrap 3.x or Foundation 5.x

Gridmanager allows you to create, reorder, update & delete rows and columns in grid layouts used by frameworks such as Bootstrap 3.x or Foundation 5.x. It is not another Rich Text Editor (although it can use them), and is designed to work more as a structural / page building device for use in web applications, custom CMS system etc.

Grid Manager 2016-01-12_7-43-29

You can:

  • Drag and drop columns & rows
  • Resize, delete and add columns on the fly
  • Apply custom column and row classes
  • Nest rows within columns
  • Quickly edit the source code directly
  • Add row templates for common column width layouts
  • Add/Alter the ID of a column or row directly
  • Use the dynamically inserted editable regions to change column/row text
  • Tie in Rich Text Editors such as TinyMCE & CKEditor to those editable regions
  • Change layout modes for easy editing & previewing of responsive classes
  • Use fluid rows if you want
  • Create your own custom controls for easily extending functionality

Website: http://neokoenig.github.io/jQuery-gridmanager/

Demos: http://neokoenig.github.io/jQuery-gridmanager/demo/

Documentation: http://neokoenig.github.io/jQuery-gridmanager/docs/


Thanks for reading,
Web Editor

Selectize.JS – jQuery based hybrid of a textbox and box for tagging purpose with autocomplete and native-feeling keyboard navigation

Selectize.JS – jQuery based hybrid of a textbox and <select> box for tagging purpose with autocomplete and native-feeling keyboard navigation

Selectize is the hybrid of a textbox and <select> box. It’s jQuery-based and it’s useful for tagging, contact lists, country selectors, and so on

It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.

It’s a lot like Chosen, Select2, and Tags Input but with a few advantages. Developed by @brianreavis (partly at DIY). Licensed under the Apache License, Version 2.0… so do whatever you want with it!

Features

 

  • Smart Option Searching / Ranking
    Options are efficiently scored and sorted on-the-fly (using sifter). Want to search an item’s title and description? No problem.
  • Caret between items
    Order matters sometimes. Use the and arrow keys to move between selected items.
  • Select & delete multiple items at once
    Hold down option on Mac or ctrl on Windows to select more than one item to delete.
  • Díåcritîçs supported
    Great for international environments.
  • Item creation
    Allow users to create items on the fly (async saving is supported; the control locks until the callback is fired).
  • Remote data loading
    For when you have thousands of options and want them provided by the server as the user types.
  • Clean API & code
    Interface with it and make modifications easily. Pull requests welcome!
  • Extensible
    Plugin API for developing custom features (uses microplugin).
  • Touch Support
    Plays nice with iOS 5+ devices.

 

Selectize – Usage

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script>
$(function() {
    $('select').selectize(options);
});
</script>

 


Website: http://selectize.github.io/selectize.js

Options & Usage: https://github.com/selectize/selectize.js/blob/master/docs/usage.md

Source Code: https://github.com/selectize/selectize.js

API documentation: https://github.com/selectize/selectize.js/blob/master/docs/api.md

Plug-in documentation: https://github.com/selectize/selectize.js/blob/master/docs/plugins.md


Thanks for reading,
Web Editor

 

 

 

 

 

rPage – Bootstrap responsive pagination plugin

rPage – Bootstrap responsive pagination plugin

Highly responsive pagination for Bootstrap 3

rPage is an easy to use plugin for making Bootstrap 3’s pagination more responsive. rPage automatically shrinks the pagination component and removes some of its elements when there isn’t enough room.

 

Usage

Just include responsive-pagination.js and call the rPage function on the pagination element like this:

$(document).ready(function () {
    $(".pagination").rPage();
});

 

Previous and Next Links

rPage won’t hide previous and next links with bootstrap’s default “«” and “»” content. If you want to use custom text in your links, add classes to your list items like this:

<ul class="pagination">
  <li class="pagination-prev"><a href="#">Previous</a></li>
  <!-- ... -->
  <li class="pagination-next"><a href="#">Next</a></li>
</ul>

 

Website: http://auxiliary.github.io/rpage/

Demo: http://auxiliary.github.io/rpage/demo.html


Thanks for reading,
Web Editor

HubSpot Messaging Library – Client side Growl-style alerts and transactional messages for your web applications with actions and auto-retry.

Hub Spot Messaging Library – Growl-style alerts and transactional messages for your web applications.

Client-side growl-like notifications with actions and auto-retry.

  • Show transactional messages in your app.
  • Wrap AJAX requests with progress, success and error messages.
  • Add action links to your messages.
  • 4kb minified and compressed.
  • Works in everything modern, and IE7 and above.
  • Ability to change themes of notification messages
  • Show messages in your app.
  • Wrap AJAX requests with progress, success and error messages, and add retry to your failed requests.
  • Add actions (undo, cancel, etc.) to your messages.

Messenger is different from other solutions for a few reasons:

  • Each message can be updated after being posted without losing it’s place
  • Actions and events can be bound to messages
  • It’s completely theme able with CSS
  • A ‘tray’ element exists to allow you to style the box around the messages, and limit the number of messages on the screen

The full list of options:

  • message: The text of the message
  • type: info, error or success are understood by the provided themes. You can also pass your own string, and that class will be added.
  • theme: What theme class should be applied to the message? Defaults to the theme set for Messenger in general.
  • id: A unique id. If supplied, only one message with that ID will be shown at a time.
  • singleton: Hide the newer message if there is an id collision, as opposed to the older message.
  • actions: Action links to put in the message, see the ‘Actions’ section on this page.
  • hideAfter: Hide the message after the provided number of seconds
  • hideOnNavigate: Hide the message if Backbone client-side navigation occurs
  • showCloseButton: Should a close button be added to the message?
  • closeButtonText: Specify the text the close button should use (default ×)

Messenger also includes aliases which set the type for you: Messenger().error(), Messenger().success(), and messenger().info().

Requires

  • – jQuery
  • – Plays well with, but doesn’t require, Bootstrap

Including

JS

/build/js/messenger.min.js
/build/js/messenger-theme-future.js

CSS

/build/css/messenger.css
/build/css/messenger-theme-future.css

Also available as a Rails gem and on cdnjs.

Quick Usage

# Replace:
$.ajax
    url: "/some-url"
    success: ->

 

# With:
Messenger().run
    errorMessage: "This did not go well."
,
    url: "/some-url"
    success: ->

 

 


Website: http://github.hubspot.com/messenger/docs/welcome/

Reference Documentation: http://github.hubspot.com/messenger/

Source Code: https://github.com/HubSpot/messenger


Thanks for reading,
Web Editor

Bootstrap – Show or hide Password plugin

Bootstrap – Show or hide Password plugin

Show/hide password plugin for twitter bootstrap.

This plugin support bootstrap v2 and bootstrap v3.

Usage

The plugin acts on <input> elements (typically password fields):

<input id="password" class="form-control" type="password" data-toggle="password">

Via data attributes

<input data-toggle="password">

Via JavaScript

$('#password').password();

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-message="Show/hide password".

Name Attribute type default description
data-toggle String password Active password without writing JavaScript.
placement data-placement String after The placement of show/hide icon, can be ‘before’ or ‘after’.
message data-message String Click here to show/hide password The tooltip of show/hide icon.
white data-white Boolean false Show the white icon. (Just work in bootstrap v2)

Methods

.password(‘show’)

Manually show the password.

$('#password').password('show');

.password(‘hide’)

Manually hide the password.

$('#password').password('hide');

.password(‘toggle’)

Manually toggle the password.

$('#password').password('toggle');

.password(‘val’, [value]);

Get the current value of the password or set the value of password.

$('#password').password('val'); // get value
$('#password').password('val', 'password'); // set value

Events

The plugin exposes a few events.

Event Type Description
show.bs.password This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.password This event is fired immediately when the hide instance method has been called.
$('#password').on('show.bs.password', function (e) {
    // code here
});

Website & Source Code: https://github.com/wenzhixin/bootstrap-show-password#usage

Demo: http://wenzhixin.net.cn/p/bootstrap-show-password/


Thanks for reading,
Web Editor