Outdated Browser Detection in HTML with JavaScript - 'Did You Know?' Message

<script type='text/javascript'>
$(document).ready(function(){
	 $.reject({  
        reject: { 
        	msie: 10,
        	/* msie9:true,
        	msie8:true,
        	msie7:true, */
        	msie8:false,
        	msie7:false,
        	msie6:false,
        	firefox:35,
        	chrome:40,
        	unknown: false 
        },
        display: ['firefox','chrome','safari','msie'],
        browserShow: true,
        browserInfo: {  
        	chrome: {  
            	text: 'Google Chrome',    
            	url: 'http://www.google.com/chrome/'
        	},
        	firefox: {  
            	text: 'Mozilla Firefox',  
            	url: 'http://www.mozilla.com/firefox/'  
        	},
        	safari: {  
            	text: 'Safari',  
            	url: 'http://www.apple.com/safari/download/'  
        	},
        	opera: {  
            	text: 'Opera',  
            	url: 'http://www.opera.com/download/'  
        	},
        	msie: {  
            	text: 'Internet Explorer',  
            	url: 'http://www.microsoft.com/windows/Internet-explorer/'  
        	}  
    	},
        header: 'Did you know that your Internet Browser is out of date?',  
        paragraph1: 'You are currently using an unsupported browser',   
        paragraph2: 'To proceed, please upgrade your browser to the latest version',  
        //closeMessage: 'Close this window at your own demise!',
        close: false,
        closeESC: false,
        closeCookie: false,
        imagePath: '/images/browsers/',
        overlayBgColor: '#000',
        overlayOpacity: 0.8,
        fadeInTime: 'fast',
        analytics: false     
    });
});
</script>
<p>This code snippet demonstrates how to use the <code>reject.js</code> library to detect outdated browsers and display a notification to the user. The <code>reject</code> function, triggered when the page loads, checks the user's browser version against the specified requirements. Here's a breakdown:</p>
<ul>
<li><strong><code>reject</code> Object:</strong> This object defines the browser versions considered outdated, such as Internet Explorer 6, 7, and 8, as well as specific versions of Firefox and Chrome. You can customize this object to include or exclude specific browsers or versions.</li>
<li><strong><code>display</code> Array:</strong> This array specifies the browser types for which the notification will be displayed. For example, if <code>display: ['firefox','chrome','safari','msie']</code> is set, the notification will be shown for users using these browsers.</li>
<li><strong><code>browserInfo</code> Object:</strong> This object provides details about different browsers, including their names and download URLs. This information is used to display a suitable upgrade message to the user.</li>
<li><strong><code>header</code>, <code>paragraph1</code>, <code>paragraph2</code>:</strong> These properties define the text content of the notification, which prompts the user to update their browser.</li>
</ul>
<p>The notification will be displayed under the following conditions:</p>
<ol>
<li><strong>Outdated browser:</strong> If the user's browser version matches one of the outdated versions listed in the <code>reject</code> object, the notification will be displayed.</li>
<li><strong>Supported browser in <code>display</code> array:</strong> If the user's browser is included in the <code>display</code> array, the notification will be shown. This ensures that the notification is displayed for users who might not have the most up-to-date browser, but whose browser is still supported.</li>
</ol>
<p>When the notification is displayed, it will include:</p>
<ul>
<li>The header text: 'Did you know that your Internet Browser is out of date?'</li>
<li>Two paragraphs: 'You are currently using an unsupported browser' and 'To proceed, please upgrade your browser to the latest version'</li>
<li>Browser-specific information (name and download link) based on the detected browser.</li>
</ul>
<p>You can also configure various options, such as:</p>
<ul>
<li><strong><code>close</code>:</strong> Whether to allow the notification to be closed</li>
<li><strong><code>closeESC</code>:</strong> Whether to allow closing the notification by pressing the ESC key</li>
<li><strong><code>closeCookie</code>:</strong> Whether to use a cookie to prevent the notification from reappearing after closing it</li>
<li><strong><code>imagePath</code>:</strong> The path to an image directory for browser icons</li>
<li><strong><code>overlayBgColor</code>:</strong> The background color of the overlay that appears behind the notification</li>
<li><strong><code>overlayOpacity</code>:</strong> The opacity of the overlay</li>
<li><strong><code>fadeInTime</code>:</strong> The duration of the fade-in animation for the notification</li>
<li><strong><code>analytics</code>:</strong> Whether to enable analytics tracking for the notification</li>
</ul>