How to show/hide a jquery script only on Firefox

Question

Trying to show and hide js only on Firefox browser. There are another question about Detect all Firefox versions, but it is not answer of my question so i have asked this question.

HTML:

<div id="about_me">
This Text color will be change
</div>

Show this only on Firefox:

$("#about_me").addClass("red");

I have trying this but not working:

<!--[if Gecko ]>
$("#about_me").addClass("red");
<![endif]-->

And Show this to other browsers and hide on Firefox:

$("#about_me").addClass("blue");

How show JS to different browser, that text color will be red only on Firefox and blue on other browsers.

Please See this Fiddle >>
Thanks.

Possible duplicate of http://stackoverflow.com/questions/7000190/detect-all-firefox-versions-in-js — Jeremy Thille, Jun 04 '15 at 06:27
@Jeremy Thille no this is totally different topic. That was versions Detection. :) — Aariba, Jun 04 '15 at 06:29
Uh no, that's about Firefox detection, using `if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)`. Not so "totally different" :) — Jeremy Thille, Jun 04 '15 at 06:31

Sudharsan S · Accepted Answer · 2015-06-04T13:19:48.873

2

Try with navigator.userAgent used to detect the browser

The userAgent property returns the value of the user-agent header sent by the browser to the server.

The value returned, contains information about the name, version and platform of the browser.

if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1){
    $("#about_me").addClass("red");
}
else{    
    $("#about_me").addClass("blue");    
}

Fiddle

About Naviagate Useragent | MDN

Note : Run the fiddle in all browsers. I checked in chrome, safari, IE and firefox

edited Jun 04 '15 at 13:19

answered Jun 04 '15 at 06:40

Sudharsan S

15,336
3
31
49

Thanks, you have not use `toLowerCase()` there are any possibilities to any error? some browsers give the userAgent in uppercase or captialize. – Aariba Jun 04 '15 at 07:00
1

Please change Firefox to firefox, bcz it's not working. – Aariba Jun 04 '15 at 12:16
@Aabira - Thanks for the update i forgot it actually – Sudharsan S Jun 04 '15 at 13:20

Techy · Answer 2 · 2015-06-04T06:54:09.927

1

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
$("#about_me").addClass("red");
}

Alternatively you can use like this also

if(navigator.userAgent.indexOf('Firefox') > -1)
{
$("#about_me").addClass("red");
}

edited Jun 04 '15 at 06:54

answered Jun 04 '15 at 06:31

Techy

2,626
7
41
88

1

Although it may work, not sure it's simpler than `if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)`. – Jeremy Thille Jun 04 '15 at 06:32
@Techy fiddle please. – Aariba Jun 04 '15 at 06:35
@Techy Not me dear, i think it's "Jeremy Thille" – Aariba Jun 04 '15 at 06:38
@Techy please give a fiddle from my question. i will Up-vote, and accept you Ans. – Aariba Jun 04 '15 at 06:40
1

@Aabira Suppose some browsers give the userAgent in uppercase or captialize we don't know exactly what browser throw. SOo we prevently alert use toLowercase() for the userAgent make it all string as lowercase – Sudharsan S Jun 04 '15 at 06:51
1

For example FIREFOX, Firefox it comes using toLowerCase() is 'firefox' – Sudharsan S Jun 04 '15 at 06:52
navigator.userAgent returns data with Firefox as string.You can use without toLocaleLowerCase() also.But you need to change the string as Firefox – Techy Jun 04 '15 at 06:53
1

@Aabira i have explained and changed the answer also.Hope you understood – Techy Jun 04 '15 at 06:54

Raul Souza Lima · Answer 3 · 2015-06-04T06:54:10.193

1

It should work:

HTML:

<br>
<div id="about_me">
     This Text color will be change
</div>e here

CSS:

.red { color: red; }
.blue { color: blue; }

JS:

var userAgent = navigator.userAgent.toLocaleLowerCase();  

if(userAgent.indexOf('firefox') > -1) {
    $("#about_me").addClass("red");
} else {
    $("#about_me").addClass("blue"); 
}

Fiddle

http://jsfiddle.net/pyg9ynb5/2/

edited Jun 04 '15 at 06:54

answered Jun 04 '15 at 06:44

Raul Souza Lima

51
5

About the `toLocaleLowerCase()` it's just to lowercase the entire user agent string. Actually, it's not need, you can remove if you want and compare with 'Firefox' on if statement. If it's ok for you, please accept my answer as correct. – Raul Souza Lima Jun 04 '15 at 06:58

How to show/hide a jquery script only on Firefox

3 Answers3