Velocity animations
Animation /velocity/
Overview

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, it mimics jQuery's $.queue(), and thus interoperates seamlessly with jQuery's $.animate(), $.fade(), and $.delay(). Since Velocity's syntax is identical to $.animate(), your code doesn't need to change.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/velocity/velocity.min.js"></script>

<!-- Load Velocity UI -->
<script type="text/javascript" src="assets/js/plugins/velocity/velocity.ui.min.js"></script>

Call the plugin via JavaScript:

// Chaining example
$element
    .velocity({ width: 75 }) // Animate the width property
    .velocity({ height: 0 }); // Then, when finished, animate the height property


// Per-Property Easing
$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
    width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics
    height: "100px" // Defaults to easeInSine, the call's default easing
}, {
    easing: "easeInSine" // Default easing
});


// Animation Delay
$element.velocity({
    height: "+=10em"
}, {
    loop: 4,
    delay: 100 // Wait 100ms before alternating back
});
Velocity.js documentation

Complete Velocity.js documentation can be found online on Official library website. It's quite big, actually the whole website is a documentation with examples. Follow the right sidebar to navigate the options, commands and features. Also check out UI Pack documentation. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Velocity.js library.

Plugin info
Property Description
File name velocity.min.js, velocity.ui.js
Location assets/js/plugins/velocity/
Updates 0
Links

Official plugin website

Full documentation

Github project page
Prism syntax highlighter
Typo prism.min.js
Overview

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. Allows you to define new languages or extend existing ones, add new features thanks to Prism’s plugin architecture. Language classes are inherited so you can only define the language once for multiple code snippets.

Core features:

  • Only 2KB minified & gzipped (core). Each language definition adds roughly 300-500 bytes.
  • Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, like <pre> (on its own) or <script>. Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.
  • The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.
  • Supports parallelism with Web Workers, if available. Disabled by default
  • Very easy to extend without modifying the code, due to Prism’s plugin architecture. Multiple hooks are scattered throughout the source.
  • Very easy to define new languages. Only thing you need is a good understanding of regular expressions
  • All styling is done through CSS, with sensible class names rather than ugly namespaced abbreviated nonsense.
  • Wide browser support: IE9+, Firefox, Chrome, Safari, Opera, most Mobile browsers
  • Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
  • Highlights inline code as well, not just code blocks
  • Highlights nested languages (CSS in HTML, JavaScript in HTML
  • It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
  • Highlight specific lines and/or line ranges (requires plugin)
  • Show invisible characters like tabs, line breaks etc (requires plugin)
  • Autolink URLs and emails, use Markdown links in comments (requires plugin)
Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/ui/prism.min.js"></script>

Prism does its best to encourage good authoring practices. Therefore, it only works with <code> elements, since marking up code without a <code> element is semantically invalid. According to the HTML5 spec, the recommended way to define a code language is a language-xxxx class, which is what Prism uses. To make things easier however, Prism assumes that this language definition is inherited. Therefore, if multiple <code> elements have the same language, you can add the language-xxxx class on one of their common ancestors. This way, you can also define a document-wide default language, by adding a language-xxxx class on the <body> or <html> element.

<!-- Code inside Pre element -->
<pre><code class="language-css">p { color: red }</code></pre>

If you want to opt-out of highlighting for a <code> element that is a descendant of an element with a declared code language, you can add the class language-none to it (or any non-existing language, really).

If you want to prevent any elements from being automatically highlighted, you can use the attribute data-manual on the <script> element you used for prism and use the API. Example:

<!-- Disable highlight -->
<script src="prism.js" data-manual></script>
Prism.js documentation

Complete Prism.js documentation can be found online on Official library website. It's quite big, with a lot of options, events and customization options. Also check out plugins made for Prism.js, supported languages or make your own build. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Prism.js library.

Plugin info
Property Description
File name prism.min.js
Location assets/js/plugins/ui/
Updates 0
Links

Official plugin website

Full documentation

Build your own

Github project page
Moment
Extensions /ui/moment/
Overview

A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates. Moment was designed to work both in the browser and in Node.js. Currently the following browsers are used for the ci system: IE8, IE9 on Windows 7, stable Chrome on Windows XP, Safari 10.8 on Mac and stable Firefox on Linux.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/ui/moment/moment.min.js"></script>

<!-- Or load with included locales -->
<script type="text/javascript" src="assets/js/plugins/ui/moment/moment_locales.min.js"></script>
Format dates
// Format dates example
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 21st 2015, 1:31:51 am
moment().format('dddd');                    // Monday
moment().format("MMM Do YY");               // Sep 21st 15
moment().format('YYYY [escaped] YYYY');     // 2015 escaped 2015
moment().format();                          // 2015-09-21T01:31:51+02:00
Relative Time
// Relative time example
moment("20111031", "YYYYMMDD").fromNow(); // 4 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
moment().startOf('day').fromNow();        // 2 hours ago
moment().endOf('day').fromNow();          // in a day
moment().startOf('hour').fromNow();       // 33 minutes ago
Calendar Time
// Calendar time example
moment().subtract(10, 'days').calendar(); // 09/11/2015
moment().subtract(6, 'days').calendar();  // Last Tuesday at 1:33 AM
moment().subtract(3, 'days').calendar();  // Last Friday at 1:33 AM
moment().subtract(1, 'days').calendar();  // Yesterday at 1:33 AM
moment().calendar();                      // Today at 1:33 AM
moment().add(1, 'days').calendar();       // Tomorrow at 1:33 AM
moment().add(3, 'days').calendar();       // Thursday at 1:33 AM
moment().add(10, 'days').calendar();      // 10/01/2015
Multiple Locale Support
// Multiple locale support example
moment().format('L');    // 09/21/2015
moment().format('l');    // 9/21/2015
moment().format('LL');   // September 21, 2015
moment().format('ll');   // Sep 21, 2015
moment().format('LLL');  // September 21, 2015 1:33 AM
moment().format('lll');  // Sep 21, 2015 1:33 AM
moment().format('LLLL'); // Monday, September 21, 2015 1:33 AM
moment().format('llll'); // Mon, Sep 21, 2015 1:33 AM
Moment.js documentation

Complete Moment.js documentation can be found online on Official library website. It's quite big, with a lot of options, events and customization options. Also check out plugins made for Moment.js. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Moment.js library.

Plugin info
Property Description
File name moment.min.js, moment_locales.min.js
Location assets/js/plugins/ui/moment/
Updates 0
Links

Official plugin website

Full documentation

Github project page
Touch punch
Extensions touch_punch.min.js
Overview

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

Usage

First off we're going to need to load the dependencies. This plugin requires jQuery and jQuery UI to function correctly:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load jQuery UI -->
<script type="text/javascript" src="assets/js/core/libraries/jquery_ui/full.min.js"></script>

<!-- Load extension -->
<script type="text/javascript" src="assets/js/plugins/sliders/touch_punch.js"></script>

Just use jQuery UI as expected and watch it work at the touch of a finger:

// Initialization
$('#widget').draggable();
Plugin info
Property Description
File name touch_punch.min.js
Location assets/js/plugins/sliders/
Updates 0
Links

Official plugin website

Github project page
jQuery UI slider pips
Sliders slider_pips.min.js
Overview

Plugin to add "pips" or "floats" to a jQuery UI Slider. This plugin extends the jQuery UI Slider widget. Use it for creating a nicely-styled slider.

Usage

First off we're going to need to load the dependencies. This plugin requires jQuery and jQuery UI to function correctly:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load jQuery UI -->
<script type="text/javascript" src="assets/js/core/libraries/jquery_ui/full.min.js"></script>

<!-- Load extension -->
<script type="text/javascript" src="assets/js/plugins/sliders/slider_pips.js"></script>

Add element with attributes:

<!-- Add DIV element -->
<div class="slider"></div>

Call the plugin via JavaScript:

// Both pips and floats
$(".slider").slider().slider("pips").slider("float");
Plugin options

It is possible to supply configuration options to the pips plugin, this allows some basic way to control how the pips/floats are handled.

A list of all the options available on the pips method:

Option Values Default Description
first "label", "pip" or false "label" Determines the style of the first pip on the slider
last "label", "pip" or false "label" Determines the style of the final pip on the slider
rest "label", "pip" or false "pip" Determines the style of all other pips on the slider
step number 1 / 5% The step parameter will only generate every nth pip. eg: If we set step: 2, then we will only get the values: 0, 2, 4, 6, 8... generated. Note: if the slider has a value over 100, step is set to 5% of the value
labels array, object or false false Will override the values of the pips with an array of given values
prefix string "" Adds a string value before the pip label. eg: prefix: $ => $1, $2, $3, $4, ...
suffix string "" Adds a string value after the pip label. eg: suffix: °c => 1°c, 2°c, 3°c, 4°c, ...

A list of all the options available on the float method:

Option Values Default Description
handle boolean true Determines if the float effect should appear on the slider handle
pips boolean false Determines if the float effect should appear on the pips
labels array, object or false false Will override the values of the floats with an array of given values
prefix string "" Adds a string value before the float label. eg: prefix: $ => $1, $2, $3, $4, ...
suffix string "" Adds a string value after the float label. eg: suffix: °c => 1°c, 2°c, 3°c, 4°c, ...
Styling

The plugin makes great use of presentation classes to provide powerful customisation. It's important the slider fits the unique style of your project, and with slight CSS modification you can get some really interesting results. To make the code as succinct and performant as possible; there's only minimal javascript configuration on how the pips are displayed, positioned, formatted, etc. Instead the power lies in the hands of CSS:

// List of the presentation classes used in a heirarchical tree
.ui-slider.ui-slider-pips  {}
.ui-slider-float {}
    .ui-slider-handle {}
        .ui-slider-tip {}
    .ui-slider-pip {}
    .ui-slider-pip-first {}
    .ui-slider-pip-last {}
    .ui-slider-pip-nth {}
    .ui-slider-pip-label {}
    .ui-slider-pip-hide {}
        .ui-slider-line {}
        .ui-slider-label {}
        .ui-slider-tip-label {}
    .ui-slider-pip-selected-initial {}
    .ui-slider-pip-selected {}
Plugin info
Property Description
File name slider_pips.min.js
Location assets/js/plugins/sliders/
Updates 0
Links

Official plugin website

Github project page
Pace page loader
Loader pace.min.js
Overview

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

Usage

Include the following lines of code in the <head> section of your HTML:


<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/loaders/pace.min.js"></script>

Add one of presented Pace themes to components.less file and re-compile CSS:

// Pace page loader (default theme)
@import "components/pace/default.less";

Pace is fully automatic, no configuration is necessary to get started. If you would like to make some tweaks, here's how:

// Pace options
paceOptions = {

	// Disable the 'elements' source
	elements: false,

	// Only show the progress on regular and ajax-y page navigation,
	// not every request
	restartOnRequestAfter: false
}
Plugin collectors

Collectors are the bits of code which gather progress information. Pace includes four default collectors:

Collector Description
Ajax Monitors all ajax requests on the page
Elements Checks for the existance of specific elements on the page
Document Checks the document readyState
Event Lag Checks for event loop lag signaling that javascript is being executed

They can each be configured or disabled through configuration options of the same name. Add your own classes to paceOptions.extraSources to add more sources. Each source should either have a .progress property, or a .elements property which is a list of objects with .progress properties. Pace will automatically handle all scaling to make the progress changes look smooth to the user.

// Pace options
paceOptions = {
	ajax: false, // disabled
	document: false, // disabled
	eventLag: false, // disabled
	elements: {
		selectors: ['.my-page']
	}
};
Elements

Elements being rendered to the screen is one way for us to decide that the page has been rendered. If you would like to use that source of information (not required at all), specify one or more selectors. You can comma seperate the selectors to propertly handle error states, where the progress bar should disappear, but the element we are looking for may never appear:

// Pace options
paceOptions = {
	elements: {
		selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
	}
}

Pace will consider the elements test successful when each selector matches something. For this example, when either .timeline or .timeline-error exist, and either .user-profile or .profile-error exist.

Restart rules

Most users want the progress bar to automatically restart when a pushState event occurs (generally means ajax navigation is occuring). You can disable this:

// Pace options
paceOptions = {
	restartOnPushState: false
}

You can also have pace restart on every ajax request which lasts longer than x ms. You'll want to disable this if you make ajax requests the user doesn't need to know about, like precaching:

// Pace options
paceOptions = {
	restartOnRequestAfter: false
}

You can always trigger a restart manually by calling Pace.restart()

Plugin API

Pace exposes the following methods:

Option Description
Pace.start Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS
Pace.restart Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically whenever pushState or replaceState is called by default
Pace.stop Hide the progress bar and stop updating it
Pace.track Explicitly track one or more requests
Pace.ignore Expliticly ignore one or more requests
Plugin events

Pace fires the following events:

Option Description
start When pace is initially started, or as a part of a restart
stop When pace is manually stopped, or as a part of a restart
restart When pace is restarted (manually, or by a new AJAX request)
done When pace is finished
hide When the pace is hidden (can be later than done, based on ghostTime and minTime)
Plugin info
Property Description
File name pace.min.js
Location assets/js/plugins/loaders/
Updates 0
Links

Official plugin website

Full documentation

Github project page
BlockUI
Loader blockui.min.js
Overview

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

  • fetch resources from server
  • fetch each resource file individually (static) or all once via dynamicRoute
  • apply translation to HTML tags with the data-i18n attribute
  • post missing key-value pairs to server (for easy development -> just translate the new keys)
  • search for key en-US first, then in en, then in fallback language (or de-DE, de , fallback)
Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/loaders/blockui.min.js"></script>

To block user activity for the page:

// Initialization
$.blockUI();

Blocking with a custom message:

// Initialization
$.blockUI({
	message: '<h1><img src="busy.gif" /> Just a moment...</h1>'
});

Blocking with custom style:

// Initialization
$.blockUI({
	css: {
		backgroundColor: '#f00',
		color: '#fff'
	}
});

To unblock the page:

// Initialization
$.unblockUI();

If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this:

// Initialization
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
Plugin options
Option Default Description
message '<h1>Please wait...</h1>' Message displayed when blocking (use null for no message)
title null Title string; only used when theme == true
draggable true Only used when theme == true (requires jquery-ui.js to be loaded)
theme false Set to true to use with jQuery UI themes
css {...} Styles for the message when blocking; if you wish to disable these and use an external stylesheet then do this in your code
themedCSS width, top, left Minimal style set used when themes are used
overlayCSS backgroundColor, opacity, cursor Styles for the overlay
cursorReset 'default' Style to replace wait cursor before unblocking to correct issue of lingering wait cursor
growlCSS {} Styles applied when using $.growlUI
forceIframe false Force usage of iframe in non-IE browsers (handy for blocking applets)
baseZ 1000 z-index for the blocking overlay
centerX true Set to true to have the message automatically centered horizontally
centerY true Set to true to have the message automatically centered vertically
allowBodyStretch true Allow body element to be stetched in ie6; this makes blocking look better on "short" pages. Disable if you wish to prevent changes to the body height
bindEvents true Enable if you want key and mouse events to be disabled for content that is blocked
constrainTabKey true Be default blockUI will supress tab navigation from leaving blocking content (if bindEvents is true)
fadeIn 200 fadeIn time in millis; set to 0 to disable fadeIn on block
fadeOut 400 fadeOut time in millis; set to 0 to disable fadeOut on unblock
timeout 0 Time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
showOverlay true Disable if you don't want to show the overlay
focusInput true If true, focus will be placed in the first available input field when page blocking
onBlock null Callback method invoked when fadeIn has completed and blocking message is visible
onUnblock null Callback method invoked when unblocking has completed; the callback is passed the element that has been unblocked (which is the window object for page blocks) and the options that were passed to the unblock call
blockMsgClass 'blockMsg' Class name of the message block
ignoreIfBlocked false If it is already blocked, then ignore it (don't unblock and reblock)
Plugin info
Property Description
File name blockui.min.js
Location assets/js/plugins/loaders/
Updates 0
Links

Official plugin website

Full documentation

Github project page
i18next
Translation i18next.min.js
Overview

i18next is a full-featured i18n javascript library for translating your webapplication. Project goal is to provide an easy way to translate a website on clientside:

  • fetch resources from server
  • fetch each resource file individually (static) or all once via dynamicRoute
  • apply translation to HTML tags with the data-i18n attribute
  • post missing key-value pairs to server (for easy development -> just translate the new keys)
  • search for key en-US first, then in en, then in fallback language (or de-DE, de , fallback)
Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/internationalization/i18next.min.js"></script>

Create elements:

<!-- Create elements -->
<ul class="nav">
	<li><a href="#" data-i18n="nav.home"></a></li>
	<li><a href="#" data-i18n="nav.page1"></a></li>
	<li><a href="#" data-i18n="nav.page2"></a></li>
</ul>

Load resource file:

// JSON or any other file
{
	"app": {
		"name": "i18next"
	},
	"nav": {
		"home": "Home",
		"page1": "Page One",
		"page2": "Page Two"
	}
}

Finally call the plugin via JavaScript:

// Basic initialization
i18n.init(function(err, t) {

	// translate nav
	$(".nav").i18n();

	// programatical access
	var appName = t("app.name");
});
i18next options and documentation
Full i18next documentation can be found online on Official library website. It's quite big, with a lot of options, events and methods. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to i18next library.
Plugin info
Property Description
File name i18next.min.js
Location assets/js/plugins/internationalization/
Updates 0
Links

Official plugin website

Full documentation

Github project page
Session timeout
Tool session_timeput.min.js
Overview

After a set amount of idle time, a Bootstrap warning dialog is shown to the user with the option to either log out, or stay connected. If "Logout" button is selected, the page is redirected to a logout URL. If "Stay Connected" is selected the dialog closes and the session is kept alive. If no option is selected after another set amount of idle time, the page is automatically redirected to a set timeout URL.

Idle time is defined as no mouse, keyboard or touch event activity registered by the browser.

As long as the user is active, the (optional) keep-alive URL keeps getting pinged and the session stays alive. If you have no need to keep the server-side session alive via the keep-alive URL, you can also use this plugin as a simple lock mechanism that redirects to your lock-session or log-out URL after a set amount of idle time.

Usage

To use session timeout extension, include path to the minified plugin file:

<!-- Path to file -->
<script type="text/javascript" src="assets/js/plugins/extensions/session_timeout.min.js"></script>

Example of initialization as a session timeout:

// Session timeout
$.sessionTimeout({
    heading: 'h5',
    title: 'Session Timeout',
    message: 'Your session is about to expire. Do you want to stay connected?',
    ignoreUserActivity: true,
    warnAfter: 10000,
    redirAfter: 30000,
    keepAliveUrl: '/',
    redirUrl: 'login_unlock.html',
    logoutUrl: 'login_advanced.html'
});

Example of initialization as an idle timeout:

// Idle timeout
$.sessionTimeout({
    heading: 'h5',
    title: 'Idle Timeout',
    message: 'Your session is about to expire. Do you want to stay connected?',
    warnAfter: 5000,
    redirAfter: 15000,
    keepAliveUrl: '/',
    redirUrl: 'login_unlock.html',
    logoutUrl: 'login_advanced.html'
});
Options
Option Default Description
title 'Your session is about to expire!' This is the text shown to user via Bootstrap warning dialog after warning period. (modal title)
message 'Your session is about to expire.' This is the text shown to user via Bootstrap warning dialog after warning period
ignoreUserActivity false If true, this will launch the Bootstrap warning dialog / redirect (or callback functions) in a set amounts of time regardless of user activity
logoutButton 'Logout' This is the text shown to user via Bootstrap warning dialog after warning period in the logout button
keepAliveButton 'Stay Connected' This is the text shown to user via Bootstrap warning dialog after warning period in the Keep Alive button
keepAliveUrl '/keep-alive' URL to ping via AJAX POST to keep the session alive. This resource should do something innocuous that would keep the session alive, which will depend on your server-side platform
keepAlive true If true, the plugin keeps pinging the keepAliveUrl for as long as the user is active. The time between two pings is set by the keepAliveInterval option. If you have no server-side session timeout to worry about, feel free to set this one to false to prevent unnecessary network activity
keepAliveInterval 5000 Time in milliseconds between two keep-alive pings
ajaxType 'POST' If you need to specify the ajax method
ajaxData '' If you need to send some data via AJAX POST to your keepAliveUrl, you can use this option
redirUrl '/timed-out' URL to take browser to if no action is take after the warning
logoutUrl '/log-out' URL to take browser to if user clicks "Logout" on the Bootstrap warning dialog
warnAfter 900000 (15min) Time in milliseconds after page is opened until warning dialog is opened
redirAfter 1200000 (20min) Time in milliseconds after page is opened until browser is redirected to redirUrl
countdownSmart false If true, displays minutes as well as seconds in the countdown timer (e.g. "3m 14s"). Displays only seconds when timer is under one minute (e.g. "42s")
countdownMessage false If you want a custom sentence to appear in the warning dialog with a timer showing the seconds remaining, use this option. Example: countdownMessage: 'Redirecting in {timer}.' Place the {timer} string where you want the numeric countdown to appear
countdownBar false If true, ads a countdown bar (uses Bootstrap progress bar) to the warning dialog. Can be combined with countdownMessage option or used independently
onStart false Optional callback fired when first calling the plugin and every time user refreshes the session (on any mouse, keyboard or touch action). Takes options object as the only argument
onWarn false Custom callback you can use instead of showing the Bootstrap warning dialog. Takes options object as the only argument
onRedir false Custom callback you can use instead of redirecting the user to redirUrl. Takes options object as the only argument
Plugin info
Property Description
File name session_timeout.min.js
Location assets/js/plugins/extensions/
Updates 0
Links Github project page
Bootstrap context menu
Extension contextmenu.js
Overview

A context menu extension of Bootstrap made for everyone's convenience. Supports all possible dropdown components included to the template: headers, submenus, icons, checkboxes, radios, dividers, color options etc. Besides dropdown options, includes a bunch of extended options and events.

Usage

Context menu can be initialized via data attributes or Javascript. To initialize it via data attributes, add data-toggle="context" to any element that needs a custom context menu and via CSS set position: relative to the element. And point data-target attribute to your custom context menu:

<!-- Data attributes initialization -->
<div class="context" data-toggle="context" data-target="#context-menu">
	...
</div>

Call the context menu via JavaScript:

// Javascript initialization
$('.context').contextmenu({
	target: '#context-menu', 
	before: function(e,context) {
		// execute code before context menu if shown
	},
	onItem: function(context,e) {
		// execute on menu item selection
	}
});
Options
Option Description
target Equivalent of the data-target attribute. It identifies the html of the menu that will be displayed
scopes DOM selector for dynamically added context elements
before Function that is called before the context menu is displayed. If this function returns false, the context menu will not be displayed. It is passed two parameters:
(before) e The original event. (You can do an e.preventDefault() to cancel the browser event)
(before) context The DOM element where right click occured
onItem Function that is called when a menu item is clicked. Useful when you want to execute a specific function when an item is clicked. It is passed two parameters:
(onItem) context the DOM element where right click occured
(onItem) e the click event of the menu item, $(e.target) is the item element
Events

All events are fired at the context's menu. Check out dropdown plugin for a complete description of events. Usage example:

// "Show" event example
$('#myMenu').on('show.bs.context', function () {
	// do something...
});

Events list:

Event Description
show.bs.context This event fires immediately when the menu is opened
shown.bs.context This event is fired when the dropdown has been made visible to the user
hide.bs.context This event is fired immediately when the hide instance method has been called
hidden.bs.context This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete)
Plugin info
Property Description
File name contextmenu.js
Location assets/js/plugins/extensions/
Updates 0
Links

Demonstration

Github project page
Bootstrap Hover dropdown
Extension hover_dropdown.min.js
Overview

A simple plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

The dropdowns are dismissed after a configurable delay. This fixes an issue that can instantly close your nav because of a 1px gap between the button/nav item that activated the dropdown and the actual dropdown. It is also generally a better user experience, as users are not punished by going 1 pixel outside of the dropdown, which would instantly close the nav without a delay.

Note: The HTML markup is the same as with any other Bootstrap dropdown. This will not interfere with Bootstrap's default activate-on-click method (i.e. this plugin combined with Bootstrap's default behavior work well to support both the ideal experience on desktop and mobile).

Usage

Just like in Bootstrap you can activate it without any JavaScript, just by adding a data-attribute, you can make it automatically work. Add data-hover="dropdown" in addition (or in place of) Bootstrap's data-toggle="dropdown". You can set options via data-attributes, too, via data-delay and data-close-others.

<!-- Markup initialization -->
<ul class="dropdown-menu" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
	<li>...</li>
</ul>

Alternatively, you can initialize via JavaScript:

// jQuery initialization
$(document).ready(function () {
    $('.dropdown-toggle').dropdownHover(options);
});

This also works with submenus without any other configuring since Bootstrap already supports this feature. Just use the markup like you were using before. Only the top level anchor tag needs any special markup for my plugin to work.

Options
Option Value Description
delay 500 The delay in miliseconds. This is the time to wait before closing a dropdown when the mouse is no longer over the dropdown or the button/nav item that activated it. Defaults to 500.
hoverDelay 0 A delay before opening in miliseconds. Some people argue this improves user experience as it decreases the number of accidental menu openings. Defaults to 0.
instantlyCloseOthers true A boolean value that when true, will instantly close all other dropdowns matched by the selector used when you activate a new navigation. This is nice for when you have dropdowns close together that may overlap. Default is true.
Plugin info
Property Description
File name contextmenu.js
Location assets/js/plugins/extensions/
Updates 0
Links

Official plugin website

Github project page
Bootpag - dynamic pagination
Pagination bootpag.min.js
Overview

This jQuery plugin helps you create dynamic pagination with Bootstrap or in any other html pages.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/pagination/bootpag.min.js"></script>

Add elements:

<!-- Markup -->
<div id="content">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>

Call the plugin via JavaScript:

// Basic initialization
$('#page-selection').bootpag({
    total: 10
}).on("page", function(event, /* page number here */ num){
     $("#content").html("Insert content"); // some ajax content loading...
});
Plugin options
Option Default Description
total - function
maxVisible - function
page - function
leaps - function
next » function
prev « function
href javascript:void(0); function
hrefVariable {{number}} function
firstLastUse true function
first 'FIRST' function
last 'LAST' function
wrapClass 'pagination' function
activeClass 'active' function
disabledClass 'disabled' function
nextClass 'next' function
prevClass 'prev' function
lastClass 'last' function
firstClass 'first' function
Plugin info
Property Description
File name bootpag.min.js
Location assets/js/plugins/pagination/
Updates 0
Links

Official plugin website

Github project page
TWBS pagination
Pagination bs_pagination.min.js
Overview

This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes: .pagination (you change this one), .active and .disabled.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/pagination/bs_pagination.min.js"></script>

Add elements:

<!-- Dynamic content -->
<div class="well content-group twbs-content-default text-left">
	Dynamic content here.
</div>

<!-- Pagination -->
<ul class="pagination-sm twbs-default"></ul>

Call the plugin via JavaScript:

// Basic initialization
$('.twbs-default').twbsPagination({
    totalPages: 35,
    visiblePages: 4,
    prev: 'Prev',
    first: null,
    last: null,
    onPageClick: function (event, page) {
        $('.twbs-content-default').text('Page ' + page);
    }
});
Plugin options

Options explanation and default values:

Option Default Description
totalPages required, checked The number of pages
startPage 1 The current page that show on start
visiblePages 5 Maximum visible pages
href false Template for pagination links
hrefVariable {{number}} Variable name in href template for page number
first 'First' Text label
prev 'Previous' Text label
next 'Next' Text label
last 'Last' Text label
loop false Carousel-style pagination
paginationClass 'pagination' The root style for pagination component. You can use this option to apply your own style
Plugin info
Property Description
File name bs_pagination.min.js
Location assets/js/plugins/pagination/
Updates 0
Links

Official plugin website

Github project page