Home

Outdated Browser est un script JS permettant d’ajouter sur ses pages web, la détection des versions navigateurs trop vieilles.

Outdated Browser est un script JS permettant d'ajouter sur ses pages web, la détection des versions navigateurs trop vieilles.

Voici un script intéressant pour sensibiliser le grand public à la mise à jour de leur navigateur pour une meilleure expérience de surf sur le web.

Outdated Browser propose un script très simple mais visuellement intéressant pour inciter nos visiteurs à mettre à jour (leur Internet Explorer :)).

Le fonctionnement est plutôt simple:

Fonctionnement Outdated Browser

Un message averti l’utilisateur que son navigateur est trop vieux et lorsqu’il va cliquer sur le message, la liste des navigateurs dans leur dernière version + un bouton pour les télécharger apparait.

Pour l’intégrer sur votre site, voici les étapes à suivre:

Intégrer le code HTML requis dans le corps de votre page:

1.<div id="outdated">
2.<h6>Votre navigateur n'est pas à jour !</h6>
3.<p>Merci de mettre à jour votre navigateur pour une meilleure expérience utilisateur. <a id="btnUpdate" href="http://outdatedbrowser.com/">Mettre à jour mon navigateur maintenant</a></p>
4.<p id="btnClose"><a href="#">Fermer</a></p>
5.</div>

Insérer le script JS et le CSS du plugin:

1.<style type="text/css" src="outdatedBrowser.min.css"></style>
2.<script src="outdatedBrowser.min.js"></script>

Puis déclenchez le script:

01.//PLAIN JAVASCRIPT
02.//event listener form DOM ready
03.function addLoadEvent(func) {
04.var oldonload = window.onload;
05.if (typeof window.onload != 'function') {
06.window.onload = func;
07.} else {
08.window.onload = function() {
09.oldonload();
10.func();
11.}
12.}
13.}
14.//call plugin function after DOM ready
15.addLoadEvent(
16.outdatedBrowser({
17.bgColor: '#3f3f3f',
18.color: '#e3e3e3',
19.lowerThan: 'IE10'
20.})
21.);
22.//USING jQuery
23.$( document ).ready(function() {
24.outdatedBrowser({
25.bgColor: '#3f3f3f',
26.color: '#e3e3e3',
27.lowerThan: 'IE10'
28.})
29.});

A vous de voir si vous souhaitez l’appeler avec ou sans jQuery.

Vous n’aurez plus qu’à choisir la version d’IE minimum pour déclencher le script.

Site Officiel

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s