CODEWITHSUNDEEP
jquery
user3592004
user3592004

Reputation: 245

How to detect a browser using jQuery?

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
 }

Upvotes: 1

Views: 28288

Answers (6)

gennaro esposito
gennaro esposito

Reputation: 11

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
}

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

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.

Upvotes: 0

NiiL
NiiL

Reputation: 2827

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
}

Upvotes: 10

Ashouri
Ashouri

Reputation: 906

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/

Upvotes: 1

daniel451
daniel451

Reputation: 10992

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.

Upvotes: 0

leapin_leprechaun
leapin_leprechaun

Reputation: 605

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

Upvotes: 0

Related Questions