automatic javascript warning for old browsers

Goal: a simple solution to avoid old browsers

All web developer have problems with old browser, we spend to much time to solve old browser mystical bugs... Maybe as youtube or facebook you want to display a notice for users who has an old browser.

I reuse some of this codes to make a unique js file who must be include at the end of your website. He do all the work for you and display a popup at the top of you webpage.

This webpage use the lib, try to change your user-agent to see the popup with firefox and the module User-Agent Switcher.

Advantages

• write in native javascript, no conflicts with other js libs
• a simple javascript file to include, nothing to install or upload
• use a cookie to show the popup only one time

The simplest way

just put this code at the end of your webpage (just before closing body tag):

uncompressed source: http://zazabe.ismerging.us/browser-warning/browser-warning.auto.js

Customize the detection

I make a browserWarning class in native javascript who try to detect the browser version and launch a callback method if the browser is too old.

Methods

constructor - browserWarning(options)

options: js object
options by default, you can change one or more attribute by passing a js object at browserWarning instantiation

{
		// browser version need to be greater than this values
		lowerVersionFor: {
			ie      : 8, 
			safari  : 4, 
			opera   : 9.5,
			firefox : 3, 
			chrome  : 3
		},
		oldByDefault: false, //default detection status
		cookie: {
			enabled: true,
			name:    'browserWarning',
			value:   'allreadyWarned',
			expired: null
		}
	}

**browserWarning.test(callback)**

callback: function
test if the browser is old and call the callback method in this case.

Exemple

var badBrowser = new browserWarning({
		lowerVersionFor: {
			ie: 7,
			firefox: 2
		}
	});
	
	window.onload = function(){
		badBrowser.test(function(){
			alert('your browser is too old !');
		});
	}

source code

http://zazabe.ismerging.us/browser-warning/browser-warning.class.js

Used sources

I use many different sources to make this class:

• team-noir source code: I reuse the cookie principe
• jQuery library: I extract the expand method to allow my class to merge to js object (useful for constructor options)
• Peter-Paul Koch's browser detection code

Contact

My name is Michel Meyer, for any questions or support, contact me: michel[at]zazabe.fr