First of all i want to thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
There are 5 main folders with files and HTML files.
CSS folder contains all css files, including folder "Font" with Font Awesome files
Img folder contains all images, sorted by type and place of usage
JS folder contains all js files: charts settings, functions files and all js plugins
PHP folder contains php files (plugin connector mostly).
ckeditor folder contains all CKEditor files. It should be in the root folder.
In general there are 26 main theme .html files:
All these html files have certain html blocks in their source code. All the html blocks are clearly commented out and should be easy to spot. The main structure of a typical 2 columns page would be:

...

...

...

...

Pannonia template has fully responsive layout - it means that it was adapted for different screen resolutions and mobile devices.
Pannonia is available in 2 columns layout version only. On small screens sidebar is hidden by default. To Show or Hide sidebar you need to click on the button on the top menu. When sidebar is visible, content part is hidden with hidden horizontal overflow. After resizing to 1025px and more, sidebar becomes visible without hidden overflow.
Please note, that all sidebar widgets are visible on any screen size. To hide some of them you'll need to add an additional class and set necessary rule in media queries.
Pannonia contains 3 types of icons: Font Awesome font, FamFam font and default Bootstrap Glyphicons. Default usage is:
 // Glyphicons dark  // Glyphicons white  // Font awesome dark  // FamFam icons
There are 6 .php files included to the package:
In upload.php file you can set folder for uploaded files. All PHP files are well commented so just follow those tips to setup theme features for your needs.
<?php $opts = array( // 'debug' => true, 'roots' => array( array( 'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED) 'path' => '/home/kopyov/public_html/', // path to files (REQUIRED) 'URL' => 'http://kopyov.com/', // URL to files (REQUIRED) 'accessControl' => 'access' // disable and hide dot starting files (OPTIONAL) ) ) ); ?>
Full list of options you can find here
| root | String | Path to root directory. Required parameter |
| URL | String | URL of root directory. Required parameter |
| rootAlias | String | Alias for root directory |
| disabled | Array | List of disabled commands |
| dotFiles | Boolean | Show dot files. Default: true |
| dirSize | Boolean | Calculate directory sizes |
| fileMode | Octal | mode for new files |
| dirMode | Octal | mode for new directories |
| mimeDetect | String | MIME-type detection method (possible values: finfo, php, linux (file -ib), bsd (file -Ib), internal (based on file extensions)) |
| uploadAllow | Array | List of mime-types allowed to upload. Can be set exactly image/jpeg or to group application |
| uploadDeny | Array | List of mime-types disallowed to upload |
| uploadOrder | String | Order of upload rules execution. allow,deny only what is allowed, except what is disallowed (AND). deny,allow what is not disallowed or allowed (OR) |
| imgLib | String | Library for thumbnail creation (possible values: imagick, mogrify, gd). If not set will try detect automatically |
| tmbDir | String | Thumbnail direcroty. If not set thumbnails will be disabled |
| tmbCleanProb | Integer | How often to clean thumbnails. Possible values: from 0 to 200. 0 - never, 200 - on each client init request |
| tmbAtOnce | Integer | How many thumbnails to create per background request. Default: 5 |
| tmbSize | Integer | Thumbnail size in pixels |
| fileURL | Boolean | Show real URLs to files in client. Default: true |
| dateFormat | String | Time format. Default: j M Y H:i |
| logger | Object | Object-logger |
| defaults | Array | Default access for files/directories. Default: array( 'read' => true, 'write' => true, 'rm' => true ) |
| perms | Array | Permission for files/directories. More information on this page |
| archiveMimes | Array | List of file archives allowed to create. If not set will allow all detected archvies |
| archivers | Array | Information about archivers. If not set will try detect all available |
| debug | Boolean | Send debug information to client |
In total there are 9 css files:
main.css file imports all alternative stylesheets, so you don't need to include all .css files in each HTML page, simply add/remove necessary line in main.css (first lines):
/*===== Import css files =====*/ @import "plugins.css"; @import "font-awesome.css"; @import "fam-icons.css"; @import "icons.css"; @import "jquery.custom.css"; @import "elfinder.css";
and inside HTML page include only one main file:
Pannonia includes media queries, it means that general layout changes general look depending on the screen resolution.
All media query styles are placed into main.css at the bottom
All CSS files are well commented, so you can easily find and edit any class in any CSS file. If you don't want to use responsive layout, delete all media queries and don't forget to remove
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />from HTML files, this line prevents scaling in mobile device browsers.
All tables in the template are responsive, it works this way - all tables should be wrapped by

...
and on small screens all tables will have horizontal scrolling inside block and white-space: nowrap; applied to table cells.
In total there are 54 JS files:
And 3 .js files (jQuery library, Jquery UI and Google maps) loads from external resource:

In general each HTML page loads 30+ .js files. In your project you can minify all these files into 1 or do whatever you want, but in download package i included all files so you can easily edit/remove/add new files. And depending on the page you can include prettify.js file and mousewheel.js file, they don't have any functions in functions.js file, so i didn't include them to all pages
Each JS file is in proper folder: all files, which are used for forms are placed in /forms/ folder, the same path is in HTML page:

These files need to be included only in charts.html page:

Javascript files which contain jQuery Flot parameters load only on those pages, which have a graph. There is a well known flot issue with plot drawing, when parameters are loaded, but the chart isn't included in the page:

List of Jquery plugins which were used in Pannonia theme, with details:
This plug-in allows you to "transfer" the <option> elements between the <select>s in two distinct ways:
The following table has a listing of all the possible option settings, their default values, their valid values, and a brief description of each.
| Parameter | Default Value | Values | Description |
|---|---|---|---|
| box1View | 'box1View' | Any valid HTML id string. | The id attribute of the first visible <select> element. |
| box1Storage | 'box1Storage' | Any valid HTML id string. | The id attribute of the first hidden <select> element. (See section Document Structure for an explanation of visible/hidden <select> elements.) |
| box1Filter | 'box1Filter' | Any valid HTML id string. | The id attribute of the textbox used to filter the first<select> element. |
| box1Clear | 'box1Clear' | Any valid HTML id string. | The id attribute of the element used to clear the filter for the first <select> element. This is typically a button, but can technically be any element. |
| box1Counter | 'box1Counter' | Any valid HTML id string. | The id attribute of the element used to display counts of visible/total <option>s in the first <select>element. (used when filtering). |
| box2View | 'box2View' | Any valid HTML id string. | The id attribute of the second visible <select>element. |
| box2Storage | 'box2Storage' | Any valid HTML id string. | The id attribute of the second hidden <select>element. |
| box2Filter | 'box2Filter' | Any valid HTML id string. | The id attribute of the textbox used to filter the second<select> element. |
| box2Clear | 'box2Clear' | Any valid HTML id string. | The id attribute of the element used to clear the filter for the second <select> element. This is typically a button, but can technically be any element. |
| box2Counter | 'box2Counter' | Any valid HTML id string. | The id attribute of the element used to display counts of visible/total <option>s in the second <select>element. (used when filtering). |
| to1 | 'to1' | Any valid HTML id string. | The id attribute of the element used to transfer only selected <option>s from the second <select> to the first. |
| to2 | 'to2' | Any valid HTML id string. | The id attribute of the element used to transfer only selected <option>s from the first <select> to the second. |
| allTo1 | 'allTo1' | Any valid HTML id string. | The id attribute of the element used to transfer ALL<option>s from the second <select> to the first. |
| allTo2 | 'allTo2' | Any valid HTML id string. | The id attribute of the element used to transfer ALL<option>s from the first <select> to the second. |
| transferMode | 'move' | 'move','copy' | The type of transfer to perform on moved items. See section Transfer Modes for a full description of each. |
| sortBy | 'text' | 'text','value' | The value to sort <option> elements by. 'text' causes them to sort alphanumerically (ascending) by the visible text of the option. 'value' causes them to sort alphanumerically (ascending) by their 'value' attribute. |
| useFilters | true | true,false | True to enable filtering, false to disable it. If this setting is false, it is recommended that useCounters also be set to false, as the counters will not serve a purpose. |
| useCounters | true | true,false | True to enable counters, false to disable them. |
| useSorting | true | true,false | Sorting enforces a consistent sort order on the<option> elements, regardless of what order they are transferred in. Set this to false if you do not want them to (or do not care if they) maintain a consistent order. |
| selectOnSubmit | true | true,false | In order for options in box 2 to be recieved by POST, they must be selected before the form is submitted. Since this is most often the desired behavior, it is enabled by default. Set this option to false to disable. |
Note: Original documentation for this plugin you can find on official plugin's website: http://www.meadmiracle.com/dlb/DLBDocumentation.aspx
jquery.timepicker is a lightweight timepicker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.5kb minified and gzipped. Default markup:
 <input value="5:00pm" class="ui-timepicker-input" type="text">

12:00am

12:30am
 ...
4:30pm

5:00pm

5:30pm
 ...
11:30pm

className A class name to apply to the HTML element that contains the timepicker dropdown. default: null
minTime The time that should appear first in the dropdown list. default: 12:00am
maxTime The time that should appear last in the dropdown list. Can be used to limit the range of time options. default: 24 hours after minTime
showDuration Shows the relative time for each item in the dropdown. minTime or durationTime must be set. default: false
durationTime The time against which showDuration will compute relative times. default: minTime
step The amount of time, in minutes, between each item in the dropdown. default: 30
timeFormat How times should be displayed in the list and input element. Uses PHP's date() formatting syntax. default: 'g:ia'
scrollDefaultNow If no time value is selected, set the dropdown scroll position to show the current time. default: false
selectOnBlur Update the input with the currently highlighted time value when the timepicker loses focus. default: false
appendTo Override where the dropdown is appended. Takes either a string to use as a selector, a function that gets passed the clicked input element as argument or a jquery object to use directly default: "body"
lang Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs. default: { decimal: '.', mins: 'mins', hr: 'hr', hrs: 'hrs' }
Note: Original documentation for this plugin you can find on official plugin's website: http://jonthornton.github.com/jquery-timepicker/
The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps. The plugin is unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form; depending on the user input.
For options and parameters please visit official plugin website.
Note: Original documentation for this plugin you can find on official plugin's website: http://thecodemine.org/
Add color picker to field or to any other element.

 <input type="text" class="span2" value="" >

| Event | Description |
|---|---|
| show | This event fires immediately when the color picker is displayed. |
| hide | This event is fired immediately when the color picker is hidden. |
| changeColor | This event is fired when the color is changed. |
Note: Original documentation for this plugin you can find on official plugin's website: http://www.eyecon.ro/bootstrap-colorpicker/
DataTables operates on the principle of progressive enhancement, whereby an enhanced and interactive table will be presented to the end user if their browser has the required capabilities. When you initialise the jQuery.dataTable object, information about the table is read directly from the HTML page. In combination with the default values for the features in DataTables, this makes it very easy to integrate directly into your web-site or web-application. Optionally, you can use the initialisation parameters to load data from locations other than the DOM, such as a server-side processing script or an Ajax obtained JSON file.
By default the majority of features that DataTables provides are enabled, such that a richly interactive table is presented to end users. However, you may wish to disable various features to customise DataTables to your specific application. This is possible using the following initialisation parameters.
| bAutoWidth |
Enable or disable automatic column width calculation. This can be disabled as an optimisation (it takes some time to calculate the widths) if the tables widths are passed in using aoColumns. |
| bDeferRender |
Deferred rendering can provide DataTables with a huge speed boost when you are using an Ajax or JS data source for the table. This option, when set to true, will cause DataTables to defer the creation of the table elements for each row until they are needed for a draw - saving a significant amount of time. |
| bFilter |
Enable or disable filtering of data. Filtering in DataTables is "smart" in that it allows the end user to input multiple words (space separated) and will match a row containing those words, even if not in the order that was specified (this allow matching across multiple columns). Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use sDom. |
| bInfo |
Enable or disable the table information display. This shows information about the data that is currently visible on the page, including information about filtered data if that action is being performed. |
| bJQueryUI |
Enable jQuery UI ThemeRoller support (required as ThemeRoller requires some slightly different and additional mark-up from what DataTables has traditionally used). |
| bLengthChange |
Allows the end user to select the size of a formatted page from a select menu (sizes are 10, 25, 50 and 100). Requires pagination (bPaginate). |
| bPaginate |
Enable or disable pagination. |
| bProcessing |
Enable or disable the display of a 'processing' indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries. |
| bScrollInfinite |
Enable infinite scrolling for DataTables (to be used in combination with sScrollY). Infinite scrolling means that DataTables will continually load data as a user scrolls through a table, which is very useful for large dataset. This cannot be used with pagination, which is automatically disabled. |
| bSort |
Enable or disable sorting of columns. Sorting of individual columns can be disabled by the "bSortable" option for each column. |
| bSortClasses |
Enable or disable the addition of the classes 'sorting_1', 'sorting_2' and 'sorting_3' to the columns which are currently being sorted on. This is presented as a feature switch as it can increase processing time (while classes are removed and added) so for large data sets you might want to turn this off. |
| bStateSave |
Enable or disable state saving. When enabled a cookie will be used to save table display information such as pagination information, display length, filtering and sorting. As such when the end user reloads the page the display display will match what thy had previously set up. |
| sScrollX |
Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable x-scrolling to show the table in a viewport, which can be scrolled. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement). |
| sScrollY |
Enable vertical scrolling. Vertical scrolling will constrain the DataTable to the given height, an enable scrolling for any data which overflows the current viewport. This can be used as an alternative to paging to display a lot of data in a small area (although paging and scrolling can both be enabled at the same time). This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement). |
Where the DataTables features can be considered rough grain tuning of your DataTables integration, there are many other parameters which will let you obtain the fine grain tuning you might need to make the integration truly seamless. Almost every function that DataTables provides can be fine tuned in some manner using the initialisation options shown below.
| aaData |
An array of data to use for the table, passed in at initialisation which will be used in preference to any data which is already in the DOM. This is particularly useful for constructing tables purely in Javascript, for example with a custom Ajax call. |
| aaSorting |
If sorting is enabled, then DataTables will perform a first pass sort on initialisation. You can define which column(s) the sort is performed upon, and the sorting direction, with this variable. The aaSorting array should contain an array for each column to be sorted initially containing the column's index and a direction string ('asc' or 'desc'). |
| aaSortingFixed | This parameter is basically identical to the aaSorting parameter, but cannot be overridden by user interaction with the table. What this means is that you could have a column (visible or hidden) which the sorting will always be forced on first - any sorting after that (from the user) will then be performed as required. This can be useful for grouping rows together. |
| aLengthMenu |
This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled. It can be either a 1D array of options which will be used for both the displayed option and the value, or a 2D array which will use the array in the first position as the value, and the array in the second position as the displayed options (useful for language strings such as 'All'). |
| aoSearchCols |
Basically the same as oSearch, this parameter defines the individual column filtering state at initialisation time. The array must be of the same size as the number of columns, and each element be an object with the parameters "sSearch" and "bEscapeRegex" (the latter is optional). 'null' is also accepted and the default will be used. |
| asStripClasses |
An array of CSS classes that should be applied to displayed rows. This array may be of any length, and DataTables will apply each class sequentially, looping when required. |
| bDestroy |
Replace a DataTable which matches the given selector and replace it with one which has the properties of the new initialisation object passed. If no table matches the selector, then the new DataTable will be constructed as per normal. |
| bRetrieve |
Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables (setting this parameter to true is an acknowledgement that you understand this). bDestroy can be used to reinitialise a table if you need. |
| bScrollCollapse | When vertical (y) scrolling is enabled, DataTables will force the height of the table's viewport to the given height at all times (useful for layout). However, this can look odd when filtering data down to a small data set, and the footer is left "floating" further down. This parameter (when enabled) will cause DataTables to collapse the table's viewport down when the result set will fit within the given Y height. |
| bSortCellsTop |
Allows control over whether DataTables should use the top (true) unique cell that is found for a single column, or the bottom (false - default). This is useful when using complex headers. |
| iCookieDuration |
Duration of the cookie which is used for storing session information. This value is given in seconds. |
| iDeferLoading |
When enabled DataTables will not make a request to the server for the first page draw - rather it will use the data already on the page (no sorting etc will be applied to it), thus saving on an XHR at load time. iDeferLoading is used to indicate that deferred loading is required, but it is also used to tell DataTables how many records there are in the full table (allowing the information element and pagination to be displayed correctly). |
| iDisplayLength |
Number of rows to display on a single page when using pagination. If feature enabled (bLengthChange) then the end user will be able to over-ride this to a custom setting using a pop-up menu. |
| iDisplayStart |
Define the starting point for data display when using DataTables with pagination. Note that this parameter is the number of records, rather than the page number, so if you have 10 records per page and want to start on the third page, it should be "20". |
| iScrollLoadGap |
The scroll gap is the amount of scrolling that is left to go before DataTables will load the next 'page' of data automatically. You typically want a gap which is big enough that the scrolling will be smooth for the user, while not so large that it will load more data than need. |
| oSearch |
This parameter allows you to have define the global filtering state at initialisation time. As an object the "sSearch" parameter must be defined, but the "bRegex" and "bSmart" parameters are optional. When "bRegex" is true, the search string will be treated as a regular expression, when false (default) it will be treated as a straight string. When "bSmart" DataTables will use it's smart filtering methods (to word match at any point in the data), when false this will not be done. |
| sAjaxDataProp |
By default DataTables will look for the property 'aaData' when obtaining data from an Ajax source or for server-side processing - this parameter allows that property to be changed. You can use Javascript dotted object notation to get a data source for multiple levels of nesting. |
| sAjaxSource |
You can instruct DataTables to load data from an external source using this parameter (use aData if you want to pass data in you already have). Simply provide a url a JSON object can be obtained from. This object must include the parameter 'aaData' which is a 2D array with the source data. |
| sCookiePrefix |
This parameter can be used to override the default prefix that DataTables assigns to a cookie when state saving is enabled. |
| sDom | This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:
|
| sPaginationType |
DataTables features two different built-in pagination interaction methods ('two_button' or 'full_numbers') which present different page controls to the end user. Further methods can be added using the API (see below). |
| sScrollXInner | This property can be used to force a DataTable to use more width than it might otherwise do when x-scrolling is enabled. For example if you have a table which requires to be well spaced, this parameter is useful for "over-sizing" the table, and thus forcing scrolling. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement). |
Note: Original documentation for this plugin you can find on official plugin's website: http://datatables.net/
| Option | Description | Values (default) |
|---|---|---|
| animate | Makes content panels fade out and in when a new tab is clicked. | true, false (true) |
| animationSpeed | Controls the speed of the fading effect if animate: true. | "slow", "normal", "fast", integer in milliseconds ("normal") |
| cache v2.3 |
Caches the content retrieved for ajax tabs after the first request, such that subsequent tab clicks only hide/show the content. | true, false (true) |
| collapsedByDefault v2.1 |
Makes tabs collapsed by default (when the page is loaded) if collapsible: true. Note that ifdefaultTab is specified, then collapsedByDefault defaults to false. | true, false (true) |
| collapsedClass v2.1 |
Adds specified class to tab when panel is collapsed. Only works for collapsible: true. | any class name string ("collapsed") |
| collapsible v2.1 |
Makes panels collapse and un-collapse if active tab is clicked repeatedly. | true, false (false) |
| containerClass v2.3.4 |
Adds class(es) to the container on instantiation. | String of desired CSS classes separated by spaces ("") |
| cycle v1.1.2 |
Turns on automatic cycling through tabs, with the specified cycling interval in milliseconds. | false, integer in milliseconds (false) |
| defaultTab | Selects the
 tab to activate when page first loads. | any single jquery selector e.g. "li:first-child" or "li#tab-2" ("li:first-child") |
| panelActiveClass | Adds specified class to the currently-selected content
 | any class name string e.g. "active" or "selected" ("active") |
| panelClass v2.3.4 |
Adds class(es) to each panel element on instantiation. | String of desired CSS classes separated by spaces ("") |
| panelContext v3.1.1 |
Context in which to search for panels matching tabs. | jQuery object ($container - i.e. tab container on which easytabs was called) |
| tabActiveClass | Adds specified class to the currently-selected tab
 (and it's descendants). | any class name string e.g. "active"or "selected" ("active") |
| tabsClass v2.3.4 |
Adds class(es) to the tab container on instantiation. | String of desired CSS classes separated by spaces ("") |
| tabClass v2.3.4 |
Adds class(es) to each tab on instantiation. | String of desired CSS classes separated by spaces ("") |
| tabs v1.1.2 |
The container element for your tabs, relative to the container element that easyTabs was applied to. | any jquery selector referencing your collection of tabs e.g. "ul#tabs > li" or "div#tab-container > span" ("> ul > li", which selects the top-level
|
| transitionIn v2.2 |
The jQuery effect used to show the target panel when a tab is selected. | 'fadeIn', 'slideDown' ('fadeIn') |
| transitionInEasing v3.1 |
The jQuery easing speed for the transitionIn animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin | 'swing', 'linear' ('swing') |
| transitionOut v2.2 |
The jQuery effect used to hide the visible panel when a tab is selected. | 'fadeOut', 'slideUp' ('fadeOut') |
| transitionOutEasing v3.1 |
The jQuery easing speed for the transitionOut animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin | 'swing', 'linear' ('swing') |
| transitionCollapse v2.2 |
The jQuery effect used to collapse the panel if collapsible: true. | 'fadeOut', 'slideUp', 'hide' (slideUp) |
| transitionCollapseEasing v3.1 |
The jQuery easing speed for the transitionCollapse animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin | 'swing', 'linear' ('swing') |
| transitionUncollapse v2.2 |
The jQuery effect used to un-collapse the panel if collapsible: true. | 'fadeIn', 'slideDown', 'show' (slideDown) |
| transitionUncollapseEasing v3.1 |
The jQuery easing speed for the transitionUncollapse animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin | 'swing', 'linear' ('swing') |
| updateHash v1.1.2 |
Tells easyTabs whether or not to update the browser window's URL hash, useful for SEO and bookmarking. | true, false (true) |
| uiTabs v2.1 |
Automatically uses class names and defaults of jQuery UI tabs, making it easy to switch from jQuery-UI tabs without needing to change any HTML or CSS styles. | true, false (false) |
Note: Original tutorial you can find here: http://os.alfajango.com/easytabs/
elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. As you can see its creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.
The main goal of our file manager - is to make you work with remote files the same convenient, as on your computer.
You can select files the usual way as on your computer and then just drag them to desired folder to move.
If you prefer to use "hot keys" then you will not notice any difference using elFinder.
Furthermore elFinder can create and extract archives, and QuickLook function allows you to preview common types of files like images, flash, text, audio, video and even pdf.
It allows to create and edit any text files and resize images.
Flexible configuration options allows to control: access rights, upload files types, log user evens; so everything that need system administrator.
Connectors in different programming languages gives ability to easy integrate our product in your solutions.
Note: Original documentation for this plugin you can find on official plugin's website: http://elrte.org/elfinder/
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.
The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvasJavascript emulation helper is used for IE < 9).
Just include the Javascript file after you've included jQuery. Generally, all browsers that support the HTML5 canvas tag are supported.
For support for Internet Explorer < 9, you can use Excanvas - a canvas emulator; this is used in the examples bundled with Flot. You just include the excanvas script like this:
If it's not working on your development IE 6.0, check that it has support for VML which Excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support.You can also try using Flashcanvas (see http://code.google.com/p/flashcanvas/), which uses Flash to do the emulation. Although Flash can be a bit slower to load than VML, if you've got a lot of points, the Flash version can be much faster overall. Flot contains some wrapper code for activating Excanvas which Flashcanvas is compatible with.
Create a placeholder div to put the graph in:

You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:

You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).
$.plot($("#placeholder"), data, options);Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the reference in the file "API.txt". Here's a quick example that'll draw a line from (0, 0) to (1, 1):
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });The plot function immediately draws the chart and then returns a plot object with a couple of methods.
Please visit official website of Flot plugin for more detailed documentation
Note: Original documentation for this plugin you can find on official plugin's website: http://code.google.com/p/flot/
A plugin to enable automatic height for textarea elements.
| Property | Default | Description |
|---|---|---|
| className | 'autosizejs' | The className property is used to specify a class for the mirrored element, in case it's necessary to explicitly set a style on the mirrored element (see the note about line-height below). |
| append | '' | For appending whitespace to the end of the height calculation (an extra newline improves the apperance when animating). Example $('.textarea').autosize({append: "\n"}); |
| callback | false | A function to call when the textarea is resized. |
// Example: $(document).ready(function(){ $('textarea').autosize(); });
Note: Original documentation for this plugin you can find on official plugin's website: http://www.jacklmoore.com/autosize
Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
Add data attributes to register an element with inputmask functionality as shown in the example above.
Via JavascriptCall the input mask via javascript:
$('.inputmask').inputmask()
Note: Original documentation for this plugin you can find on official plugin's website: http://jasny.github.com/bootstrap/javascript.html#inputmask
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
$(document).ready(function() { /* This is basic - uses default settings */ $("a#single_image").fancybox(); /* Using custom settings */ $("a#inline").fancybox({ 'hideOnContentClick': true }); /* Apply fancybox to multiple items */ $("a.group").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false }); });
| Key | Default value | Description |
|---|---|---|
| padding | 10 | Space between FancyBox wrapper and content |
| margin | 20 | Space between viewport and FancyBox wrapper |
| opacity | false | When true, transparency of content is changed for elastic transitions |
| modal | false | When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false' |
| cyclic | false | When true, galleries will be cyclic, allowing you to keep pressing next/back. |
| scrolling | 'auto' | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no' |
| width | 560 | Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' |
| height | 340 | Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' |
| autoScale | true | If true, FancyBox is scaled to fit in viewport |
| autoDimensions | true | For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results |
| centerOnScroll | false | When true, FancyBox is centered while scrolling page |
| ajax | { } | Ajax options Note: 'error' and 'success' will be overwritten by FancyBox |
| swf | {wmode: 'transparent'} | Params to put on the swf object |
| hideOnOverlayClick | true | Toggle if clicking the overlay should close FancyBox |
| hideOnContentClick | false | Toggle if clicking the content should close FancyBox |
| overlayShow | true | Toggle overlay |
| overlayOpacity | 0.3 | Opacity of the overlay (from 0 to 1; default - 0.3) |
| overlayColor | '#666' | Color of the overlay |
| titleShow | true | Toggle title |
| titlePosition | 'outside' | The position of title. Can be set to 'outside', 'inside' or 'over' |
| titleFormat | null | Callback to customize title area. You can set any html - custom image counter or even custom navigation |
| transitionIn, transitionOut | 'fade' | The transition type. Can be set to 'elastic', 'fade' or 'none' |
| speedIn, speedOut | 300 | Speed of the fade and elastic transitions, in milliseconds |
| changeSpeed | 300 | Speed of resizing when changing gallery items, in milliseconds |
| changeFade | 'fast' | Speed of the content fading while changing gallery items |
| easingIn, easingOut | 'swing' | Easing used for elastic animations |
| showCloseButton | true | Toggle close button |
| showNavArrows | true | Toggle navigation arrows |
| enableEscapeButton | true | Toggle if pressing Esc button closes FancyBox |
| onStart | null | Will be called right before attempting to load the content |
| onCancel | null | Will be called after loading is canceled |
| onComplete | null | Will be called once the content is displayed |
| onCleanup | null | Will be called just before closing |
| onClosed | null | Will be called once FancyBox is closed |
Note: Original documentation for this plugin you can find on official plugin's website: http://fancybox.net/home
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Installation of Uniform is quite simple. First, make sure you have jQuery 1.3+ installed. Then you'll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page:
 <link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen" charset="utf-8" />
Using Uniform can be quite easy as well. Simply call:
$(function(){ $("select").uniform(); });
To "uniform" all possible form elements, just do something like this:
$("select, input:checkbox, input:radio, input:file").uniform();
You can pass in extra parameters to control certain aspects of Uniform. To pass in parameters, use syntax like this:
$("select").uniform({ param1: value, param2: value, param3: value });
Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:
Remember to change the CSS classes in the theme if you change the parameters for elements' classes. This can be tedious work, but if you don't do it, it's not going to look correct. Find and Replace is your friend.
Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in Javascript or using a Reset button of some kind remember to call $.uniform.update(); to sync the changes with Uniform.
Uniform is disabled in IE6. It's not possible to fix due to the way IE6 handles form elements. If you care about IE6 users, give it a quick look to make sure your "naked" form elements look alright in there.
You're on your own for styling text inputs and more. Fortunately, things that are not handled by Uniform are pretty easy to skin. :)
Note: Original advanced documentation for this plugin you can find on official plugin's website: http://uniformjs.com/#docs
Each plupload instance has a set of config options. Here is a short description about each available option.
Here is a list of options that are available in the core API. Some of them are runtime specific. Checkout the custom exampleto see these option used live.
This is a comma separated list of runtimes that you want to initialize the uploader instance with. It will try to initialize each runtime in order if one fails it will move on to the next one.
Page URL to where the files will be uploaded to.
Maximum file size that the user can pick. This string can be in the following formats 100b, 10kb, 10mb.
Enables you to chunk the file into smaller pieces for example if your PHP backend has a max post size of 1MB you can chunk a 10MB file into 10 requests. To disable chunking, remove this config option from your setup.
Generate unique filenames when uploading. This will generate unqiue filenames for the files so that they don't for example collide with existing ones on the server.
Enables plupload to resize the images to clientside to the specified width, height and quality. Set this to an object with those parameters.
List of filters to apply when the user selects files. This is currently file extension filters there are two items for each filter. title and extensions.
URL to where the SWF file is for the Flash runtime.
URL to where the XAP file is for the Silverlight runtime.
String with the ID of the browse button. Flash, HTML 5 and Silverlight requires a shim so you need to specify the id of the button that the shim will be placed above for those runtimes. This option is not required for by the queue widget.
String with the ID of the element that you want to be able to drop files into this is only used by some runtimes that support it.
Element ID to add object elements to, this defaults to the document body element.
Boolean state if the files should be uploaded using mutlipart instead of direct binary streams. Doesn't work on WebKit using the HTML 5 runtime.
Object name/value collection with arguments to get posted together with the multipart file.
Comma separated list of features that each runtime must have for it to initialize.
Name/value object with custom headers to add to HTTP requests.
Here is a list of options that is specific to the jQuery queue widget.
Function callback that enables you to bind events before the uploader is initialized.
Boolean state if the drag/drop support for all runtimes should be enabled or disabled. Default is true.
Boolean state if it should be possible to rename files before uploading them. Default is false.
Boolean state if you should be able to upload multiple times or not.
Boolean state if Flash should be forced to use URLStream instead of FileReference.upload.
var uploader = new plupload.Uploader({ runtimes : 'gears,html5,flash,silverlight,browserplus', browse_button : 'pickfiles', max_file_size : '10mb', resize : {width : 320, height : 240, quality : 90}, url : 'upload.php', flash_swf_url : '/plupload/js/plupload.flash.swf', silverlight_xap_url : '/plupload/js/plupload.silverlight.xap', filters : [ {title : "Image files", extensions : "jpg,gif,png"}, {title : "Zip files", extensions : "zip"} ] });
In this implemented version i used only HTML5 and HTML4 runtimes. HTML4 works in IE and Opera only and doesn't support lots of features. More information here
Note: Original documentation for this plugin you can find on official plugin's website: http://www.plupload.com/index.php
CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.
CKEditor is an Open source application, which means it can be modified any way you want. It benefits from an active community that is constantly evolving the application with free add-ons and a transparent development process.
To improve the editing experience CKEditor now includes inline editing - a tool that removes the editing area. Say goodbye to impractical text boxes! Now What You See Is Really What You Get.
Spell check as you typeCKEditor includes a zero installation spell check as you type (SCAYT) solution. No server integration required. The application is based on the quality spell checking services provided by WebSpellChecker.net.
Safe undo functionWith CKEditor you don't need worry about mistakes because every single action can be safely reverted, guaranteeing that you'll never break things or lose your texts.
Right to left interfaceSeveral languages are read from "right to left", like Arabic, Farsi or Hebrew. For those users, CKEditor will also render from right to left, making them right at home.
UI language auto detectionIf you have international users CKEditor can automatically detect their language and localizes the interface accordingly. The editor is translated into over 60 languages!
Quality XHTML outputCKEditor uses advanced W3C DTD controls to ensure that HTML is properly generated. Users will not enter broken code so your pages will easily validate.
Basic & advanced stylingApply basic styles like bold and italic with ease, as well as more complex styling and semantic rules defined by the website developer. Rich styles, under control.
Real block-quotingProperly quote text using the correct and semantics-aware
 tag. Other editors simply focus on the visuals, adding margins to standard paragraphs (that's so 90s).
ColorsPlain text may be boring. It’s sometimes nice to distinguish or highlight text with color or give tables more personality. With the color selector this job is a few clicks away.
Advanced paste from WordMost content is written in Microsoft Word and web browsers use HTML. CKEditor's powerful and unique Paste from Word feature makes it easy to convert text.
Advanced linkingOther than creating usual web links with ease, CKEditor makes it possible to build advanced links that can open popups, links to anchors, e-mails or any kind of web resource.
E-mail linkingCreating e-mail links with CKEditor is as simple as inserting the desired e-mail address. Even the message subject and text can be set, so e-mails will be pre-compiled.
Note: Original documentation for this plugin you can find on official plugin's website: http://ckeditor.com/
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided forGoogle Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.
The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar and jQuery JS files, in the  of your page:
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
If you plan on doing dragging or resizing, you need some additional jQuery UI files (more information here).
Once you have your dependencies, you need to write the JavaScript code that initializes the calendar. This code must be executed after the page has initialized. The best way to do this is with jQuery's $(document).ready like so:
$(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ // put your options and callbacks here }) });
Most of FullCalendar's documentation describes options that affect the look or behavior of the calendar. Options are usually set when the calendar is initialized, like so:
$('#calendar').fullCalendar({ weekends: false // will hide Saturdays and Sundays });
Callbacks are sort of like options, but they are functions that get called whenever something special happens. In the following example, an alert box will appear whenever the user clicks on a day:
$('#calendar').fullCalendar({ dayClick: function() { alert('a day has been clicked!'); } });
Methods provide ways to manipulate the calendar from JavaScript code. A method operates on the jQuery object of a calendar that has already been initialized, using the familiar fullCalendar command, but in a completely different way:
$('#calendar').fullCalendar('next');
This will call the next method and will force to the calendar to move to the next month/week/day.
Note: Original documentation for this plugin you can find on official plugin's website: http://arshaw.com/fullcalendar/docs/usage/
This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site.
{ cssClose: 'collapse-close', cssOpen: 'collapse-open', cookieName: 'collapsible', cookieOptions: { path: '/', expires: 7, domain: '', secure: '' }, defaultOpen: '', speed: 300, bind: 'click', animateOpen: function (elem, opts) { elem.next().slideUp(opts.speed); }, animateClose: function (elem, opts) { elem.next().slideDown(opts.speed); } }
You can call following methods on collapsible elements:
Call them using jquery-ui style:
$(selector).collapsible('method', [arg]);
Examples:
if ( $('#nav-block').collapsible('collapsed') ) { ... } or appendToLog('Error: service is down!'); $('#nav-logs').collapsible('open');
Note: Original documentation for this plugin you can find on official plugin's website: http://www.snyderplace.com/2010/03/jquery-collapsible-plugin/
This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining.
Controls how many characters the Input Limiter will allow the user to type into the field it is attached to. Once the limit is reached the user's input will be truncated.
Determines whether the box containing the Input Limiter remText and limitText will attach itself to the bottom the field that is in focus.
Determines the id that will be assigned to the box that will display the remText and limitText.
Determines the class that will be attached to the box (boxId) that will display the remText and limitText.
This string displayed the remaining characters. It will be updated as the user types into the input. Using the default remTextFilter; %n will be replaced with the number of characters remaining, %s a plural 's'. The %s will be replaced by the letter 's' except when %n is equals to 1, then %s will return nothing. If zeroPlural is set to false this will also return nothing when %n is equal to 0.
function (opts, charsRemaining) { var remText = opts.remText; remText = remText.replace(/\%n/g, charsRemaining); remText = remText.replace(/\%s/g, ( charsRemaining == 1?'':'s' )); return remText; };
This function gets two arguments passed to it: the options, and the remaining characters. By Default this function replaces '%n' with the characters remaining and '%s' with the letter 's' when charsRemaining is anything but '1'.
Controls whether the remText is displayed after the input loses focus. The limitText will still be displayed. This option only applies if attachBox is false, otherwise the boxId will be hidden when the field loses focus.
This string is displayed when the remaining characters is equals to zero. If this string is null remText will be displayed.
Determines whether the limitText will be displayed after the remText.
Text that informs the user about the limit. Using the default limitTextFilter; %n will be replaced with the number of characters thje field is limited to, %s adds a plural 's'. The %s will be replaced by the letter 's' except when %n is equals to 1, then %s will return nothing.
Note: Original documentation for this plugin you can find on official plugin's website: http://rustyjeans.com/jquery-plugins/input-limiter
Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!
$(selector).tagsInput({ 'autocomplete_url': url_to_autocomplete_api, 'autocomplete': { option: value, option: value}, 'height':'100px', 'width':'300px', 'interactive':true, 'defaultText':'add a tag', 'onAddTag':callback_function, 'onRemoveTag':callback_function, 'onChange' : callback_function, 'removeWithBackspace' : true, 'minChars' : 0, 'maxChars' : 0 //if not provided there is no limit, 'placeholderColor' : '#666666' });
Note: Original documentation for this plugin you can find on official plugin's website: http://xoxco.com/projects/code/tagsinput/
A jQuery plugin that adds cross-browser mouse wheel support. In order to use the plugin, simply bind the "mousewheel" event to an element. It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery. The event callback receives an extra argument which is the normalized "delta" of the mouse wheel.
// using bind $('#my_elem').bind('mousewheel', function(event, delta) { console.log(delta); }); // using the event helper $('#my_elem').mousewheel(function(event, delta) { console.log(delta); });
Note: Original documentation for this plugin you can find on official plugin's website: http://brandonaaron.net/code/mousewheel/docs
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results
 <link href="select2.css" rel="stylesheet"/>     <select id="e1"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select>
Note: Original documentation for this plugin you can find on official plugin's website: http://ivaynberg.github.com/select2/
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.
Validations are defined using the field’s **class** attribute. Here are a few examples showing how it happens:
<input<EMAIL_ADDRESS>class="validate[required,custom[email]]" type="text" name="email" id="email" /> <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" /> <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />For more details about validators, please refer to the section below.
The validator is typically instantiated by using a call of the following form:
$("#form.id").validationEngine(action or options);The method takes one or several optional parameters, either an action (and parameters) or a list of options to customize the behavior of the engine.
Here comes a glimpse: say you have a form is this kind
<form id="formID" method="post" action="submit.action"> <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" /> </form>
The following code would instance the validation engine:
$(document).ready(function(){ $("#formID").validationEngine('attach'); });
Note: Original documentation for this plugin you can find on official plugin's website: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter's Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here's the simplest possible example:

Hello world!

OK

$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown $("#myModal a.btn").on("click", function(e) { console.log("button pressed"); // just as an example... $("#myModal").modal('hide'); // dismiss the dialog }); }); $("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed $("#myModal a.btn").off("click"); }); $("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden $("#myModal").remove(); }); $("#myModal").modal({ // finally, wire up the actual modal functionality and show the dialog "backdrop" : "static", "keyboard" : true, "show" : true // ensure the modal is shown immediately });
Note: Original documentation for this plugin you can find on official plugin's website: http://bootboxjs.com/
I didn't add to this documentation file any docs or explanations for Bootstrap plugins, because i won't describe it more detailed than official Bootstrap website.
I tried to keep original Bootstrap markup for all elements in html and css files, however some elements require additional classes like buttons with caret dropdown for proper alignment and others, but not too many. In general everything is equal to original markup.
Original Bootstrap documentation could be found here - http://twitter.github.com/bootstrap/
Please note - i tried to style almost all bootstrap elements, but anyway i didn't use something:
Explanations for plugin loaders, which are placed into functions.js file and other jquery stuff.
$('.fullview').click(function(){ $("body").toggleClass("clean"); $('#sidebar').toggleClass("hide-sidebar mobile-sidebar"); $('#content').toggleClass("full-content"); });
$('.showmenu').click(function () { $('.actions-wrapper').slideToggle(100); });
$("#wizard1").formwizard({ formPluginEnabled: false, validationEnabled: false, focusFirstInput : false, disableUIStyles : true }); $("#wizard2").formwizard({ formPluginEnabled: true, validationEnabled: false, focusFirstInput : false, disableUIStyles : true, formOptions :{ success: function(data){$("#status1").fadeTo(500,1,function(){ $(this).html("Form was submitted!").fadeTo(5000, 0); })}, beforeSubmit: function(data){$("#data1").html("Form was submitted with ajax. Data sent to the server: " + $.param(data) + "");}, resetForm: true } }); $("#wizard3").formwizard({ formPluginEnabled: true, validationEnabled: false, focusFirstInput : false, formOptions :{ success: function(data){$("#status2").fadeTo(500,1,function(){ $(this).html("Form was submitted!").fadeTo(5000, 0); })}, beforeSubmit: function(data){$("#data2").html("Form was submitted with ajax. Data sent to the server: " + $.param(data) + "");}, resetForm: true }, inAnimation : {height: 'show'}, outAnimation: {height: 'hide'}, inDuration : 400, outDuration: 400, easing: 'easeInBack' //see e.g. http://gsgd.co.uk/sandbox/jquery/easing/ for information on easing } );
var elf = $('#file-manager').elfinder({ url : 'php/connector.php', // connector URL (REQUIRED) uiOptions : { // toolbar configuration toolbar : [ ['back', 'forward'], ['info'], ['quicklook'], ['search'] ] }, contextmenu : { // Commands that can be executed for current directory cwd : ['reload', 'delim', 'info'], // Commands for only one selected file files : ['select', 'open'] } }).elfinder('instance');
$("#file-uploader").pluploadQueue({ runtimes : 'html5,html4', url : 'php/upload.php', max_file_size : '1kb', unique_names : true, filters : [ {title : "Image files", extensions : "jpg,gif,png"} ] });
function generateNumber(min, max) { min = typeof min !== 'undefined' ? min : 1; max = typeof max !== 'undefined' ? max : 100; return Math.floor((Math.random() * max) + min); }; setInterval(function() { $('.info-aapl li span').each(function(index, elem) { $(elem).animate({ height: generateNumber(1, 40) }); }); }, 3000);
var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev,next', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, events: [ { title: 'All Day Event', start: new Date(y, m, 1) }, { title: 'Long Event', start: new Date(y, m, d-5), end: new Date(y, m, d-2) }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d-3, 16, 0), allDay: false }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d+4, 16, 0), allDay: false }, { title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }, { title: 'Lunch', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false }, { title: 'Click for Google', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://google.com/' } ] });
window.prettyPrint && prettyPrint();
$('.view').hover(function(){ $(this).children(".view-back").fadeIn(200); },function(){ $(this).children(".view-back").fadeOut(200); });
$('#defaultValueExample, #time').timepicker({ 'scrollDefaultNow': true }); $('#durationExample').timepicker({ 'minTime': '2:00pm', 'maxTime': '11:30pm', 'showDuration': true }); $('#onselectExample').timepicker(); $('#onselectExample').on('changeTime', function() { $('#onselectTarget').text($(this).val()); }); $('#timeformatExample1, #timeformatExample3').timepicker({ 'timeFormat': 'H:i:s' }); $('#timeformatExample2, #timeformatExample4').timepicker({ 'timeFormat': 'h:i A' });
$('#cp1').colorpicker({ format: 'hex' }); $('#cp2').colorpicker(); $('#cp3').colorpicker(); var bodyStyle = $('html')[0].style; $('#cp4').colorpicker().on('changeColor', function(ev){ bodyStyle.background = ev.color.toHex(); });
$( ".datepicker" ).datepicker({ defaultDate: +7, showOtherMonths:true, autoSize: true, appendText: '(dd-mm-yyyy)', dateFormat: 'dd-mm-yy' }); $('.inlinepicker').datepicker({ inline: true, showOtherMonths:true }); var dates = $( "#fromDate, #toDate" ).datepicker({ defaultDate: "+1w", changeMonth: false, showOtherMonths:true, numberOfMonths: 3, onSelect: function( selectedDate ) { var option = this.id == "fromDate" ? "minDate" : "maxDate", instance = $( this ).data( "datepicker" ), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings ); dates.not( this ).datepicker( "option", option, date ); } }); $( "#datepicker-icon, .navbar-datepicker" ).datepicker({ showOn: "button", buttonImage: "img/icons/date_picker.png", buttonImageOnly: true });
$("a.bs-alert").click(function(e) { e.preventDefault(); bootbox.alert("Hello world!", function() { console.log("Alert Callback"); }); }); $("a.confirm").click(function(e) { e.preventDefault(); bootbox.confirm("Are you sure?", function(confirmed) { console.log("Confirmed: "+confirmed); }); }); $("a.bs-prompt").click(function(e) { e.preventDefault(); bootbox.prompt("What is your name?", function(result) { console.log("Result: "+result); }); }); $("a.dialog").click(function(e) { e.preventDefault(); bootbox.dialog("I am a custom dialog", [{ "label" : "Success!", "class" : "btn-success", "callback": function() { console.log("great success"); } }, { "label" : "Danger!", "class" : "btn-danger", "callback": function() { console.log("uh oh, look out!"); } }, { "label" : "Click ME!", "class" : "btn-primary", "callback": function() { console.log("Primary button"); } }, { "label" : "Just a button..." }, { "Condensed format": function() { console.log("condensed"); } }]); }); $("a.multiple-dialogs").click(function(e) { e.preventDefault(); bootbox.alert("Prepare for multiboxes...", "Argh!"); setTimeout(function() { bootbox.confirm("Are you having fun?", "No :(", "Yeah!", function(result) { if (result) { bootbox.alert("Glad to hear it!"); } else { bootbox.alert("Aww boo. Click the button below to get rid of all these popups", function() { bootbox.hideAll(); }); } }); }, 1000); }); $("a.dialog-close").click(function(e) { e.preventDefault(); var box = bootbox.alert("This dialog will close in two seconds"); setTimeout(function() { box.modal('hide'); }, 2000); }); $("a.generic-modal").click(function(e) { e.preventDefault(); bootbox.modal('', 'Modal popup!'); }); $("a.dynamic").click(function(e) { e.preventDefault(); var str = $("
This content is actually a jQuery object, which will change in 3 seconds...
"); bootbox.alert(str); setTimeout(function() { str.html("See?"); }, 3000); }); $("a.prompt-default").click(function(e) { e.preventDefault(); bootbox.prompt("What is your favourite JS library?", "Cancel", "OK", function(result) { console.log("Result: "+result); }, "Bootbox.js"); }); $("a.onescape").click(function(e) { e.preventDefault(); bootbox.dialog("Dismiss this dialog with the escape key...", { "label" : "Press Escape!", "class" : "btn-danger", "callback": function() { console.log("Oi! Press escape!"); } }, { "onEscape": function() { bootbox.alert("This alert was triggered by the onEscape callback of the previous dialog", "Dismiss"); } }); }); $("a.nofade").click(function(e) { e.preventDefault(); bootbox.dialog("This dialog does not fade in or out, and thus does not depend on bootstrap-transitions.js.", { "OK": function() {} }, { "animate": false }); }); $("a.nobackdrop").click(function(e) { e.preventDefault(); bootbox.dialog("This dialog does not have a backdrop element", { "OK": function() {} }, { "backdrop": false }); }); $("a.icons-explicit").click(function(e) { e.preventDefault(); bootbox.dialog("Custom dialog with icons being passed explicitly into bootbox.dialog.", [{ "label" : "Success!", "class" : "btn-success", "icon" : "icon-ok-sign icon-white" }, { "label" : "Danger!", "class" : "btn-danger", "icon" : "icon-warning-sign icon-white" }, { "label" : "Click ME!", "class" : "btn-primary", "icon" : "icon-ok icon-white" }, { "label" : "Just a button...", "icon" : "icon-picture" }]); }); $("a.icons-override").click(function(e) { e.preventDefault(); bootbox.setIcons({ "OK" : "icon-ok icon-white", "CANCEL" : "icon-ban-circle", "CONFIRM" : "icon-ok-sign icon-white" }); bootbox.confirm("This dialog invokes bootbox.setIcons() to set icons for the standard three labels of OK, CANCEL and CONFIRM, before calling a normal bootbox.confirm", function(result) { bootbox.alert("This dialog is just a standard bootbox.alert(). bootbox.setIcons() only needs to be set once to affect all subsequent calls", function() { bootbox.setIcons(null); }); }); }); $("a.no-close-button").click(function(e) { e.preventDefault(); bootbox.dialog("If a button's handler now explicitly returns false, the dialog will not be closed. Note that if anything !== false - e.g. nothing, true, null etc - is returned, the dialog will close.", [{ "I'll close on click": function() { console.log("close on click"); return true; }, }, { "I won't!": function() { console.log("returning false..."); return false; } }]); });
var tags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#autocomplete" ).autocomplete({ source: tags, appendTo: ".autocomplete-append" }); function setSizes() { var containerHeight = $(".autocomplete-append input[type=text]").width(); $(".autocomplete-append").width(containerWidth - 180); };
$('#typeahead').typeahead({ source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"], appendToBody: false });
$( "#default-slider" ).slider(); $( "#increments-slider" ).slider({ value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#donation-amount" ).val( "$" + ui.value ); } }); $( "#donation-amount" ).val( "$" + $( "#increments-slider" ).slider( "value" ) ); $( "#range-slider, #range-slider1" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#price-amount, #price-amount1" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#price-amount, #price-amount1" ).val( "$" + $( "#range-slider, #range-slider1" ).slider( "values", 0 ) + " - $" + $( "#range-slider, #range-slider1" ).slider( "values", 1 ) ); $( "#slider-range-min, #slider-range-min1" ).slider({ range: "min", value: 37, min: 1, max: 700, slide: function( event, ui ) { $( "#min-amount, #min-amount1" ).val( "$" + ui.value ); } }); $( "#min-amount, #min-amount1" ).val( "$" + $( "#slider-range-min, #slider-range-min1" ).slider( "value" ) ); $( "#slider-range-max, #slider-range-max1" ).slider({ range: "max", min: 1, max: 10, value: 2, slide: function( event, ui ) { $( "#max-amount, #max-amount1" ).val( ui.value ); } }); $( "#max-amount, #max-amount1" ).val( $( "#slider-range-max, #slider-range-max1" ).slider( "value" ) );
$('#loading').click(function () { var btn = $(this) btn.button('loading') setTimeout(function () { btn.button('reset') }, 3000); });
$('.popover-test').popover({ placement: 'left' }) .click(function(e) { e.preventDefault() }); $("a[rel=popover]") .popover() .click(function(e) { e.preventDefault() });
$("#validate").validationEngine({promptPosition : "topRight:-122,-5"});
$.configureBoxes();
$( "#spinner-default" ).spinner(); $( "#spinner-decimal" ).spinner({ step: 0.01, numberFormat: "n" }); $( "#culture" ).change(function() { var current = $( "#spinner-decimal" ).spinner( "value" ); Globalize.culture( $(this).val() ); $( "#spinner-decimal" ).spinner( "value", current ); }); $( "#currency" ).change(function() { $( "#spinner-currency" ).spinner( "option", "culture", $( this ).val() ); }); $( "#spinner-currency" ).spinner({ min: 5, max: 2500, step: 25, start: 1000, numberFormat: "C" }); $( "#spinner-overflow" ).spinner({ spin: function( event, ui ) { if ( ui.value > 10 ) { $( this ).spinner( "value", -10 ); return false; } else if ( ui.value < -10 ) { $( this ).spinner( "value", 10 ); return false; } } }); $.widget( "ui.timespinner", $.ui.spinner, { options: { // seconds step: 60 * 1000, // hours page: 60 }, _parse: function( value ) { if ( typeof value === "string" ) { // already a timestamp if ( Number( value ) == value ) { return Number( value ); } return +Globalize.parseDate( value ); } return value; }, _format: function( value ) { return Globalize.format( new Date(value), "t" ); } }); $( "#spinner-time" ).timespinner(); $( "#culture-time" ).change(function() { var current = $( "#spinner-time" ).timespinner( "value" ); Globalize.culture( $(this).val() ); $( "#spinner-time" ).timespinner( "value", current ); });
$(".select").select2(); $("#loading-data").select2({ placeholder: "Enter at least 1 character", allowClear: true, minimumInputLength: 1, query: function (query) { var data = {results: []}, i, j, s; for (i = 1; i < 5; i++) { s = ""; for (j = 0; j < i; j++) {s = s + query.term;} data.results.push({id: query.term + i, text: s}); } query.callback(data); } }); $("#max-select").select2({ maximumSelectionSize: 3 }); $("#clear-results").select2({ placeholder: "Select a State", allowClear: true }); $("#min-select2").select2({ minimumInputLength: 2 }); $("#disableselect, #disableselect2").select2( "disable" ); $("#minimum-input-single").select2({ minimumInputLength: 2 });
$('.tags').tagsInput({width:'100%'}); $('.tags-autocomplete').tagsInput({ width:'100%', autocomplete_url:'tags_autocomplete.html' });
$('.limited').inputlimiter({ limit: 100, boxId: 'limit-text', boxAttach: false });
$('.auto').autosize();
$('.tip').tooltip(); $('.focustip').tooltip({'trigger':'focus'});
oTable = $('#data-table').dataTable({ "bJQueryUI": false, "bAutoWidth": false, "sPaginationType": "full_numbers", "sDom": '<"datatable-header"fl>t<"datatable-footer"ip>', "oLanguage": { "sSearch": "Filter records: _INPUT_", "sLengthMenu": "Show entries: _MENU_", "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" } } }); oTable = $(".media-table").dataTable({ "bJQueryUI": false, "bAutoWidth": false, "sPaginationType": "full_numbers", "sDom": '<"datatable-header"fl>t<"datatable-footer"ip>', "oLanguage": { "sSearch": "Filter records: _INPUT_", "sLengthMenu": "Show entries: _MENU_", "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" } }, "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0, 4 ] } ] });
$(".lightbox").fancybox({ 'padding': 2 });
$('#total-visits').sparkline( 'html', {type: 'bar', barColor: '#ef705b', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"} ); $('#balance').sparkline( 'html', {type: 'bar', barColor: '#91c950', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"} ); $('#visits').sparkline( 'html', {type: 'bar', barColor: '#ef705b', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"} ); $('#clicks').sparkline( 'html', {type: 'bar', barColor: '#91c950', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"} ); $('#rate').sparkline( 'html', {type: 'bar', barColor: '#5cb1ec', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"} ); $(window).resize(function () { $.sparkline_display_visible(); }).resize();
$('.sidebar-tabs').easytabs({ animationSpeed: 150, collapsible: false, tabActiveClass: "active" }); $('.actions').easytabs({ animationSpeed: 300, collapsible: false, tabActiveClass: "current" });
function initialize() { var mapProp= { center: new google.maps.LatLng(-37.814666,144.982452), zoom: 12, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("google-map"),mapProp); $('.actions').bind('easytabs:after', function() { google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(-37.814666,144.982452)); }); }; google.maps.event.addDomListener(window, 'load', initialize);
$('.expand').collapsible({ defaultOpen: 'current,third', cookieName: 'navAct', cssOpen: 'subOpened', cssClose: 'subClosed', speed: 200 });
$(".ui-datepicker-month, .styled, .dataTables_length select").uniform({ radioClass: 'choice' });
In blank html files and functions_blank.js file you will find clean and empty pages without any content and js file with necessary js code without plugins needed for layout. Usage is very simple - just take this file as a base and add necessary content to html and js files, only that content you'll be using.
I included only 2 .psd files:
Please note - these psd files aren't complete, there is a general styles only, everything other i designed directly in browser. But if you need to update UI, i'd suggest to use Twitter Bootstrap PSD toolkit. Since Bootstrap doesn't have an original psd sources and provides all its design in html/css only, i customized main bootstrap theme in css without psd files.
Thanks to FreebiesBug for demo images
.checker input { -moz-appearance: none; -webkit-appearance: none; }
.footer-links li aand
.alt-buttons > li > a


Okay... what just happened?
There is a property for flex items (direct descendants of elements with display: flex, remember?) called flex-grow.
flex-grow
"This defines the ability for a flex item to grow if necessary."
...
"If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.
- Chris Coyier
If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least)."
The default value of flex-grow is 0 - which is equivalent of saying: "Don't take up more space than you need to."
Remember the structure?
-html
--body (display: flex)
---header
---main
---footer
So, the problem was that header, main and footer were all flex-grow: 0. Nothing was taking up that extra space!
By setting flex-grow: 1 on main, we got this:
-html
--body (display: flex)
---header
---main (takes up all extra space)
---footer


Load Visual ARIA
ARIA Radios COMPLETE 6
How would you rate this page?
TUBULAR
SQUIDGY
FLOOPY
RADICAL
GNARLY!
Load Visual ARIA and observe what happens when using the keyboard.


rude
`Prev `__
R
`Next `__
--------------
**rude**: adj.
1. (of a program) Badly written.
2. Functionally poor, e.g., a program that is very difficult to use
because of gratuitously poor (random?) design decisions. Oppose
`*cuspy* <../C/cuspy.html>`__.
3. Anything that manipulates a shared resource without regard for its
other users in such a way as to cause a (non-fatal) problem. Examples:
programs that change tty modes without resetting them on exit, or
windowing programs that keep forcing themselves to the top of the window
stack.
--------------
+----------------------------------------------+----------------------------+--------------------------+
| `Prev `__ | `Up <../R.html>`__ | `Next `__ |
+----------------------------------------------+----------------------------+--------------------------+
| rubber-hose cryptanalysis | `Home <../index.html>`__ | runes |
+----------------------------------------------+----------------------------+--------------------------+


Home
pages
login
tracking
shopping cart
blog
blog
Contact
John Doe
×
Wood & Cloth Sofa
buy now
Cloth & Wood Sofa
buy now
Wood & Cloth Sofa
buy now
Featured Category
Premium Quality
Latest foam Sofa
EXPLORE NOW
Premium Quality
Latest foam Sofa
EXPLORE NOW
Premium Quality
Latest foam Sofa
EXPLORE NOW
Premium Quality
Latest foam Sofa
EXPLORE NOW
awesome
shop
Bardot Lounge Chair
$150.00
+ add to cart
Brando Arm Chair
$150.00
+ add to cart
Genoa Wing Chair
$150.00
+ add to cart
Morgan Wing Chair
$150.00
+ add to cart
Rochelle Lounge Chair
$150.00
+ add to cart
Astana Floor Lamp
$150.00
+ add to cart
Magelian Tall Chest
$150.00
+ add to cart
Drachen Table Lamp
$150.00
+ add to cart
Endeavour Tripod Floor Lamp
$150.00
+ add to cart
Kepler Tripod Floor Lamp
$150.00
+ add to cart
Missouri Tripod Spotlight
$150.00
+ add to cart
Garda Wall Mirror
$150.00
+ add to cart
Saima Wall Mirror
$150.00
+ add to cart
Solis Wall Mirror
$150.00
+ add to cart
Evelyn Chest of Drawers
$150.00
+ add to cart
Emada Chest of Drawers
$150.00
+ add to cart
Weekly Sale on 60% Off All Products
book now
Best Sellers
shop
Quartz Belt Watch
$150.00
Quartz Belt Watch
$150.00
Quartz Belt Watch
$150.00
Quartz Belt Watch
$150.00
Quartz Belt Watch
$150.00
Join Our Newsletter
Subscribe to get Updated with new offers
subscribe now


Gender
Age Range
Radius
Message
Please create your user icon.
Change your nickname
Let's write about yourself.


This text is always displayed. However, if you click, you can ... read more read the content that was in a SPAN marked with the "readmore" class.
And this whole paragraph is only shown after the user clicks the "read more" link.


Any help with the documentation is greatly appreciated.
All edits are reviewed before going live, so feel free to do much more than fix typos or links. If you see a page that could benefit from an entire rewrite, we'd be thrilled to review it. Don't be surprised if we like it so much we ask you for help with other pages :)
NOTICE: unless indicated otherwise on the pages in question, all editable content available from apache.org is presumed to be licensed under the Apache License (AL) version 2.0 and hence all submissions to apache.org treated as formal Contributions under the license terms.


Predict future values with hybrid combinations of Pattern Sequence based Forecasting (PSF), Autoregressive Integrated Moving Average (ARIMA), Empirical Mode Decomposition (EMD) and Ensemble Empirical Mode Decomposition (EEMD) methods based hybrid methods.
| Version: | 0.1.3 |
| Imports: | PSF, Rlibeemd, forecast, tseries |
| Suggests: | knitr, rmarkdown |
| Published: | 2017-07-09 |
| Author: | Neeraj Bokde |
| Maintainer: | Neeraj Bokde <neerajdhanraj at gmail.com> |
| License: | GPL-2 | GPL-3 [expanded from: GPL] |
| URL: | http://www.neerajbokde.com/ |
| NeedsCompilation: | no |
| CRAN checks: | decomposedPSF results |
| Reference manual: | decomposedPSF.pdf |
| Vignettes: |
Vignette Title |
| Package source: | decomposedPSF_0.1.3.tar.gz |
| Windows binaries: | r-devel: decomposedPSF_0.1.3.zip, r-release: decomposedPSF_0.1.3.zip, r-oldrel: decomposedPSF_0.1.3.zip |
| OS X binaries: | r-release: decomposedPSF_0.1.3.tgz, r-oldrel: decomposedPSF_0.1.3.tgz |
Please use the canonical form https://CRAN.R-project.org/package=decomposedPSF to link to this page.


{% set page = { title: '', dev: true, html_classes: [], nav: { section: 'Interviewing', subsection: 'Interviewing', hideSecondary: true }, layout: prototype.current.layoutPath + 'layout.html', primary: { col: "full" }, secondary: false } %} {% extends page.layout %} {% block primary %}
Give specific reasons why a decision is required. What the allegation is and what evidence is available.
Complete later


Yo.
This forum often sees questions about programs in which programmers would like to store a series of elements at runtime, but don't know how large the series will be ahead of time.
The classic C solution to this problem involves dynamically allocating an array and "resizing" it as needed by allocating a new array and copying elements over from the previous one. However, such strategies can not only be cumbersome for newer programmers to implement but also require manual memory management which can open up risks of memory leaks.
To this end, this article will introduce the Standard Template Library (STL) class template
std::vector as a potential solution to the problem of resizable arrays. std::vectors offer member functions for most common tasks that involve array resizing, can serve in many cases as a drop-in replacement for arrays, and a handy size optimization for storing boolean values.
This article may be easier to understand if you (the reader) are familiar with the following:
- The use of arrays (C or C++ style).
- The use of functions.
- The instantiation of classes and use of their members.
- The instantiation of class templates (optional).
The Absolute Basics
A misconception that many beginners have is that std::vectors are like n-dimensional vectors from mathematics or physics. While this is an understandable misunderstanding, it's better to think of std::vector as a bit of code (a wrapper) that manages an array that can change its size.
Let's begin with the creation of a vector. Like any element of the standard library, one needs to include a header to use vectors. The header in question is quite intuitively named: it's "vector".
#include <vector>
To instantiate a vector, all one needs to do is this:
std::vector<value_type> variable_name;
This creates an empty vector. To have the vector start at a certain size, this will work as well:
std::vector<value_type> variable_name(number_of_elements);
Each element in that vector will be initialized to its default value. If the programmer wishes to initialize them all to some value other than the default, then there is yet another option:
std::vector<value_type> variable_name(number_of_elements, value);
The full list of ways to initialize a vector can be found
here.
Vectors can be used much like arrays can. They support the [] operator for element access much like arrays do (and their indices are the same, remember that the range of indices is [0,size-1]), and can therefore serve, in many cases, as drop-in replacements for arrays. One notation that doesn't work, however, is this:
*(ptr_to_first_element_of_array_this_name_is_really_long+offset)
Just as a warning.
A Selection of Member Functions
Vectors offer a member function to get the number of elements they contain, namely
std::vector::size. Its return type, size_t, is an unsigned integer that is large enough to represent the size of any object in bytes. On 32-bit systems, it's at least 32 bits large. On 64-bit systems, it's at least 64.
1 2
|
for(size_t i = 0; i < a_vector.size(); ++i)
std::cout << a_vector[i] << std::endl;
| |
Alternatively, if you simply wish to test to see if the vector is empty, the
std::vector::empty function returns a bool that is true if the vector has no elements in it, and false otherwise.
1 2 3 4
|
if(a_vector.empty())
std::cout << "The vector wishes to be an Equalist." << std::endl;
else
std::cout << "This vector wishes to become Mendeleev." << std::endl;
| |
In addition to the [] operator, vectors also provide the
std::vector::at member function. It takes the same arguments as the operator and returns a reference just like the operator does. The difference, however, is that it checks to make sure that the provided index is less than the size of the vector. If it's not, it throws an exception, whereas the [] operator could literally do anything. Usually, it will either access memory that the program hasn't reserved, or cause a segmentation fault which will likely crash the program. at() is very slightly slower as a result, but easier to debug if something does go wrong.
1 2
|
a_vector[a_vector.size()]; //Herp. Undefined.
a_vector.at(a_vector.size()); //Herp. Exception.
| |
For convenience, vectors also provide functions to get the element at index 0 (the front of the vector) and the element at index size-1 (the back of the vector). They're intuitively named.
1 2
|
an_int_vector.front() = 3; //Sets the first element equal 5... I mean 3.
a_char_vector.back() = '\n'; //Sets the last element equal to a newline.
| |
Adding a new element to the end of a vector is quite easy. Vectors offer the
std::vector::push_back function, which takes a single element that gets copied (or moved) onto the back (remember: back = largest index) of the vector, expanding it by one.
1 2 3
|
a_vector_of_ints.push_back(7); //Add 7 onto the end of the vector.
a_vector_of_ints.push_back(3); //Add 3 onto the end of the vector, after 7.
a_vector_of_ints.push_back(-2); //Add -2 onto the end of the vector, after 3.
| |
.
Similarly, vectors also have a
std::vector::pop_back function which takes no arguments and removes the last element of the vector, shrinking it by one. This destroys the removed element, if applicable.
1 2
|
a_vector_with_elements.pop_back(); //Remove the last element from the vector.
a_vector_with_elements.pop_back(); //Remove the new last element from the vector.
| |
.
Clearing the vector of all its elements is also easy. One call to
std::vector::clear removes and destroys all the elements of a vector, setting its size to 0.
1 2 3
|
a_vector_with_elements.clear(); //Now a misnomer!
if(!a_vector_with_elements.empty())
std::cout << "This line should never print." << std::endl;
| |
To easily resize a vector, one can use
std::vector::resize. It takes two arguments, though the second has a default value. The first is the number of elements to resize the vector to. If this is smaller than the current size, then the extra elements at the end (greater indices) get destroyed. The second parameter is what to initialize the new elements to if the first argument is larger than the current size.
1 2 3 4
|
std::vector<Bunny> bunnies(20);
bunnies.resize(50); //More bunnies!
bunnies.resize(70, montyPythonKillerRabbit); //More killer bunnies!
bunnies.resize(20); //Herp, ran out of carrots (and humans).
| |
If there is ever a need to exchange the contents of vectors, there's another simple function in the form of
std::vector::swap. It takes a vector as an argument which is passed by reference, and the vectors have their contents exchanged. The vector passed in shouldn't, therefore, be const.
1 2 3 4
|
a_vector.swap(a_different_vector); //Vector contents are swapped.
a_vector.swap(a_different_vector); //Vectors are back to the way they were.
a_different_vector.swap(a_vector); //Same as line 1.
a_different_vector.swap(a_vector); //Same as line 2.
| |
These are not all the member functions of vectors. There are others that may be of interest some of those require some prerequisite knowledge about iterators. And that... is a topic for another article.
vector<bool>
Vectors behave slightly differently when they're storing bools.
Normally, a bool gets stored in one byte of memory. This is generally quite wasteful (8 bits used to store 1 bit), and implementations of the C++ standard library are allowed to internally change things to reduce wastefulness. This may have a trivial impact on performance.
More importantly, this means that operator [], at(), front(), and back() do not actually return references to booleans (unless the vector is const). Instead, they return an instance of a member class that behaves in the same way as a bool reference would, namely
std::vector<bool>:reference. While they can cast implicitly to bool, it is important to note that they are not bools. If you are doing anything with the <type_traits> header, this is critical.
The reference class additionally provides the flip() member function to flip the value of the bool an instance refers to.
bool_vec.at(3).flip();
Although iterators were not discussed in this document, for those who know about them, the iterators for this specialization are also different internally. Non-const iterators will return an instance of that reference class. Otherwise their behavior in normal use should be the same.
Additionally,
std::vector<bool>::swap gets an extra static version of itself with different functionality. This static version can be used to switch the values of two bits in std::vector<bool>s. Note that as arguments it takes the aforementioned bool references that std::vector uses, meaning that this is only really practical for swapping bit values within the same vector or between different vectors.
vector_1::flip(vector_1.front(),vector_2.back()); //Switcheroo!
Finally, one extra member function is added:
std::vector<bool>::flip. Its only purpose is to flip all the values in the vector.
a_vector_of_false_values.flip(); //Now a misnomer!
If for any reason you don't want to use this specialization, consider using std::vector<char> instead and simply assign boolean values to its elements.
In conclusion
Vectors are not a one-size fits all solution to sequential data storage, however they are quite capable as convenient resizable arrays.
-Albatross
Technical fine print: This article is meant as a non-technical article suitable for beginning programmers, and to that end, may make assumptions about the template parameters used and may use technically imprecise language.


scrool
`Prev `__
S
`Next `__
--------------
**scrool**: /skrool/, n.
[from the pioneering Roundtable chat system in Houston ca.: 1984; prob.:
originated as a typo for ‘scroll’] The log of old messages, available
for later perusal or to help one get back in synch with the
conversation. It was originally called the scrool monster, because an
early version of the roundtable software had a bug where it would dump
all 8K of scrool on a user's terminal.
--------------
+--------------------------+----------------------------+-----------------------------+
| `Prev `__ | `Up <../S.html>`__ | `Next `__ |
+--------------------------+----------------------------+-----------------------------+
| scrog | `Home <../index.html>`__ | scrozzle |
+--------------------------+----------------------------+-----------------------------+


{%extends "nav_events.html" %} {%load alertmap%} {%block title%}Conference Sponsor Badge Scanning - {{conference}}{%endblock%} {%block content%}
The following users can scan badges for your sponsorship:
{%endif%}Enter the email user of an attendee who should be able to scan badges on behalf of your sponsorship. Note that this attendee must have a confirmed registration to the conerence using the specified email address.


Your New February Coupons Have Arrived!
Coupons.com | Love at First Sight - One look at what’s new and you’ll fall head over heels.


1 write to Verb
Microsoft.PowerShell.Commands.Utility (1)
commands\utility\GetVerbCommand.cs (1)
74
verb.
Verb
= field.Name;


Get to know what OASP has to offer and start coding in zero time by following these steps.
First things first. Start your way through OASP by reading the OASP4j Platform Guide
There is currently one rather technical demo, simulating a few use cases of a restaurant management application
The OASP IDE setup guide will guide you how to get your development environment up and running.
Once you are able to code applications with OASP support you surely want to take a peek to the technology underneath and be able to customize for your needs.
The code is hosted on Github, here are the main repositories
Remember this is a joint effort and you are welcome to contribute.


--- layout: post title: Linux Kubuntu - my new sofa machine date: '2009-05-23T00:00:00+02:00' tags: - kubuntu - linux - via-unichrome category: 'Server' tumblr_url: http://andywenk.tumblr.com/post/393273913/linux-kubuntu-my-new-sofa-laptop --- Moin Moin, after having some fuckups with Windows XP and not having the ability to code in a well known environment, I decided to trash Windows XP and install Kubuntu. Why? ‘Cause it’s nice. It brings all the advantages from Ubuntu based on Debian and has the really cool looking KDE. I never used it before but after some hours working and looking at it, I am satisfied. I have a RaLink RT2500 WLAN adapter onboard and also a PCI Buffalo card. No problem. Kubuntu offers the option to install the drivers in the Application Launcher > System > Hardware Drivers. Cool! Next step was to get the grafic chipset work. Hm - that costs me some google searches but it’s also really simple. The openchrome driver is on board by default since Ubuntu 8.04. The only thing I had to do is activate it and write some extra stuff into the xorg.conf. By the way - I have one of those Via Unichrome PM800 onboard grafic chipsets. Here is what I had to change in xorg.conf:
$ vi /etc/X11/xorg.conf Section "Device" Identifier "Configured Video Device" Driver "openchrome" EndSection Section "Screen" Identifier "Default Screen" Monitor "Configured Monitor" Device "Configured Video Device" Subsection "Display" Depth 8 Modes "1024x768" "800x600" ViewPort 0 0 Depth 16 Modes "1024x768" "800x600" ViewPort 0 0 Depth 24 Modes "1024x768" "800x600" ViewPort 0 0 EndSubsection EndSectionAfter that stop the display manager kdm and restart it. That’s it. Take care if you find stuff concerning the Via Unichrome driver. This is really all you have to do. No complicated installation processes as described a lot. So for me this is really a cool Linux. I am going to setup the rest of my needed stuff and then forget about all that never ending installation nights … Andy


A Dyson and a $557 Kitchen Aid: The 6 things you should add to your cart this Black Friday.
by Jessica WangWe might not celebrate Thanksgiving in Australia but we do love a Black Friday sale.
But not all sales are created equal. Some offer you okay discounts – but really exist solely to tempt you to spend money – and then there are THE SALES in which not participating would just be… silly.
From $99 AirPods, to $899 return flights to LA and San Francisco, here are our best picks from the Black Friday shopping frenzy.
1. Apple, AirPods for $99.
You save: $150 off the $249 RRP.
Give yourself the gift of wireless listening – and a very bougie accessory – for $99. You’re getting over 60 per cent off regular retail price, and it’s a pretty great deal, considering the fact that Apple products hardly ever go on sale.
Now here’s the catch: to access this sale, you do need to be an eBay Plus member, which will cost you $49 for a 12-month membership. New members, however, can sign up for a 30-day free trial.
Their initial drop sold out in just 36 seconds, but there’ll be another release at 6pm Friday, and 10am Saturday.
2. Dyson, V8 Origin for $399.
You save: $350 off the $749 RRP.
There are two types of people in this world: people who have discovered the wonders of cordless vacuuming, and those who haven't. And trust us, the ease of not having to manoeuvre a cord as you go from room-to-room will change your life.
eBay is giving you the chance to own Dyson's ritzy, high-powered V8 Origin model for nearly 50 percent 0ff. Again, this deal is only available to eBay Plus members. So if you haven't already, take advantage of that 30-day free trial ASAP.
3. Return flights to LA, or San Francisco from $899.
You save: around $200.
Get 2020 off to a great start by booking in a cheeky holiday. See what LA and San Francisco have to offer with Air New Zealand's Black Friday sale.
Discount flights are on offer from January 21 - March 23, April 22 - June 15, and August 2 - September 10, and you'll get an extra 10 per cent off if you book with the code 'FLYDAY10' before midnight, November 29 2019.
4. Philips, Viva Airfryer HD9621, $199
You save: $130 off the $329 RRP.
From chips, to chicken, and even brussel sprouts, all you have to do is put your ingredients in the fryer, and the machine will do the rest. No prior cooking skills necessary.
5. Pick up some new clothes for 60 per cent off.
You save: 60 percent off everything site wide, including sale items.
Consider your summer wardrobe sorted with Nasty Gal's epic 60 per cent off sale. From that playsuit you've been eyeing off, to a new pair of sandals, or even an outfit for your work Christmas party, consider this permission to treat yourself.
P.S. They also stock some pretty fabulous Christmas costumes and hoodies for dogs.
From left to right: I'm Onto Utility Belted Playsuit, $33.60 (RRP $84), Time Heels Croc Strappy Kitten Heels, $36.40 (RRP $91), and Garden of Eden Plus Floral Dress, $43.20 (RRP $108).
6. A KitchenAid for $549.
You save: $400 off the $949 RRP.
Bring out your inner Nigella Lawson with your very own KitchenAid. There's a reason why it's earned a reputation for being the go-to mixer for professional pastry chefs and home-bakers alike. With the help of some handy accessories, you can even turn your mixer into a pasta maker, food processor, and ice cream maker.
If you buy one before Christmas Eve, Myer will even throw in an Ice Cream Bowl (valued at $119 RRP), so you can make all the summer sorbets and ice-creams your heart desires.
Are you planning on taking advantage of the Black Friday sales? Tell us what you're eyeing up in a comment below.


Atletico's Diego Costa set for three months out after operation
by AFPMADRID: Diego Costa is facing three months out after Atletico Madrid confirmed the striker underwent surgery on a cervical disc on Thursday.
Costa felt discomfort in his neck last week in training and the club decided the injury required surgery.
"Diego Costa underwent surgery on his cervical disc herniation in Madrid on Thursday," Atletico confirmed in a statement.
"According to the information provided by the club's medical services, the operation has gone as planned."
Costa is expected to be out for around three months, meaning he will miss Atletico's La Liga game against Barcelona on December 1.
He is also unlikely to play in either of their last two Champions League group games against Juventus and Lokomotiv Moscow but could return in time for the round of 16 matches at the end of February.