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,
Nabeel Shahid.

jQuery Tapatar – A lightweight, extensible plugin, that lets users pick an avatar from a social network, disk, or other source

 

Tapatar is a lightweight, extensible jQuery plugin, that lets users pick an avatar from a social network, disk, or other source. By default, Gravatar, Local and Facebook sources are included. Tapatar has been built to make it very easy to add additional sources.

 

Getting started

First download Tapatar and add it to your project. Next initiate Tapatar, by attaching it to a hidden input:

$('input.tapatar').tapatar({
  sources: {
    gravatar: {
      email: 'foo@bar.com'
    },
    facebook: {
      appId: 1657455811156921
    }
  }
});

After the user has succesfully picked an avatar from one of the sources, the image will be set as a data uri to the value of the input to which Tapatar was bound.

Tapatar options

The Tapatar object provides the following properties and methods.

Properties

Property	Type	Description
sources	object	Each object key represents a source
sources.sourceName	object	Each object key represents a source
sources.sourceName.enabled	boolean	Wheter or not this source is enabled
sources.sourceName.order	int	The position at which this source will be showed in the picker
image_url_prefix	string	The path to the folder that contains the images for Tapatar. Default: ‘img/’
default_image	string|function	Either a path, or a function returning a path to the default image.
templates	object	An object containing the templates for the widget, overlay, picker and source. See source for more info

Methods

Method	Description
registerSource(TapatarSource)	Use this method to add a new source at runtime
pickSource(TapatarSource)	Set a specific source as the picked source. This is method is usually called from within the actual source (which has the Tapatar object set as its delegate)
imageDataSet(TapatarSource, pick)	Set the image data for the input. This is method is usually called from within the actual source (which has the Tapatar object set as its delegate)

Creating your own avatar source

The TapatarSource object provides a common base to create additional sources.

Tptr.sources.placeKitten = new Tptr.TapatarSource({
  id: 'placeKitten',
  title: 'Placekitten',
  action: {
    content: 'Pick',
    onClick: function(evt) {
        if (this.image_data) {
          this.setImageData(this.image_data, true);
        }
    }
  },
  onAdd: function() {
    var url = 'https://placekitten.com/g/200/300';

    var self = this;
    this.downloadImage(url, function(dataUri){
        if (dataUri) {
          self.setImageData(dataUri);
        } else {
          try {
            self.delegate.options.sources.placeKitten.enabled = false;
          } catch(err) {}
        }
    })
  },
});

Properties

Property	Type	Description
id	string	The id for this source. This should correspond to the object key in the options.sources object for this source
title	string	The source’s title
action.content	string	The text on the “pick” button for this source
action.onClick	function	The click handler for the “pick” button for this source.
onAdd	function	This callback is called when the source is added to the inited. Here you can do preliminary work, like checking if an image is available at a certain url
Inherited properties
delegate	Tptr	A reference back to the Tptr object
image_data	string	The downloaded image data. This can be set through the setImageData() method
icon	string|function	Either a path, or a function returning a path to the icon for this source.

Methods

Method	Description
setImageData(data, pick)	Set the downloaded image data for this source
pick()	Set this source as the picked source
downloadImage(url, callback)	Download image data from a url

---

Website: https://tapfiliate.com/open-source/tapatar/

Source : https://github.com/tapfiliate/tapatar/archive/master.zip

Demo: https://tapfiliate.com/open-source/tapatar/demo/

 

---

 

Thanks for reading,
Nabeel Shahid.

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

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,
Nabeel Shahid.

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,
Nabeel Shahid.

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.

 

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,
Nabeel Shahid.

 

 

Credits:  Nick Kugaevsky