Nifty

v2.9.1

Responsive Admin Template

Thank you very much for purchasing this theme.

Have a question ?

If you have any questions or issues that are beyond the scope of this documentation, please feel free to email us.

themeon.info [at] gmail.com

Change Logs

Improved	Nifty notifications plugin.
Updated	Bootstrap Datepicker to version 1.8.0
Updated	Bootstrap Table to version 1.12.1
Updated	Chosen to version 1.8.7
Updated	ClipboardJS to version 2.0.1
Updated	GaugeJS to version 1.3.6
Updated	jsTree to version 3.3.5
Updated	Masonry to version 4.2.1
Updated	MetisMenu to version 2.7.7
Updated	noUiSlider to version 11.1.0
Updated	Select2 to version 4.0.4
Updated	Summernote 0.8.10
Fixed	Navigation can not be closed on ios platform.
Fixed	The submenus issue does not open after switching navigation mode.
Fixed	Minor CSS issues.

New	202+ new premium line icons
New	202+ new premium solid icons
New	Full dark theme
New	Chat layout
New	Pricing table
New	Gallery plugins
New	12 Color schemes
New	Blog
New	Blog list
New	Blog details
New	Manage post
New	Add edit post
Improved	Dropdown
Improved	Move searchbox to the top navbar
Improved	Navigation menu for small screen device
Improved	Top navbar
Improved	Email UI
Improved	Panels
Improved	Added Magic check to the Nifty core style.
Fixed	Validation rules is not available in the scss/sass file.
Fixed	Aside clipped the bottom on a small screen device.
Fixed	Some issues when combination of boxed layout with fixed navigation.
Fixed	Minor CSS issues

New	540+ new premium line icons
New	540+ new premium solid icons
New	Dashboard 2
New	Dashboard 3
New	Fixedbar for outlook view
New	File Manager
New	User page
New	User page 2
New	Taskboard
New	Contact us page
New	CSS Animations page
New	Maintenance page
New	Liquid Fixed layout
New	Plugin CSS Spinners
New	Plugin Spinkit
New	Plugin jsTree
New	Plugin ClipboardJS
New	Plugin Match Height
New	Plugin Masonry
New	Plugin Flaq Icon CSS
New	Plugin Weather Icons
Improved	Charts pages
Improved	Profile page
Improved	Invoice page
Improved	Search Result page
Improved	FAQ page
Fixed	Full screen issue with Summernote.
Fixed	Minor CSS issues

Improved	Panel header with input group addon
Fixed	CSS-Preprocessors folder is missing
Fixed	Minor CSS issues

Improved	Web performance.
Improved	Checkboxes and radio components.
Improved	Select2 compatibility.
Improved	Chosen compatibility.
Improved	Bootstrap Select compatibility.
Updated	Select2 to version 4.0.4
Fixed	List-group-item disappears when hover
Fixed	Input-sm and Input-lg does not display the correct font size.
Fixed	Invoice page is not responsive on small screen device.
Fixed	Breadcrumb arrow does not show up properly.

Improved	Graphical user interface
Updated	Chosen to version 1.8.2
Updated	Summernote to version 0.8.8
Fixed	Small issue with form horizontal margins.
Fixed	Issue when aside on the left side.
Fixed	Minor CSS issues

New	210+ new premium line icons
New	210+ new premium solid icons
New	12 color schemes
Improved	Graphical user interface
Improved	Re-enable transition for small screen devices.
Improved	Override the button labeled styles
Improved	Navigation shortcut buttons
Updated	Bootstrap Select to version 1.12.4
Updated	Bootstrap Table to version 1.11.1
Updated	Chosen to version 1.7.0
Updated	Dropzone to version 5.1.1
Updated	GaugeJS to version 1.3.5
Updated	IonIcon to version 2.0.1
Updated	jQuery to version 3.2.1
Updated	IonIcon to version 2.0.1
Updated	noUi range scrollbar to version 10.1.0
Updated	Pace to version 0.7.8
Updated	Summernote to version 0.8.6
Fixed	Safari issue on the blank page.
Fixed	Safari issue with Megamenu plugin.
Fixed	Issue on Dropdown with color schemes.
Fixed	Minor CSS issues

Updated	Bootstrap Datepicker to version 1.7.1
Fixed	Issue with Bootstrap Datepicker
Fixed	Minor CSS issues

New	Invoice Page
New	Nestable List Plugin
Updated	Bootstrap to version 3.3.7
Updated	jQuery to version 3.1.1
Updated	AnimateCSS to version 3.5.2
Updated	Bootstrap Datepicker to version 1.6.4
Updated	Bootstrap Select to version 1.12.2
Updated	Chosen to version 1.6.2
Updated	Font Awesome to version 4.7.0
Updated	Gauge.js to version 1.3.2
Updated	Metismenu to version 2.7.0
Improved	Notification Page
Fixed	Issue with icons in navigation drawer not aligned
Fixed	Footer doesn't work properly in IE
Fixed	Issues with complex grid system
Fixed	MorrisJS styles issues

New	Profile picture in navigation bar
New	Boxed layout with background image
New	Floating Aside
New	Fixed Fluid Grid System
New	Toggle Switch Plugin
New	Magic Check Plugin
New	Select2 Plugin
New	Bootstrap Markdown
New	Email Templates
Updated	jQuery to version 2.2.4
Updated	Font Awesome to version 4.6.3
Updated	Metismenu to version 2.5.2
Updated	Pace to version 0.7.6
Updated	Animate.css to version 3.5.2
Improved	Web performance
Improved	Add more helper classes
Improved	GUI appearance to all elements
Improved	Increase Contrast of color schemes
Fixed	Incorrect brand size on the SASS/SCSS files
Fixed	IE keep showing nav badge although on the collapsed mode
Fixed	Issues when the animations are disabled.
Fixed	Prevent page scrolling when the navigation bar is fixed to the top

Improved	User Interface Design
Fixed	Issue with Datepicker initialization
Fixed	Minor CSS issues

New	Boxed Layout
New	IonIcon Plugin
New	Themify Plugin
New	2000+ Premium Icon Sets
Updated	jQuery to version 2.2.1
Updated	Bootstrap to version 3.3.6
Updated	Animate.css to version 3.5.1
Updated	FontAwesome to version 4.6.1
Updated	Datepicker Plugin
Updated	Bootstrap Select Plugin
Updated	Bootstrap Table Plugin
Updated	TagInput Plugin
Updated	Chosen Plugin
Updated	DropzoneJS Plugin
Updated	Summernote Plugin
Updated	Fastclick Plugin
Updated	Metismenu Plugin
Updated	NanoScroller Plugin
Updated	Pace Plugin
Updated	Switchery Plugin
Improved	UI and CSS transitions
Improved	Documentation

New	Support SASS and SCSS
New	Fully Layered and Editable Dashboard (PSD) file
Updated	FontAwesome to the latest version
Improved	User Interface Design
Fixed	Minor CSS issues

Improved	UI and CSS transitions
Improved	Documentation
Improved	Noftification plugin
Fixed	Navigation toggle button issue on mobile device
Fixed	Minor CSS issues

Improved	Documentation
Improved	Navigation with Ajax Support
Improved	Checkboxes and radio button components
Fixed	Initialization issues on some framework.

Improved	Remove Fade-in effect when a page has loaded
Fixed	Aside issue on small screen
Fixed	Minor CSS issues

Updated	Bootstrap to version 3.3.2
Updated	FontAwesome to version 4.3.0
New	Two column timeline
New	Static tables page
New	Bootstrap tables page
New	DataTables plugin
New	FooTable plugin
New	FullCalendar plugin
New	Maps plugin
New	9 new color schemes
Improved	UI and CSS transitions
Improved	Checkboxes and radio plugin
Improved	Megamenu plugin for touch devices
Improved	Fresh flat color schemes
Fixed	Issue with scrolling items on touch devices
Fixed	Minor CSS issue

New	Getting Started sample
Improved	Header GUI design
Improved	Plugin compatibility
Improved	Change folder structure and HTML code slightly
Updated	MetisMenu plugin
Updated	Switchery plugin
Updated	EasyPieChart plugin
Updated	Chosen plugin
Updated	Pace plugin
Updated	Datepicker plugin
Updated	MaskInput plugin
Updated	Bootstrap DataTable plugin
Fixed	Off-canvas navigation and aside issue

Improved	Add more widgets to Dashboard
Improved	Clean and fresh flat color schemes
Fixed	Collapsed navigation doesn't show menu sub-items on the iPad
Fixed	Minor CSS issue

Updated	Bootstrap to version 3.3.1
New	To-do List
New	New statistics widgets
New	User profile widgets
New	New weather Widgets
New	Pricing table
New	Megamenu Plugin
New	Layouts page
New	List group page
New	Progressbar Page
New	jQuery cookie
	- User can make best theme by mix the style and color
	- Remember user's favourite theme and apply it to all pages
Fixed	Speed improvements
Fixed	Progressbar with label
Fixed	Tab direction
Fixed	Minor bugs in design

Release

Initial release

Introduction

Nifty is is flat admin template for multi-purpose usage built with the latest version of Bootstrap v3.3.7.
Its main focus is simplicity while providing the most commonly used elements and widgets on web apps across devices and browsers, and it will be extended in the future updates with newer plugins and pages.

Getting Started

To get you started with Nifty theme, you should be familiar with Twitter Bootstrap. Start with this basic HTML template, or modify these examples.

Use Chrome Developer Tools (Chrome), Firebug (Firefox) or similar plugins to analyze the code. To get a deeper understanding of the code, open the HTML and JS files and read through the commented code.

Quick Tips

Mobile First
The default CSS styles work great in mobiles. The responsive CSS code alter the styles in larger resolutions.
ID and Class name
You may remove all ID or Class names which contain demo-, they are only used for demonstration.
Plugins
Feel free to remove the plugins you won't use (along with their style).
User Names
All user names used in the template are fictional and only used for demostration. They were randomly generated at uinames.com.

File and Folder Structure

Folder Name	What it Contains
Documentation	This documentation page with it's assets.
Get Started	Samples that will help you start developing.
Demo	Most of the main CSS, JavaScript and images.
css	Main CSS stylesheets.
demo	Stylesheet for demonstration purposes.
fonts	Font Awesome
img	Main images for demonstration purposes.
js	Main JavaScript files.
demo	Sample script for demonstration purposes.
LESS / SASS / SCSS	Pre-processing sources files for generating the CSS-files.
nifty	Complete layout and element-styling
themes	Folder that contains all the available color schemes.
plugins	JavaScript and partial images for all 3rd-party plugins.
premium	Contains our premium content free for use in your project. Please read carefully the license agreement!

LESS, SASS and SCSS Files

Files and Structure

less/nifty

Folder that contains all main styles of the template.

less/themes

Folder that contains all the available color themes. Each file contains predefined variables with the colors of each theme. A file can be imported in /less/nifty.less to change the active color theme by overwriting the default variables which are set in less/_variables.less.

less / _variables.less

This is the variables file. From here you can set various variables to easily change the colors or other template options.

less / nifty.less

This is the only Less file that needs to be included in the template since it imports all required files. Here you can import a separate color theme file from less/themes/ folder, to overwrite the default color variables and change the active color theme.

less / themes / {type} / {theme-name}.less

This is the themes file. It contains classes that can be used to alter the color, the background color or the border color of an element individually. It contains main colors of all the available themes.

Recompile LESS

First of all you should be aware of the structure from the LESS-file.

So you will see that whenever you change a file in less you must only recompile less/nifty.less because it imports all other files. Same with less/_variables.less. Save the compiled less as css/nifty.css.

INFO :

If you make changes directly in the CSS and/ or LESS-files from Nifty, it will be hard to update if we release an update.
So we would recommend to create a new CSS/ LESS-file for this purpose.

Color Themes

You must only recompile less/themes/type-*/*.less.
To create your own, simply copy-paste one of the existing, give it a new name and alter the colors to match your preference.

Template

All template files have a fixed structure consisting of navbar, mainnav and content,
while for aside and footer is just extra if you need it.

Initialization

Basically Nifty will automatically initialize all components automatically. But when you use some frameworks such AngularJS, MeteorJS or similar frameworks, sometimes the initialize does not work properly.

Please add the following code to fix the issue.

Javascript

...
...
// When app is fully loaded
$(document).trigger('nifty.ready');
...
...

Animation

There are several animations in Nifty admin template. Simply add class name effect in the #container, if necessary combined with transition function names.

To disable the animations in the navigation and sidebar, simply by removing the class .effect and the transition function names on the #container.

Transition function name	Class name
ease	`.effect`
easeInQuart	`.easeInQuart`
easeOutQuart	`.easeOutQuart`
easeInBack	`.easeInBack`
easeOutBack	`.easeOutBack`
easeInOutBack	`.easeInOutBack`
steps	`.steps`
jumping	`.jumping`
rubber	`.rubber`

INFO

Because there are many mobile devices with low hardware. We don't activate animations features on mobile devices.

Please have a look at the Animate.css, for animation on bootbox modal etc..

There are two options for the navbar : static and fixed to the top page. The default is static position.

Please add class .navbar-fixed to the #container to make it fixed to the top of page.

HTML

<body>
    <div id="container" class="navbar-fixed">
    ...
    ...
    </div>
</body>

Navigation

General Methods

JavaScript	Description
$.niftyNav('bind');	Bind or re-bind the navigation
$.niftyNav('refresh');	Refresh the navigation

Collapsing/Expanding Navigation

For small devices screen sizes, the navigation will only be visible if activated by the top right menu icon. This is especially handy for distraction-free mobile reading.

To start page with expanded navigation by default, just add class .mainnav-lg to #container, or .mainnav-sm to collapsed the navigation by default.

HTML

<body>
    <div id="container" class="mainnav-lg">
    ...
    ...
    </div>
</body>

Via JavaScript

Call the navigation plugin via JavaScript

$.niftyNav('collapse');

$.niftyNav('expand');

Toggle Method

Toggle the navigation via JavaScript. It will toggle between two states: collapsed and expanded.

$.niftyNav('colExpToggle');

Off Canvas Navigation

The navigation that responsively goes off canvas, similar to an app style menu also can be revealed in many creative ways. There are three mode of off-canvas navigation.

1. Push

The navigation will push page content to the right. Add class .mainnav-in to the #container to show the navigation or .mainnav-out to hide the navigation by default.

HTML

<body>
    <div id="container" class="mainnav-in push">
    ...
    ...
    </div>
</body>

Toggle Button

You can create a toggle button in your application by adding .mainnav-toggle.push as an class to the button without using any JavaScript.

<a href="#" class="btn mainnav-toggle push">Toggle Navigation</a>

<!-- OR -->

<button class="btn mainnav-toggle push">Toggle Navigation</button>

Via JavaScript

Switch between navigation mode via JavaScript

$.niftyNav('pushIn');

$.niftyNav('pushOut');

Toggle Method

Toggle the navigation via JavaScript. It will toggle between two states: push-in and push-out.

$.niftyNav('pushToggle');

2. Slide in on top

Add class .mainnav-in to the #container to show the navigation or .mainnav-out to hide the navigation by default.

HTML

<body>
    <div id="container" class="slide mainnav-in">
    ...
    ...
    </div>
</body>

Toggle Button

You can create a toggle button in your application by adding .mainnav-toggle.slide as an class to the button without using any JavaScript.

<a href="#" class="btn mainnav-toggle slide">Toggle Slide</a>

<!-- OR -->

<button class="btn mainnav-toggle slide">Toggle Slide</button>

Via JavaScript

Switch between navigation mode via JavaScript

$.niftyNav('slideIn');

$.niftyNav('slideOut');

Toggle Method

Toggle the navigation via JavaScript. It will toggle between two states: slide-in and slide-out.

$.niftyNav('slideToggle');

3. Reveal

Add class .mainnav-in to the #container to show the navigation or .mainnav-out to hide the navigation by default.

HTML

<body>
    <div id="container" class="reveal mainnav-in">
    ...
    ...
    </div>
</body>

Toggle Button

You can create a toggle button in your application by adding .mainnav-toggle.reveal as an class to the button without using any JavaScript.

<a href="#" class="btn mainnav-toggle reveal">Toggle Reveal</a>

<!-- OR -->

<button class="btn mainnav-toggle reveal">Toggle Reveal</button>

Via JavaScript

Switch between navigation mode via JavaScript

$.niftyNav('revealIn');

$.niftyNav('revealOut');

Toggle Method

Toggle the navigation via JavaScript. It will toggle between two states: reveal-in and reveal-out.

$.niftyNav('revealToggle');

Fixed Position

There are two options for the navigation position : static and fixed to the top page. The default is static position.
Static As you scroll down the site, so does the navigation. Fixed As you scroll down the site, the navigation stays fixed in place, so that it's always displaying, no matter where you are on the page.

Add class .mainnav-fixed to the #container it fixed to the top of page.

HTML

<body>
    <div id="container" class="mainnav-fixed">
    ...
    ...
    </div>
</body>

Via JavaScript

Switch the navigation position state via JavaScript

$.niftyNav('staticPosition');

$.niftyNav('fixedPosition');

Toggle Method

Toggle the navigation position via JavaScript. It will toggle between two states: fixed and static.

$.niftyNav('togglePosition');

Shortcuts

Shortcut buttons

Add more shortcut buttons to the navigation, it supports up to six buttons.

HTML

<div id="mainnav-shortcut">
    <ul class="list-unstyled shortcut-wrap">

        <!-- Shortcut buttton-->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <li class="col-xs-2" data-content="Button 1">
            <a class="shortcut-grid" href="#" >
                <div class="icon-wrap icon-wrap-sm icon-circle bg-trans-dark">
                    <i class="fa fa-music"></i>
                </div>
            </a>
        </li>

        <!-- Shortcut buttton-->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <li class="col-xs-2" data-content="Button 2">
            <a href="#" class="shortcut-grid">
                <div class="icon-wrap icon-wrap-sm icon-circle bg-trans-dark">
                    <i class="fa fa-star"></i>
                </div>
            </a>
        </li>

        <!-- Shortcut buttton-->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <li class="col-xs-2" data-content="Button 3">
            <a href="#" class="shortcut-grid">
                <div class="icon-wrap icon-wrap-sm icon-circle bg-trans-dark">
                    <i class="fa fa-video-camera"></i>
                </div>
            </a>
        </li>

        <!-- Shortcut buttton-->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <li class="col-xs-2" data-content="Button 4">
            <a href="#" class="shortcut-grid">
                <div class="icon-wrap icon-wrap-sm icon-circle bg-trans-dark">
                    <i class="fa fa-heart"></i>
                </div>
            </a>
        </li>

        <!-- Shortcut buttton-->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <li class="col-xs-2" data-content="Button 5">
            <a href="#" class="shortcut-grid">
                <div class="icon-wrap icon-wrap-sm icon-circle bg-trans-dark">
                    <i class="fa fa-user"></i>
                </div>
            </a>
        </li>

        <!-- Shortcut buttton-->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <li class="col-xs-2" data-content="Button 6">
            <a href="#" class="shortcut-grid">
                <div class="icon-wrap icon-wrap-sm icon-circle bg-trans-dark">
                    <i class="fa fa-lock"></i>
                </div>
            </a>
        </li>
    </ul>
</div>

You can put a small widget to the navigation.

HTML

<div class="mainnav-widget">
    <div class="show-small">
        <!-- Show the button/icon on the collapsed navigation -->
    </div>

    <div class="hide-small mainnav-widget-content">
        <!-- Widget content here -->
    </div>
</div>

Aside

General Methods

JavaScript	Description
$.niftyAside('bind');	Bind or re-bind the aside
$.niftyAside('refresh');	Refresh the aside

Visibility

The visibility function let you show or hide the aside.

HTML

<body>
    <div id="container" class="aside-in">
    ...
    ...
    </div>
</body>

Toggle Button

You can create a toggle button in your application by adding .aside-toggle as an class to the button without using any JavaScript.

<a href="#" class="btn aside-toggle">Toggle Aside</a>

<!-- OR -->

<button class="btn aside-toggle">Toggle Aside</button>

Via JavaScript

Switch between show/hide the Aside via JavaScript

$.niftyAside('show');

$.niftyAside('hide');

Toggle Method

Toggle the Aside via JavaScript. It will toggle between two states: hide and show.

$.niftyAside('toggleHideShow');

Aligned

Add class .aside-left to #container to show the aside on the left side.

HTML

<body>
    <div id="container" class="aside-left">
    ...
    ...
    </div>
</body>

Via JavaScript

Switch the Aside aligned via JavaScript

$.niftyAside('alignLeft');

$.niftyAside('alignRight');

Toggle Method

Toggle the aligned of Aside via JavaScript. It will toggle between : left and right.

$.niftyAside('toggleAlign');

Fixed Position

Add class .aside-fixed to #container for fixed position at top of page by default.

HTML

<body>
    <div id="container" class="aside-fixed">
    ...
    ...
    </div>
</body>

Via JavaScript

Switch the aside position state via JavaScript

$.niftyAside('fixedPosition');

$.niftyAside('staticPosition');

Toggle Method

Toggle the aligned of Aside via JavaScript. It will toggle between : static and fixed.

$.niftyAside('togglePosition');

Color Theme

Add class .aside-bright to #container to use the bright theme.

HTML

<body>
    <div id="container" class="aside-bright">
    ...
    ...
    </div>
</body>

Via JavaScript

Switch the aside color themes via JavaScript

$.niftyAside('brightTheme');

$.niftyAside('darkTheme');

Toggle Method

Toggle the color of Aside via JavaScript.

$.niftyAside('toggleTheme');

There are 2 options static and fixed. The default is static position. Add the class name .footer-fixed
to #container to make it fixed at the top of page.

HTML

<body>
    <div id="container" class="footer-fixed">
    ...
    ...
    </div>
</body>

UI Elements

General

Please have a look at the Bootstrap 3 documentation section "Buttons".

Extended Buttons

Colored

HTML

<button class="btn btn-mint">Mint</button>

<button class="btn btn-pink">Pink</button>

<button class="btn btn-purple">Purple</button>

<button class="btn btn-dark">Dark</button>

Rounded

HTML

<button class="btn btn-mint btn-rounded">Mint</button>

<button class="btn btn-pink btn-rounded">Pink</button>

<button class="btn btn-purple btn-rounded">Purple</button>

<button class="btn btn-dark btn-rounded">Dark</button>

Labeled

HTML

<button class="btn btn-primary btn-labeled icon-lg fa fa-shopping-cart">Primary</button>

<button class="btn btn-danger btn-labeled btn-rounded icon-lg fa fa-times">Danger</button>

Icon buttons

HTML

<button class="btn btn-success btn-icon icon-lg fa fa-star"></button>

<button class="btn btn-primary btn-icon btn-circle icon-lg fa fa-shopping-cart"></button>

Hover buttons

HTML

<button class="btn btn-default btn-hover-purple">Purple</button>

<button class="btn btn-default btn-hover-info btn-rounded">Info</button>

Pressed / Active Buttons

HTML

<button class="btn btn-default btn-active-success">Success</button>

<button class="btn btn-default btn-active-pink btn-rounded">Pink</button>

Exclusive Plugin

Nifty Scroll to top

Adds a "scroll to top" button to the bottom corner of the page if the page has been scrolled down. It allows users to smoothly scroll back to the top of the page.

Just create a new button with class .scroll-top

HTML

<button class="scroll-top btn">
    <i class="fa fa-chevron-up"></i>
</button>

<!-- OR -->
<!--Use our PURE CSS Icon-->

<button class="scroll-top btn">
    <i class="pci-chevron chevron-up"></i>
</button>

Nifty Panel Removal

This is the plugin to remove panel by clicking on the close button.
Add data-dismiss="panel" to your close button to automatically give a panel close functionality.

Panel Title

Panel body

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Panel Title

Panel body

Panel Title

Panel body

HTML

<div class="panel">
    <!-- Panel Heading -->
    <div class="panel-heading">
        <div class="panel-control">
            <!-- Close Button -->
            <button class="btn btn-default" data-dismiss="panel">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <h3 class="panel-title">Panel Title</h3>
    </div>


    <!-- Panel body -->
    <div class="panel-body">
        <!-- Content here -->
    </div>
</div>

Nifty Overlay

Create a button with data-target="#yourTargetID" and initialize the button via javascript.

Live Example 1

Show in this panel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

Live Example 2

HTML

<button id="myButton" data-target="#targetID" class="btn" autocomplete="off">
    Button Title
</button>

JavaScript

$('#myButton').niftyOverlay().on('click', function(){
    $(this).niftyOverlay('show');

    //Do something....

    if("success"){
        $(this).niftyOverlay('hide');
    }
});

With Custom Title and description

Content Title

Javascript

$('#myButton').niftyOverlay({
    title: 'Loading...'
});


$('#myButton').niftyOverlay({
    title: 'Loading...',
    desc: 'Please wait while the content is load.'
});

Coloring the Icon

Content Title

Javascript

$('#myButton').niftyOverlay({
    iconColor: 'text-danger'
});


$('#myButton').niftyOverlay({
    iconColor: 'text-purple'
});

Custom Icon & Animation

Content Title

Javascript

$('#myButton').niftyOverlay({
    iconClass: 'fa fa-paint-brush fa-3x animated infinite wobble'
});


$('#myButton').niftyOverlay({
    iconClass: 'fa fa-heart fa-3x animated infinite rubberBand'
});

Nifty Notification

Options

Name	Type	Default	Description
type	string	primary	The type of notification. Example `primary` `info` `success` `warning` `danger` `mint` `purple` `pink` `dark`
icon	string	null	Icon class names
title	string	null	The title of notification
message	string	null	The message of notification
closeBtn	boolean	true	Show or hide the close button.
container	string	page	This option is particularly useful in that it allows you to position the notification. Example : `page` `floating` `"specified target name"`
floating: { position }	string	top-right	Floating position. `top-right`, `top-center`, `top-left`, `center-right`, `center-center`, `center-left`, `bottom-right`, `bottom-center`, `bottom-left`
floating: { animationIn }	string	jellyIn	Apply a CSS animation to the notification
floating: { animationOut }	string	fadeOut	Apply a CSS animation to the notification
html	string	null	Insert HTML into the notification. If false, jQuery's text method will be used to insert content into the DOM.
focus	boolean	true	Scroll to the notification.
timer	Number	0	To enable the "auto close" notofication, please specify the time to show the notification before it closed. Value is in milliseconds. (0 to disable the autoclose.)

Floating

The notifications will appear as floating messages at the top of your screen.

Javascript

$.niftyNoty({
    type: "success",
    container : "floating",
    title : "You have've got 30 Messages",
    message : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
    closeBtn : false,
    timer : 5000
});

Page Alert

The notifications will appear at the top of your page.

Javascript

$.niftyNoty({
    type: 'danger',
    icon : 'fa fa-bolt fa-2x',
    container : 'page',
    title : 'Server Load Limited',
    message : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'
});

Penel Alert

The notifications will appear at the top of your selected panels.

Panel Title

Panel body

Javascript

$.niftyNoty({
    type: 'info',
    container : '#targetID',
    html : '<h4 class="alert-title">Oh snap! You got an error!</h4><p class="alert-message">Change this and that and try again. Duis mollis, est non commodo luctus.</p><div class="mar-top"><button type="button" class="btn btn-info" data-dismiss="noty">Close this notification</button></div>',
    closeBtn : false
});

Events

Nifty's Notification class exposes a few events for hooking into alert functionality.

Event Type	Description
onShow	This event fires immediately when the show instance method is called.
onShown	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
onHide	This event is fired immediately when the hide instance method has been called.
onHidden	This event is fired when the notification has finished being hidden from the user (will wait for CSS transitions to complete).

Live example

Javascript

// onShow
$.niftyNoty({
    type: 'purple',
    container : 'floating',
    title : 'onShow Callback',
    message : 'This event fires immediately when the show instance method is called.',
    closeBtn : false,
    timer : 2000,
    onShow:function(){
        alert("onShow Callback");
    }
});



// onShown
$.niftyNoty({
    type: 'danger',
    container : 'floating',
    title : 'onShown Callback',
    message : 'This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).',
    closeBtn : false,
    timer : 2000,
    onShown:function(){
        alert("onShown Callback");
    }
});



// onHide
$.niftyNoty({
    type: 'warning',
    container : 'floating',
    title : 'onHide Callback',
    message : 'This event is fired immediately when the hide instance method has been called.',
    closeBtn : false,
    timer : 2000,
    onHide:function(){
        alert("onHide Callback");
    }
});



// onHidden
$.niftyNoty({
    type: 'info',
    container : 'floating',
    title : 'onHidden Callback',
    message : 'This event is fired when the notification has finished being hidden from the user (will wait for CSS transitions to complete).',
    closeBtn : false,
    timer : 2000,
    onHidden:function(){
        alert("onHidden Callback");
    }
});

Nifty Check Deprecated

INFO :

Unfortunately plugins are not developed anymore since it is not working properly on some frameworks.

Deprecated in Nifty v2.8, removed in Nifty v3.0

ALTERNATIVE :

Please use "MAGIC CHECK" as an alternative that we have developed for the better.

Check the demo at DEMO > FORMS-GENERAL.HTML