How to detect a browser using jQuery?

Question

I have an issue with a css which is implement by the jQuery, css is work fine in mozilla but not in chrome so need to make a changes in css according to the browser BUT in JQUERY

Anyone help me to get the browser whether it is firefox,chrome or any other.

 if ($browserFirefox) {
    ....code 
    $('#test').css("margin-top","10%");
 }
 if ($browserChorme) {
   code goes here
 }
 if ($browserXYZ) {
   code goes here
 }

Ask instead question regarding `css is work fine in mozilla but not in chrome`?! What is the issue with `margin-top: 10%;`? — A. Wolff, Jun 06 '15 at 11:28
possible duplicate of [Browser detection in JavaScript?](http://stackoverflow.com/questions/2400935/browser-detection-in-javascript) — GillesC, Jun 06 '15 at 11:30
Possible duplication of http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser — Thomas Weglinski, Jun 06 '15 at 11:31
Possible duplication http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser — Samir Das, Jun 06 '15 at 11:32
if none of the answers worked or you are facing problems, let me know so I can help — AmmarCSE, Jun 06 '15 at 20:32

score 10 · Answer 1 · answered Jun 06 '15 at 11:33

Use navigator.userAgent for browser information, like:

if (navigator.userAgent.search("MSIE") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("Chrome") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("Firefox") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
    //code goes here
}
else if (navigator.userAgent.search("Opera") >= 0) {
    //code goes here
}

score 1 · Answer 2 · answered Jun 06 '15 at 11:31

If you need to do changes in css with differente browsers ,you can follow blow codes easily

if Webkit (Safari/Chrome) {

 #myDIV {margin-top:-3px}

 } else if (Firefox) {

 #myDIV {margin-top:0px}

 } else { // IE and other browsers

  #myDIV {margin-top:1px}
 }

Although in level of Jquery you can use jquery.browser.Take a look at this http://api.jquery.com/jquery.browser/

score 1 · Answer 3 · answered Mar 29 '18 at 08:31

For a better use of the answer of @Nikhil Butani. Happy coding ;)

if (navigator.userAgent.search("MSIE") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("Chrome") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("Firefox") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
    //code goes here
}
else if (navigator.userAgent.search("Opera") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("NET") >= 0) {
    //code goes here
}
else if (navigator.userAgent.search("Edge") >= 0) {
    //code goes here
}

score 0 · Answer 4 · edited May 23 '17 at 10:31

0

You can use $.browser.

if($.browser.mozzila){
}

However, I strongly recommended you try to come up with a cross-browser solution. User-agent sniffing is not a recommended approach as it can break easily(think multiple versions of same browser).

See Downsides of using the navigator object / user-agent sniffing for detecting IE versions and Browser Detection (and What to Do Instead)

Update For jQuery > 1.9

This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

edited May 23 '17 at 10:31

Community

1
1

answered Jun 06 '15 at 11:29

AmmarCSE

28,122
5
36
49

1

No, this has been removed from jq 1.9 – A. Wolff Jun 06 '15 at 11:29

score 0 · Answer 5 · answered Jun 06 '15 at 11:29

You might be as well fixing the issue in your css rather than with scripting. Check out http://browserhacks.com/ for browser specific targeting information. You can still use jquery to put a particular class on it, but then declare things differently in your css

score 0 · Answer 6 · answered Jun 06 '15 at 11:30

0

This can be achieved with the jQuery.browser property

if ($.browser.msie) {
    ....code 
    $('#test').css("margin-top","10%");
 }
 if ($.browser.webkit) {
   code goes here
 }
 if ($.browser.mozilla) {
   code goes here
 }

Should do the work.

answered Jun 06 '15 at 11:30

daniel451

9,128
15
53
115

How to detect a browser using jQuery?

6 Answers6