Script pour navigateur autre que Google Chrome

Version imprimable

Je dispose du code suivant, et j'aimerai l'appliquer que si le navigateur est différent de Google Chrome, je ne forces pas l'utilisateur à le télécharger, juste l'avertir que le site n'est pas entièrement configuré jusqu'à présent pour d'autres navigateurs (surtout IE):

J'ai vu quelques discussions sur le net à propos du appName, mais je n'arrive pas à comprendre et à l'appliquer sur mon code JS.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#SiPasGoogleChrome {
z-index:1000000;
position: absolute;
top: 300px;
left:40%;
width:520px;
height:50px;
text-align:left;
color: #0090FF;
padding:5px;
background-color:black;
border: 3px solid #0090FF;
border-radius: 10px;
font-size: 15px;
font-weight : bold;
}
#SiPasGoogleChrome span{
z-index:1000002;
position:absolute;
left:10px;
top:12px;
transition: all 1s; 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#SiPasGoogleChrome #GC{
z-index:1000001;
left:472px;
filter: saturate(100%);
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
position:relative;
height:50px;
width:50px;
transition: all 0.5s; 
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
 
#SiPasGoogleChrome #GC:hover{
filter: saturate(200%);
-webkit-filter: saturate(200%);
-moz-filter: saturate(200%);
-o-filter: saturate(200%);
cursor:pointer;
}
 
#grisement{
position: fixed;
z-index:999999;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity:0.5;
}

Code:

1
2
3
4
5
6
7
8
<div  id="grisement" style=""></div>
<div id="SiPasGoogleChrome">
<a href="http://www.google.fr/intl/fr/chrome/browser/" target="_blank"><img id="GC" src="http://i.pcworld.fr/1205791-chrome-10-logo.png" title="Télécharger" /></a>
<span>
Si vous n'utiliser pas le navigateur Google Chrome,<br />
Il est fortement recommander de l'utiliser pour ce blog.
</span>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var IMG = document.getElementById('GC');
var DIV = document.getElementById('SiPasGoogleChrome');
var GRIS = document.getElementById('grisement');
var WIDGET = document.getElementsByClassName('.tabs-outer');
 
IMG.onclick = function(){
  IMG.flag = true;
  DIV.style.visibility='hidden';
  IMG.style.visibility='hidden';
  GRIS.style.visibility='hidden';
  WIDGET.style.visibility='hidden';
;}

Aperçu.

Merci de votre aide.

24/11/2013, 19h18
SylvainPV
Bon, il y a déjà du mieux dans la démarche. Au moins tu n'envoies pas complètement promener les utilisateurs de Firefox, Opera, IE11 et autres navigateurs tout à fait convenables. C'est un premier pas avant de parvenir à un support complet et uniforme de tous les navigateurs. Tu peux pour le moment faire un test comme ceci :
Code:

1 2 3 if(navigator.userAgent.indexOf("Chrome") === -1){ //on suppose que ce n'est pas Chrome }
Mais ne t'arrête pas en si bon chemin, et essaie de régler les problèmes que tu rencontres avec les autres navigateurs. Cela augmentera l'audience de ton blog et ne rendra pas furax les adeptes de Firefox et Opera (car si tu prêches Chrome comme religion, il en va de même pour d'autres avec d'autres navigateurs...)

Citation:

Envoyé par SylvainPV

Mais ne t'arrête pas en si bon chemin, et essaie de régler les problèmes que tu rencontres avec les autres navigateurs. Cela augmentera l'audience de ton blog et ne rendra pas furax les adeptes de Firefox et Opera (car si tu prêches Chrome comme religion, il en va de même pour d'autres avec d'autres navigateurs...)

Je suis bien d'accord avec ça, je teste et je vous tiens au courant.

EDIT: Ce script ne fonctionne pas:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var IMG = document.getElementById('GC'); var DIV = document.getElementById('SiPasGoogleChrome'); var GRIS = document.getElementById('grisement'); var WIDGET = document.getElementsByClassName('.tabs-outer'); if(navigator.userAgent.indexOf("Chrome") === -1){ IMG.onclick = function(){ IMG.flag = true; DIV.style.visibility='hidden'; IMG.style.visibility='hidden'; GRIS.style.visibility='hidden'; WIDGET.style.visibility='hidden'; ;} }

25/11/2013, 21h29
NoSmoking

Bonjour,
je prendrais le problème à l'envers.
L'avertissement étant masqué par défaut, display:none, il suffit de le faire apparaître si l'on ne détecte pas le navigateur chrome.

Citation:

EDIT: Ce script ne fonctionne pas:

cela ne nous aide pas beaucoup sur le dysfonctionnement constaté par rapport à l'attendu.

Quoi qu'il en soit de nos jours aucunes raisons de ne pas arriver à concilier TOUS les navigateurs avec ton code.
25/11/2013, 21h32
pito2901

Citation:

Envoyé par NoSmoking

L'avertissement étant masqué par défaut, display:none, il suffit de le faire apparaître si l'on ne détecte pas le navigateur chrome.

Et ça donne quoi au niveau du code ? Car je suis complètement largué.

Voici un petit exemple perfectible mais c'est un point de départ

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Avertissement</title>
<style>
#avertissement{
  display:none;
  margin:25% auto;
  padding:1em;
  width:25em;
  border:1px solid red;
  text-align:center;
}
</style>
</head>
<body>
<div id="avertissement">
  Si vous n'utiliser pas le navigateur Google Chrome,
  Il est fortement recommander de l'utiliser pour ce blog.
</div>
<script>
if( navigator.userAgent.indexOf( 'Chrome') < 0){
  document.getElementById('avertissement').style.display = 'block';
}
</script>
</body>
</html>

26/11/2013, 08h12
Bovino
Code:

navigator.userAgent.indexOf("Chrome") === -1

Ah... tu veux cibler Opera aussi ? Peut-être Safari aussi du reste...
Code:

1 2 3 4 <span> Si vous n'utiliser pas le navigateur Google Chrome,<br /> Il est fortement recommander de l'utiliser pour ce blog. </span>
Ou comment revenir aux pires pratiques des années 90... fautes d'orthographe en plus :cry:

Je vous remercie mais à présent ça ne s'affiche plus, mais aussi sur Mozilla et IE à cause du style css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<style>
#ensembleSPGC{
display:none;
}

#SiPasGoogleChrome {
z-index:1000000;
position: absolute;
top: 300px;
left:40%;
width:520px;
height:50px;
text-align:left;
color: #0090FF;
padding:5px;
background-color:black;
border: 3px solid #0090FF;
border-radius: 10px;
font-size: 15px;
font-weight : bold;
}
#SiPasGoogleChrome span{
z-index:1000002;
position:absolute;
left:10px;
top:12px;
transition: all 1s; 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#SiPasGoogleChrome #GC{
z-index:1000001;
left:472px;
filter: saturate(100%);
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
position:relative;
height:50px;
width:50px;
transition: all 0.5s; 
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

#SiPasGoogleChrome #GC:hover{
filter: saturate(200%);
-webkit-filter: saturate(200%);
-moz-filter: saturate(200%);
-o-filter: saturate(200%);
cursor:pointer;
}

#grisement{
position: fixed;
z-index:999999;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity:0.5;
}

Code:

1
2
3
4
5
6
7
8
9
10
<div id="ensembleSPGC">
<div  id="grisement" style=""></div>
<div id="SiPasGoogleChrome">
<a href="http://www.google.fr/intl/fr/chrome/browser/" target="_blank"><img id="GC" src="http://i.pcworld.fr/1205791-chrome-10-logo.png" title="Télécharger" /></a>
<span>
Si vous n'utiliser pas le navigateur Google Chrome,<br />
Il est fortement recommander de l'utiliser pour ce blog.
</span>
</div>
</div>

Code:

1
2
3
if(navigator.userAgent.indexOf("Chrome") < 0){
document.getElementById('ensembleSPGC').style.display = '';
}

26/11/2013, 20h02
NoSmoking

:arf:

Citation:

document.getElementById('ensembleSPGC').style.display = '';

A quoi sert-il que je te mette un exemple

Citation:

document.getElementById('avertissement').style.display = 'block';
26/11/2013, 21h34
pito2901

Heu... Oui, j'avais testé avec 'block', et cela marche très bien, sauf que quand je le fais avec Mozilla par ex, quand je clique sur l'image, et bien le reste ne s'efface plus, dois-je remettre avec le code d'avant ? Si oui, comment ?

J'ai trouvé en fait:
Code:

1 2 3 4 5 6 7 8 9 var IMG = document.getElementById('GC'); var SPGC = document.getElementById('ensembleSPGC'); if(navigator.userAgent.indexOf("Chrome") < 0){ document.getElementById('ensembleSPGC').style.display = 'block'; IMG.onclick = function(){ IMG.flag = true; SPGC.style.visibility='hidden'; ;} }
Je vous remercie beaucoup jusqu'à présent :ccool:, mais j'ai voulu créer un autre topic, certes avec le même code mais un problème différent et un modérateur l'a supprimé, c'étais pour savoir comment peux-t-on afficher une seule fois ce message dans mon blog, genre s'il ouvre l'accueil, et bien le message s'affichera qu'à l'accueil et pas dans les pages suivantes... (Mais si il commence en ouvrant une autre page aussi...) ?

Merci de votre aide.