Afficher un message d’avertissement avec Jquery au cas où l’internaute utilise IE6.

IE-6 un cauchemar pour les webdesigners (j’ai aussi passé un moment à trouver des astuces à cause de ce navigateur…).

Bref ça vous dirait un tutoriel qui vous explique comment intégrer avec Jquery un message d’avertissement seulement si l’internaute utilise encore IE6?

Je vous indique comment faire de a à z avec la fonction .show().

IE-6 c’est quoi? Oui, c’est possible que certains d’entre vous ne sachent pas ce que c’est vu l’ancienneté de ce navigateur… Il est encore sur le marché même s’il tend à disparaître. Accélérons donc les choses avec ce tutoriel bien sympathique.

1ère Étape: Installez IE-6 pour vérifiez par la suite que le Jquery fonctionne.

Pour cela, il faudra télécharger multiple IE. Si je me rappelle bien, vous aurez le choix alors installez que le nécessaire IE6…

2nd Étape: Téléchargez la dernière librairie Jquery.

Alors je cherche un peu sur le net et hop voilà le lien direct Jquery. Copiez tout et collez le dans votre éditeur de code et sauvegardez le sous jquery.js

Bon de toute façon à la fin de l’article, je vous laisse gracieusement les fichiers sources avec un librairie Jquery et tout ce qu’il faut pour que l’exemple tourne.

3ème Etape: on écrit le code HTML.

<div id="againstie6">IE 6 fais gaffe à toi je vais appeler un exorciste.... Bon tu l'auras voulu:" <a href="http://www.mozilla-europe.org/fr/firefox/"> Firefox</a> fait que IE6 sorte de mon ordinateur!!"</div>

<p>Si IE 6 est parmis nous faîtes que le message d’alerte s’affiche au dessus de ce texte…. OUHHHHH OUHHHH </p>
<p>Pas de message d’alerte alors la page n’a pas été ouverte avec IE6 ou une version inférieure sinon un block rouge apparaît.</p>

Tout ceci entre les deux balises body.

4ème Étapes : on écrit le CSS.

#againstie6 {
display: none;
margin-top:0;
text-align:center;
background: red;
color:#FFF;
width:100%;
height: 100px;
font-size:50px;
}
p{
font-size: 25px;
padding:10px;
}

Le plus important ici est le display: none; pour la div againstie6. Ce paramètre CSS fera que le texte entre

<div id="againstie6"></div>

n’apparaîtra pas à ce stade du développement mais nous allons le faire apparaître ensuite grâce au javascript.

5ème et dernière étape : Intégration du Jquery.

On intègre la librairie Jquery entre les balises html head comme ceci:

<script type="text/javascript" src="jquery.js"></script>

Puis on développement le Javascript. C’est ici que le slogan « write less, do more » de Jquery prend tout son sens:

$(document).ready(function() {

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){

$(« #againstie6″).show(« slow »);

}
});

Pour la petite explication, le .show permet d’annuler le display: none; cité plus haut. La div apparaît alors uniquement sous IE6.

Sauvegarder ensuite ce fichier en .js et nommé le againstie6 pour faire comme moi… puis intégrer le dans le html :

<script type='text/javascript' src='againstie6.js'></script>

Voila tout est en place. Vous pouvez maintenant le tester avec votre navigateur et IE6 ensuite.

La source se trouve en bas de cet article.

J’ai mis une source plus récente et plus fluide pour l’affichage.

Appartenant à la catégorie Jquery

2 Comments

  1. juhau dit:

    je profite de ce petit tuto pour exprimer ma vision de ce genre de script.

    Ainsi identifier un navigateur comme IE6 que l’on sait être obsolete est une chose. Mais qu’on s’en serve pour interdire l’accès à ces utilisateurs IE6 en est une autre.

    Ensuite qu’on se serve de cette mise en place pour informer un utilisateur que son navigateur doit être mis à jour pour jouir pleinement du fonctionnel d’un site Internet en est une autre.

    Je suis partisan d’offrir un site au plus grand nombre et de ne laisser personne sur le bas côté, sous prétexte qu’il est plus compliqué de traiter IE6.

    voilou sinon good job, prochaine étape nous faire un petit effet de slide pour rendre cet effet plus smooth.

    avec un timer pour que l’avertissement disparaisse tout seul, Sans action de l’utilisateur..

  2. Ethno Urban dit:

    Je suis partisan d’offrir un site au plus grand nombre et de ne laisser personne sur le bas côté, sous prétexte qu’il est plus compliqué de traiter IE6.

    Je suis d’accord avec toi cela dit il faut bien faire une accroche pour lire cet article. Cela dit je développe tout mes sites clients en le faisant passer dans IE6 et je corrige les éventuels bugs…

    En ce qui concerne ses éventuels améliorations (évidemment là l’exemple est loin d’être design..), je ferai en sorte que ca soit plus smooth et mieux intégré.

    L’idée du timer me plait beaucoup, je vais donc faire mon possible pour ajouter cette fonction ainsi que d’autres petites idées qui me sont venues en cours de route.