Home Web Development JavaScript JavaScript Detect Browser Program | Detect Browser In JS

JavaScript Detect Browser Program | Detect Browser In JS

April 27, 2019

20613

How to detect browser using JavaScript? Here is the solution: JavaScript Detect Browser Program.

Mostly all websites we visit they know our info like Device, Country, Browser, Network Provider, etc. Even this website also use google analytics for visitors count and little information like country, time spent on this site. Big websites like Google, Facebook they track all your activity.

These types of a large platform, they have an expert developer team to create tracking program. They use very high-level programming to get user information. We will not create a tracking program, just today we will understand how the website detects with a very basic program.

Basically, Today I am sharing a Browser Detect Program using jQuery a JavaScript framework. This JavaScript Detect Browser Program detects which browser you using currently. This is a very simple program, always learn from scratch for being an expert. I created this program for detecting only 4 popular browser – Google Chrome, Safari, Mozilla, Edge / Interner Explorer.

I used 4 browsers icons I had mentioned above. When you will run this program on your browser, then your browser icon will colorful and animate. In this time other browsers icons will black and white and static. Let’s take a preview of this program to get an idea of how this program actually is.

Preview Of Browser Detecting Program

First, see this preview to know how this program looks like. This is a video preview not live coding function.

Now you can see you this program look visually. First I run this on Chrome then I run on Edge you can see clearly on video. If you like this then go for source code.

JavaScript Detect Browser Source Code

Before sharing source code, let’s talk about this program. As you know this is a browser detect program in javascript. I used jQuery to create this program that is a javascript library. This program is very basic, it has fewer lines of codes. I used the jQuery / JavaScript userAgent.match command for creating this feature.

You have to create 3 files for this program. One for HTML, One for CSS, and one for JavaScript. Follow the steps to create this without error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--code by webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JavaScript Browser Detect | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="style.css">

  
</head>

<body>

  <div class="container">
  <div class="icon chrome"></div>
  <div class="icon safari"></div>
  <div class="icon firefox"></div>
  <div class="icon msie"></div>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script  src="function.js"></script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>JavaScript Browser Detect | Webdevtrick.com</title>

</head>

<body>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* code by webdevtrick ( https://webdevtrick.com ) */
*, *:before, *:after, *:focus, *:active, *:focus:active {
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 10px;
}


.container {
  left: 50vw;
  position: absolute;
  top: 50vh;
  transform: translateX(-50%) translateY(-50%);
}
.container .icon {
  display: inline-block;
  filter: grayscale(100%);
  height: 8rem;
  position: relative;
  transition: all .3s ease-out;
  width: 8rem;
}
.container .icon:after {
  border-radius: 50%;
  bottom: 2rem;
  content: "";
  height: .5rem;
  left: 20%;
  position: absolute;
  width: 60%;
}
.container .icon.active {
          animation-name: hover;
          filter: grayscale(0%);
}
.container .icon.active:after {
          animation-name: hoverShadow;
}
.container .icon.active, .container .icon.active:after {
          animation-duration: .8s;
          animation-timing-function: ease-out;
          animation-iteration-count: infinite;
          animation-direction: alternate;
}
.container .icon.chrome {
  background-image: url("https://icons.iconarchive.com/icons/appicns/simplified-app/256/appicns-Chrome-icon.png");
  background-repeat: no-repeat;
  background-size: 8rem 8rem;
}
.container .icon.safari {
  background-image: url("https://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/256/safari-icon.png");
  background-repeat: no-repeat;
  background-size: 8rem 8rem;
}
.container .icon.firefox {
  background-image: url("https://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Firefox-icon.png");
  background-repeat: no-repeat;
  background-size: 8rem 8rem;
}
.container .icon.msie {
  background-image: url("https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Internet_Explorer.png");
  background-repeat: no-repeat;
  background-size: 8rem 8rem;
}


@keyframes hover {
  from {
    top: 0;
            transform: scaleX(1) scaleY(1);
  }
  to {
    top: -1.6rem;
            transform: scaleX(0.9) scaleY(1.05);
  }
}

@keyframes hoverShadow {
  from {
    bottom: 2rem;
    left: 20%;
    width: 60%;
  }
  to {
    bottom: .6rem;
    left: 25%;
    width: 50%;
  }
}

/* code by webdevtrick ( https://webdevtrick.com ) */

*, *:before, *:after, *:focus, *:active, *:focus:active {

box-sizing: border-box;

outline: none;

}

html {

font-size: 10px;

}

.container {

left: 50vw;

position: absolute;

top: 50vh;

transform: translateX(-50%) translateY(-50%);

}

.container .icon {

display: inline-block;

filter: grayscale(100%);

height: 8rem;

position: relative;

transition: all .3s ease-out;

width: 8rem;

}

.container .icon:after {

border-radius: 50%;

bottom: 2rem;

content: "";

height: .5rem;

left: 20%;

position: absolute;

width: 60%;

}

.container .icon.active {

animation-name: hover;

filter: grayscale(0%);

}

.container .icon.active:after {

animation-name: hoverShadow;

}

.container .icon.active, .container .icon.active:after {

animation-duration: .8s;

animation-timing-function: ease-out;

animation-iteration-count: infinite;

animation-direction: alternate;

}

.container .icon.chrome {

background-image: url("http://icons.iconarchive.com/icons/appicns/simplified-app/256/appicns-Chrome-icon.png");

background-repeat: no-repeat;

background-size: 8rem 8rem;

}

.container .icon.safari {

background-image: url("http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/256/safari-icon.png");

background-repeat: no-repeat;

background-size: 8rem 8rem;

}

.container .icon.firefox {

background-image: url("http://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Firefox-icon.png");

background-repeat: no-repeat;

background-size: 8rem 8rem;

}

.container .icon.msie {

background-image: url("https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Internet_Explorer.png");

background-repeat: no-repeat;

background-size: 8rem 8rem;

}

@keyframes hover {

from {

top: 0;

transform: scaleX(1) scaleY(1);

}

to {

top: -1.6rem;

transform: scaleX(0.9) scaleY(1.05);

}

@keyframes hoverShadow {

from {

bottom: 2rem;

left: 20%;

width: 60%;

}

to {

bottom: .6rem;

left: 25%;

width: 50%;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ copy these codes and paste in your JS file.

/* code by webdevtrick ( https://webdevtrick.com ) */
$(document).ready(function() {
  var ua = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i),
      browser;
  if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*11\./i)) {
    browser = "msie";
  }
  else {
    browser = ua[1].toLowerCase();
  }
  $('div.icon.' + browser).addClass("active");
});

/* code by webdevtrick ( https://webdevtrick.com ) */

$(document).ready(function() {

var ua = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i),

browser;

if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*11\./i)) {

browser = "msie";

}

else {

browser = ua[1].toLowerCase();

}

$('div.icon.' + browser).addClass("active");

});

That’s It. Now you have successfully created a JavaScript Browser Detect program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

11 COMMENTS

Long Nguyen April 28, 2019 At 12:28 am

A vanilla JS version would be awesome, because from what I can see, this doesn’t extensively use jQuery.

Reply
- shaan April 28, 2019 At 2:56 am
  
  Sorry buddy, at this time I don’t know vanilla. I am going to start learning for today.
  
  Reply
Kustiana April 28, 2019 At 7:53 am

Oke keren makasih info nya

Reply
- shaan April 28, 2019 At 8:07 am
  
  terima kasih banyak, tetap terhubung.
  
  Reply
Daniel April 28, 2019 At 12:38 pm

“Even this website also use google analytics for visitors count and little information like country, time spent on this site”

… And yet you don’t ask for permission to gather this information from me? This is GDPR law for visitors from the EU. HOWEVER! Personally it’s refreshing to come cross a site without all the annoying nag screens. But thought I would point it out nonetheless.

Reply
- shaan April 28, 2019 At 4:10 pm
  
  Sorry, I will fix this soon.
  
  Reply
- Marco Prova April 28, 2019 At 7:19 pm
  
  If the collected data is anonymous, as it is in Google Analytics, no consent is required.
  
  P. S. jQuery is not a framework but a library
  
  Reply
juan pablo April 28, 2019 At 10:52 pm

Muy bueno, me parece genial,saludos.

Reply
- shaan April 29, 2019 At 2:42 am
  
  Gracias por tu comentario, Mantente conectado.
  
  Reply
Stevland Ambrose September 7, 2019 At 8:38 pm

This is very useful. I was hoping someone had worked out how to add mobile browser detection into the mix though.

Reply
jala December 15, 2019 At 10:56 pm

Is there a script to detect the browser and block the browser?
Like that noone with an google chrome browser can visit my website?
Regards

Reply