Prevention is better than Cure
This is a famous saying and it matters a lot while making robust applications. This plugin does its part to help you achieve that.
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.
To experience how this plugin works you just need to disconnect your Internet Connection or bring your laptop's Battery Level below 15% while keeping it still unplugged or both.
If the plugin is initialized with disableElements:[jQuery/CSS selector]
then those elements will be disabled for the two peril situations stated above.
See this Sample Form's Submit Button below,
Heads Up! This plugin will be supporting LocalStorage in its next release.
Note: As of Aug 2013, the Battery Level detection functionality of this plugin only works in Firefox.
Give a few seconds to appreciate my work before we get started on how to use it.
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 -
<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>
Now this is where FailSafe plugin is unique, it can be used in two ways:
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(); };
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>
You can directly download the zip file or goto to GitHub for a Fork or Clone:
Download Download from GithubVariable | 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 chargeThreshold percentage 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 |
Hey peeps, I am Ram Patra. I am a Developer as well as Designer. After receiving a good response from my 1st plugin, AnimateScroll, I decided to make a little more complex plugin, and I ended up with this. Hope you all like it, do give your feedbacks @twitter, and like our page on facebook to stay abreast of all new updates.
Developed & Designed by Ram Patra
© Copyrights by Compzets.com