v1.6 (Feb 2013): Improved checking performance/bandwidth usage. Thanks Kematzy for your suggestion. Note: running the demo file of your desktop will continually display the connection warning, it needs to be on a webserver to work correctly.
v1.5 (Nov 2012): Fixed issue where checking was not resumed after the window/tab was moved back to the front after being minimised or behind another tab.
v1.4 (Oct 2012): Fixed issue where the config setting “checkInterval” was not being applied when specified manually by users. Note: this needs to be given in milliseconds.
v1.3 (Aug 2012): Changed main checknet function to accept an object of arguments, like $.fn.checknet(configObject), instead of a comma separated list, like $.fn.checknet(‘arg1′, ‘arg2′) – the latter won’t work any more. Inside the main function, this arguments object becomes part of the “checknet” global object, so you can now set checknet.config properties like checknet.config.checkInterval and checknet.config.warnMsg after calling the function initially inside your $(document).ready();. checknet.config.checkURL is still in there, in case for some wild reason you need to be able to attempt cross-domain requests, but I do not recommended that you customise this.
v1.1 (July 2012): Detects inactivity at the user’s end (if browser supports the “page visibility API”), suspends checking when the user is inactive (to save bandwidth and prevent uneccesary http requests). Corrected errors where disconnection was not detected in some cases (after connection had been disabled and then re-enabled).
You can view the demo at http://tomriley.net/checknet/
Load the page, then disable your internet connection (possibly by unplugging the network cable of your computer, or setting your device to “Airplane mode”). After a few seconds you will see a warning message appear at the top of the page, and the form’s submit button will be disabled. Re-activate your internet connection and you will see that the warning dissapears and the submit button is re-enabled.
To use the plugin on your page, first download the zip file from http://tomriley.net/checknet/checknet.zip
Place the checknet.css and checknet-1.3.min.js file in the location you are using for those file types on your site. I use /css/ and /js/ but you may have your own preference. The index.html file is there for demo purposes only, and for you to look at the code of to see how to use the plugin on your HTML files.
Inside the <head></head> tags of your site’s HTML files, add these lines of code:
<link rel=”stylesheet” href=”css/checknet.css” media=”all” />
If you put the checknet.css and checknet-1.3.min.js files in different locations than /css/ and /js/, you will need to change the references to where you put them. Also, if you already have a $(document).ready() listener on your page, you can put the $.fn.checknet(); line in there rather than adding another $(document).ready().
This all assumes that you already have jQuery included on your page. If you don’t, you can get instructions for using it from http://jquery.com/
After you call the $.fn.checknet() function, you have the option of then defining parameters in checknet’s configuration object which specify the interval between checking the connection (in seconds) and the message which appears to warn users when connection is not present. If you do not specify anything, the default is to check the connection at an interval of 5 seconds and for the warning text to be “No Internet connection detected, disabled features will be re-enabled when a connection is detected.”. You can read about these settings under “How it works” below. To specify an interval of 10 seconds, you would call the function like this:
checknet.config.checkInterval = 1000;
To specify a check interval of 10 seconds, and set the warning message to “There is no connection!!”, you would call the function like this:
checknet.config.checkInterval = 1000;
checknet.config.warnMsg = “There is no connection!!”;
It’s also worth noting that the warning message has the id ‘netWarn’, and that disabled submit buttons have the temporary class ‘tempDisabled’ while there is no connection detected – you can target these with your own CSS if you wish to customise them further (like, say, giving disabled buttons a red border or something?)
How it works
Permission to use
You can use the plugin for personal or commercial purposes as long as you give a link to tomriley.net or 3rdwavemedia.com in your code/comments. I’d love to hear from anyone who’s using this, whether you have suggestions on how to improve it or just want to give some feedback – show me what you’re making!