Dialog Start tour

eCountdown

The countdown plugin with a couple of options, you can set the format, show it as live, show 1 or 2 digits and run a callback function after completion.

Basic

Easy to use countdown plugin.

How to use

How to use HTML elements.

Markup
<div class="countdownid"></div>

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#countdownid').eCountdown({
    targetDate: '12/31/2012 9:09 PM',
    displayFormat: '%D% Days, %H% Hours, %M% Minutes, %S% Seconds.',
    liveTime: true,
    showZero: true,
    callback:function(){}
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
targetDate string %D% Days, %H% Hours, %M% Minutes, %S% Seconds. The time format. 1.0
displayFormat string swing The animation effect. This works only if animation is set to true. 1.0
liveTime boolean true Show the time realtime, or if you set it to false show the remaining time if the browsers gets refreshed. 1.0
showZero boolean true Display values below 9 always as 2 digets, so 3 becomes 03. 1.0
callback function function(){} Run a callback function once the countdown is done. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eProgressbar

This plugin allows you to show a simple progressbar, animated or static.

Basic

Easy to use progressbars.

How to use

How to use HTML elements.

Markup
<div id="progressbar-id">
	<div class="e-progressbar" data-progressbar-value="50" data-progressbar-color="#ffffff"></div>  
</div>

Loop

Easy to use progressbars.

How to use

How to use HTML elements.

Markup
<div id="progressbar-id">
	<div class="e-progressbar" data-progressbar-value="50" data-progressbar-color="#ffffff"></div> 
    <div class="e-progressbar" data-progressbar-value="14" data-progressbar-color="#f00ddf"></div> 
    <div class="e-progressbar" data-progressbar-value="86" data-progressbar-color="#ff00ff"></div>  
</div>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

HTML5 data attributes Element Example Desctription Since
data-progressbar-value e-progressbar The size of the bar, example: 50 = 50%. 1.0
data-progressbar-color e-progressbar The color of the bar, this must be an hex color(#ffffff). Notice it has no default color. 1.0

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
e-progressbar div Main progressbar class. 1.0
e-progressbar-small div Class for a small progressbar. Use this with the main progressbar class. 1.0
e-progressbar-big div Class for a big progressbar. Use this with the main progressbar class. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$("#progressbar-id").eProgressbar({
    animate: true,
    easing: '',
    loop: true,
    delay: 400,
    showTotal: true,
    speed: 2000,
    after: function(){}
});	

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
animate boolean true Animate the progressbar. 1.0
easing effects swing The animation effect. This works only if animation is set to true. 1.0
loop boolean true Animate each progressbar seperate and not all at once. This works only if animation is set to true and only if you have more than one progressbar in the id wrapper. 1.0
delay number(integer) 500 Delay between animations. 1.0
showTotal boolean true Show the value in the progressbar. 1.0
speed number(integer) 2000 The speed of the animation. 1.0
after function function(){} Run a callback function once every progressbar is done. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

eScrollbar

An easy way to create box with a custom scrollbar.

Basic

Simple scrollbar box.

How to use

How to use HTML elements.

Markup
<div id="iddiv">
content goed here
</div>

Usage plugin

How to use our custom made jQuery plugins.

Markup
$("#iddiv).eScrollbar();

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
This plugin has no options.

Pre Loaders

Preloader images. Can be used on most background colors. More than 60 preloaders available.

Pre Loaders

Preloader images.

How to use

How to use HTML elements.

Markup
<img src="images/loaders/type2/dark/24.gif" alt=""/>
<img src="images/loaders/type3/light/16.gif" alt=""/>

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

Tooltips

Use tooltips as little helpers.

This is a third party plugin, for information about how to use this plugin and examples please visit this site.