# API Reference

```markup
<!-- Initialize Pages core objects -->
<script type="text/javascript" src="pages/js/pages.min.js">
```

## **Environment variables**

Pages will detect the user OS and add it as a class name (ex: 'windows', 'mac', 'unix', 'linux') into `body`.It will also detect if it's mobile device or desktop and add either 'mobile' and 'desktop' into the same tag.

## **Auto-initialized jQuery Plugins**

The following table shows which plugins are auto-initialized and their default configuration.

| PLUGIN                                                            | JQUERY                                                                                                                                                                                                                                                              |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Bootstrap Tooltip](http://getbootstrap.com/javascript/#tooltips) | Set `[data-toggle="tooltip"]` to any button or anchor tag.                                                                                                                                                                                                          |
|                                                                   | `<a href="#" data-toggle="tooltip" data-placement="bottom" title="Print"><i class="fa fa-print"></i></a>`                                                                                                                                                           |
| [Select2](http://ivaynberg.github.io/select2/)                    | Set `[data-init-plugin="select2"]`                                                                                                                                                                                                                                  |
| [Scrollbar](http://gromo.github.io/jquery.scrollbar/)             | Set `class="scrollbar"`\<div style="height:200px" class="scrollbar">  ...\</div>                                                                                                                                                                                    |
| SelectFx                                                          | Set `[data-init-plugin="cs-select"]`\<select class="cs-select cs-skin-slide" data-init-plugin="cs-select">    \<option value="Websafe">Web-safe\</option>    \<option value="Helvetica">Helvetica\</option>    \<option value="SegeoUI">SegeoUI\</option>\</select> |
| [Unveil](http://luis-almeida.github.io/unveil/)                   | Applied to any `img`                                                                                                                                                                                                                                                |

## **Utility functions**

$.Pages.isVisibleXs()

Returns true if the current viewport is an extra small device. ex: Phones (<768px)<br>

$.Pages.isVisibleSm()

Returns true if the current viewport is a small device. ex: Tablets (≥768px)<br>

$.Pages.isVisibleMd()

Returns true if the current viewport is a medium device. ex: Desktops (≥992px)<br>

$.Pages.isVisibleLg()

Returns true if the current viewport is a large device. ex: Desktops (≥1200px)<br>

$.Pages.getUserAgent()

Reads the pre-set user-agent class from `body` and returns either 'mobile' or 'desktop'<br>

$.Pages.setFullScreen(element)

Makes the given element to go full-screen mode. ex: `$.Pages.setFullScreen(document.querySelector('html'));`<br>

$.Pages.getColor(color,opacity)

Returns the `rgba` value for a given [Pages contextual color](http://pages.revox.io/dashboard/latest/html/condensed/color.html) and opacity.

## How to auto re-initialize Pages plugins

Pages JS has initialize third-party plugins like select2, selectfx etc using data attributes. Sometimes you want to reinitialize these plugins after AJAX or DOM change.\
\
Use the following link of code :

`$.Pages.init();`