15. March 2017

Joyride 2 – create website tour in style

Joyride is an easy to configure site tour wizard.

Joyride

10. January 2017

jQuery Knob … a dial to rule them all

Canvas based dial that adds mouse click, wheel mouse, keyboard and finger / touch events.

Really nice :)

jQuery Knob

19. November 2016

Smart sticky elements with Sticky-Kit

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

$("#sticky_item").stick_in_parent()
  .on("sticky_kit:stick", function(e) {
    console.log("has stuck!", e.target);
  })
  .on("sticky_kit:unstick", function(e) {
    console.log("has unstuck!", e.target);
  });

$("#sticky_item").stick_in_parent()

.on("sticky_kit:stick", function(e) {

console.log("has stuck!", e.target);

})

.on("sticky_kit:unstick", function(e) {

console.log("has unstuck!", e.target);

});

Sticky Kit

9. September 2016

jQuery Stuck it to them :)

A responsive sticky element plugin, designed to be used with Foundation, Bootstrap or your own css solution.

jQuery Stuck

4. September 2016

Simple overlay instructions for your apps – Chardin.js

Chardin.js is a jQuery plugin that creates a simple overlay to display instructions for certain elements on a page.

GitHub

23. August 2016

jQuery Scroll Indicator Bullets

jQuery plugin to create a scroll indicator bullet navigation on the right side of the screen. The plugin require Waypoints.

GitHub

19. August 2016

Elegant + responsive + flexible + lightweight = IZIMODAL

If you are looking for an elegant, responsive, flexible and lightweight jQuery modal solution, IZIMODAL might be the right solution for you :)

Default options:

$("#modal").iziModal({
    title: '',
    subtitle: '',
    headerColor: '#88A0B9',
    theme: '',  // light
    attached: '', // bottom, top
    icon: '',
    iconColor: '',
    width: 600,
    padding: 0,
    radius: 3,
    zindex: 999,
    iframe: false,
    iframeHeight: 400,
    iframeURL: null,
    focusInput: true,
    group: '',
    loop: false,
    navigateCaption: true,
    navigateArrows: true, // closeToModal, closeScreenEdge
    history: true,
    restoreDefaultContent: false,
    autoOpen: 0, // Boolean, Number
    bodyOverflow: false,
    fullscreen: false,
    openFullscreen: false,
    closeOnEscape: true,
    overlay: true,
    overlayClose: true,
    overlayColor: 'rgba(0, 0, 0, 0.4)',
    timeout: false,
    timeoutProgressbar: false,
    pauseOnHover: false,
    timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
    transitionIn: 'comingIn',
    transitionOut: 'comingOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onFullscreen: function(){},
    onResize: function(){},
    onOpening: function(){},
    onOpened: function(){},
    onClosing: function(){},
    onClosed: function(){}
});

$("#modal").iziModal({

title: '',

subtitle: '',

headerColor: '#88A0B9',

theme: '', // light

attached: '', // bottom, top

icon: '',

iconColor: '',

width: 600,

padding: 0,

radius: 3,

zindex: 999,

iframe: false,

iframeHeight: 400,

iframeURL: null,

focusInput: true,

group: '',

loop: false,

navigateCaption: true,

navigateArrows: true, // closeToModal, closeScreenEdge

history: true,

restoreDefaultContent: false,

autoOpen: 0, // Boolean, Number

bodyOverflow: false,

fullscreen: false,

openFullscreen: false,

closeOnEscape: true,

overlay: true,

overlayClose: true,

overlayColor: 'rgba(0, 0, 0, 0.4)',

timeout: false,

timeoutProgressbar: false,

pauseOnHover: false,

timeoutProgressbarColor: 'rgba(255,255,255,0.5)',

transitionIn: 'comingIn',

transitionOut: 'comingOut',

transitionInOverlay: 'fadeIn',

transitionOutOverlay: 'fadeOut',

onFullscreen: function(){},

onResize: function(){},

onOpening: function(){},

onOpened: function(){},

onClosing: function(){},

onClosed: function(){}

});

IZIMODAL

26. July 2016

jQuery Complexify – accurately inform users of password strength

“Complexify is implemented as a jQuery function that can be called on input fields. The function takes options and a callback that will be called with the results of the validation.

The valid argument passed to your callback function is a boolean that indicates whether the password met the minimum level of complexity. The complexity argument is a percentage where 100% represents a ‘very good’ password (approximately 25 random characters).”

Complexify

29. June 2016

Timedropper – select time with style

Timedropper allows you to select time with some style. Its a jQuery plugin and adding it is simple:

$( "#alarm" ).timeDropper();

1	$( "#alarm" ).timeDropper();

Timedropper

1. June 2016

TypeIt – The most versatile jQuery typing plugin on the planet.

“TypeIt is the most versatile, user-friendly jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.”

GitHub