JS Tutorial
- Overview
- Documents
FailSafe is a jQuery plugin to help your application work correct even in peril situations. In other words, it takes care of situations like Lost Internet Connectivity and Low Battery Level. When a user loses Internet Connectivity or his laptop's Charge goes down, this plugin shows a very user-friendly message to the user. Optionally, this plugin can also disable some of the elements in the page which may require proper Internet Connectivity or Higher Battery Level to function properly.
Getting Started
You need to include a total of 3 files to use this plugin, just keep in mind that failsafe.js file to be included after the jQuery Library -
- jQuery Library File
- failsafe.css
- failsafe.js
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/failsafe.css"/>
<script src="js/failsafe.js"></script>
</head>
</html>
Usage
Now this is where FailSafe plugin is unique, it can be used in two ways:
Method 1:
If your app makes a XHR request somewhere than you can simply call$.failsafe.onOffline(options) and $.failsafe.onOnline(options)methods like shown below:
var XHR_function = function(url) {
var xhr;
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
}
else {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(e) {
if (xhr.readyState != 4) {
return;
}
if (xhr.status == 200) {
$.failsafe.onOnline(options);
} else {
$.failsafe.onOffline(options);
}
};
xhr.open("GET", url, true);
xhr.send();
};
Method 2:
If your app doesn't make a XHR request anywhere in the page (like this current page) then call the $.failsafe(options) method like shown below:
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/failsafe.css"/>
<script src="js/failsafe.js"></script>
<script>$.failsafe({checkUrl:'test.html'});</script>
</head>
</html>
The FailSafe plugin in this page is implemented via "Method 2", the code below shows how its called:
<script>
$(function(){
$.failsafe({checkUrl:'test.html',checkInterval:5000,disableElements:".btn"});
});
</script>
Options
| Variable | Description | Default Value | Valid Values |
|---|---|---|---|
| checkUrl | Link to any accessible file (Not Required for Method 1 but Mandatory for Method2) | null | "index.html" "img/picture.png" |
| checkInterval | Time Interval in milliseconds. After this interval the plugin will check for Internet Connectivity | 10000 | Any Number (possibly greater than 2000 or 3000 depending on your server) |
| onlineMsg | Message shown when the user gets online after being disconnected | Great! You are now online | Any String |
| offlineMsg | Message shown when user is disconnected from the Internet | Oops! you are not connected to the internet | Any String |
| chargingMsg | Message shown when the laptop is plugged-in after the Battery gets below the chargeThreshold percentage | Your battery is now charging, carry on with your work! | Any String |
| batteryLowMsg | Message shown when the battery runs below the chargeThresholdpercentage and is not in charging mode | Battery is quite low to continue, please plug in your laptop! | Any String |
| bothDownMsg | Message shown when both are down, Internet Connectivity as well as Battery | Both, your network as well as battery are down! | Any String |
| chargeThreshold | Percentage of Battery Level after which this plugin will show a message | 15 | Any number between 0 to 100 |
| disableElements | jQuery/CSS Selector of the elements to be Disabled | null | "#id" ".class-name" |
| checkNet | Tells the plugin whether to check for Internet Connectivity or not | true | Either true or false |
| checkBattery | Tells the plugin whether to check for Battery or not | true | Either true or false |
| removeDelay | Time delay in milliseconds taken to fade out the message | 4000 | Any Number |
