0

How to use Alertify.js

I was searching for a nice and clean way to show a customizable popup message.

After some research I found the Alertify.js JavaScript libary. Although the developer hompage offers some great examples, I couldn’t find out how to integrate the JavaScript file into my homepage. After hours and hours of trying I finally got it working:

alertify_dialog_example

1.Downloading alertify.js

Download the full alertify.js package HERE and extract the content.

2.Uploading alertify.js and CSS styles

 Upload the following files from the extracted folder to your server:

  • alertify.js-0.3.9\src\alertify.js
  • alertify.js-0.3.9\themes\alertify.core.css
  • alertify.js-0.3.9\themes\alertify.default.css

3.Integrating alertify.js and CSS styles 

Open your functions.php file and insert the following lines:

// Include alertify.js script and css
function alertifyJs()
{
wp_enqueue_script('alertifyJsScript', 'PATH-TO-ALERTIFY-JS',array('jquery'),'1.0',true);
wp_enqueue_style('alertify-core-style', 'PATH-TO-ALERTIFY-CORE-CSS', false, '1.0');
wp_enqueue_style('alertify-default-style', 'PATH-TO-ALERTIY-DEFAULT-CSS', false, '1.0');
}
add_action('wp_enqueue_scripts','alertifyJs');

You just have to edit the:

  • PATH-TO-ALERTIFY-JS
  • PATH-TO-ALERTIFY-CORE-CSS
  • PATH-TO-ALERTIY-DEFAULT-CSS

to the paths where you previously uploaded the files on your server.

If you’re not using WordPress you have to find antother way to include those files. A simple way ist to add the following lines to your homepage header:

<script type="text/javascript" src="PATH-TO-ALERTIFY-JS"></script>
<link rel="stylesheet" type="text/css" href="PATH-TO-ALERTIFY-CORE-CSS">
<link rel="stylesheet" type="text/css" href="PATH-TO-ALERTIFY-DEFAULT-CSS">

4.Setting up alertify.js

Now you can insert the alertify functions from the authors homepage for example:

// alert dialog
alertify.alert("Message");

Leave a Reply

Your email address will not be published.