πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Glio.js is a javascript library to detects if the mouse of an user leaves the viewport / document borders of your website and when this happens, trigger your callback.

Core Java Script Events

Documentation

glio

Detects if the mouse of an user leaves the viewport / document borders of your website and when this happens, trigger your callback. Portuguese documentation.

Demo.

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
17+ βœ” 14+ βœ” 9+ βœ” 17+ βœ” 5+ βœ”

Reasons for use:

  • Increase your conversion rates!
  • Give visitors reasons to stay!
  • Grab your users’ attention!

Cases:

  • if you are using gliojs, paste your project here.

Articles about Exit-popups:

Install:

  • Npm: npm install gliojs
  • Bower: bower install gliojs
  • Cdn: https://cdnjs.cloudflare.com/ajax/libs/gliojs/0.0.7/glio.min.js

Import the library glio.min.js in 'dist' folder in your site. <script src='glio.min.js'></script>

Usage:

The arguments are a Arrays, where the first index is the direction and the second is a callback.

glio( [ direction, callback ] );

5 Directions:

  • top
  • top-left
  • top-right
  • bottom-left
  • bottom-right

Example:

  • top-left and top-right
    glio.init(       [ 'top-left', function () {           alert('this is top-left');         }       ],       [ 'top-right', function () {           alert('this is top-right');         }       ]     );
  • all directions
  glio.init(     [ 'top', function () {         alert('this is top.');       }     ],     [ 'top-left', function () {         alert('this is top-left');       }     ],     [ 'top-right', function () {         alert('this is top-right');       }     ],     [ 'bottom-left', function () {         alert('this is bottom-left');       }     ],     [ 'bottom-right', function () {         alert('this is bottom-right');        }     ]    );

Configurations:

glio.config.key = value; Set the configuration before the init.

  • screenWidthFragment: the quantity of parts the height and width screen will be divided. Default: 12.
  • centerTopHeight: height of 'top' direction. When the mouse is equal or major this value, the callback is triggered. Default: 10.
  • heightTopLeft: height of 'top-left' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30.
  • heightTopRight: height of 'top-right' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30.

This software is licensed under the MIT License.


You May Also Like