Add visual display
Faisal Salman
BIN
images/android.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
images/arch.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
images/bada.png
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
images/blackberry.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
images/bsd.png
Normal file
|
After Width: | Height: | Size: 8.5 KiB |
BIN
images/check.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
images/chrom.png
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
BIN
images/chromium.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
images/debian.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
images/fedora.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
images/firefox.png
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
images/freebsd.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
images/gentoo.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
images/ie.png
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
BIN
images/ipad.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
images/konqueror.png
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
images/linux.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
images/mac.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
images/mandriva.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
images/meego.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
images/mozilla.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
images/opera.png
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
images/pc.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
images/phone.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
images/redhat.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
images/safari.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
images/slackware.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
images/solaris.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
images/suse.png
Normal file
|
After Width: | Height: | Size: 7.6 KiB |
BIN
images/symbian.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
images/ubuntu.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
images/undefined.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
images/windows.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
452
index.html
@ -1,212 +1,240 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>UA-Parser.js - Lightweight JavaScript-based User Agent String Parser</title>
|
<title>UA-Parser.js - Lightweight JavaScript-based User Agent String Parser</title>
|
||||||
<meta name="author" content="Faisalman" />
|
<meta name="author" content="Faisalman" />
|
||||||
<meta name="description" content="UA-Parser.js is a lightweight JavaScript-based user-agent string parser library" />
|
<meta name="description" content="UA-Parser.js is a lightweight JavaScript-based user-agent string parser library" />
|
||||||
<meta name="keywords" content="user agent, parser, javascript, detect, details, new, browser, engine, mobile, device, operating system" />
|
<meta name="keywords" content="user agent, parser, javascript, detect, details, new, browser, engine, mobile, device, operating system" />
|
||||||
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Varela|Varela+Round' rel='stylesheet' type='text/css'>
|
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Varela|Varela+Round' rel='stylesheet' type='text/css'>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
html, input, select {
|
html, input, select {
|
||||||
font: 14px/20px Varela, Georgia, Helvetica, Ubuntu, Arial, sans-serif;
|
font: 14px/20px Varela, Georgia, Helvetica, Ubuntu, Arial, sans-serif;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 50px 20px 20px;
|
padding: 50px 20px 20px;
|
||||||
width: 960px;
|
width: 960px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
header, section, footer {
|
header, section, footer {
|
||||||
padding: 20px 0 0;
|
padding: 20px 0 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
h1 a {
|
h1 a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
}
|
}
|
||||||
h1, h2, th, .ua {
|
h1, h2, th, .ua {
|
||||||
font-family: 'Varela Round', Helvetica, Ubuntu, Arial, sans-serif;
|
font-family: 'Varela Round', Helvetica, Ubuntu, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
.share {
|
.share {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
top: 60px;
|
top: 60px;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
pre {
|
pre {
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
table {
|
table {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
th {
|
th {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
th, td {
|
th, td {
|
||||||
border-left: 1px solid #fff;
|
border-left: 1px solid #fff;
|
||||||
border-top: 1px solid #fff;
|
border-top: 1px solid #fff;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
tr:last-child th, tr:last-child td {
|
tr:last-child th, tr:last-child td {
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
th:last-child, td:last-child {
|
th:last-child, td:last-child {
|
||||||
border-right: 1px solid #fff;
|
border-right: 1px solid #fff;
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
select, input, .grey {
|
select, input, .grey {
|
||||||
color: #777;
|
color: #777;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
select, input {
|
select, input {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
box-shadow: inset 0 0 10px #ccc;
|
box-shadow: inset 0 0 10px #ccc;
|
||||||
}
|
}
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
pre, code {
|
pre, code {
|
||||||
font-family: 'Ubuntu Mono', monospace;
|
font-family: 'Ubuntu Mono', monospace;
|
||||||
}
|
}
|
||||||
.ua {
|
.ua {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="ua-parser.js"></script>
|
<script src="ua-parser.js"></script>
|
||||||
<script src="ua-list-example.js"></script>
|
<script src="ua-list-example.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1><a href="">UA-Parser.js</a></h1>
|
<h1><a href="">UA-Parser.js</a></h1>
|
||||||
<h2>Lightweight JavaScript-based User-Agent String Parser</h2>
|
<h2>Lightweight JavaScript-based User-Agent String Parser</h2>
|
||||||
<hr />
|
<hr />
|
||||||
<p class="share">
|
<p class="share">
|
||||||
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="fyzlman">Tweet</a>
|
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="fyzlman">Tweet</a>
|
||||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
<section>
|
<section>
|
||||||
<pre>
|
<pre>
|
||||||
</pre>
|
</pre>
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Browser</th>
|
<th>Browser</th>
|
||||||
<th>Engine</th>
|
<th>Engine</th>
|
||||||
<th>OS</th>
|
<th>OS</th>
|
||||||
<th>Device</th>
|
<th>Device</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<td></td>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
<td></td>
|
||||||
</table>
|
</tr>
|
||||||
</section>
|
<td></td>
|
||||||
<section>
|
<td></td>
|
||||||
<p>Wanna test other UA string? Select a user-agent string to be tested:</p>
|
<td></td>
|
||||||
<select>
|
<td></td>
|
||||||
<option>Pick one</option>
|
</tr>
|
||||||
</select>
|
</table>
|
||||||
<p>Wanna test more? Enter any user-agent string you want to test here:</p>
|
</section>
|
||||||
<input type="text" />
|
<section>
|
||||||
</section>
|
<p>How well this parse other user-agent string? try select a string to be parsed:</p>
|
||||||
<footer>
|
<select>
|
||||||
<hr />
|
<option>Pick one</option>
|
||||||
<p>
|
</select>
|
||||||
<span class="ua">UA-Parser.js</span> © 2012 Faisalman. <br/>
|
<p>Want more? try enter any user-agent string you want to parse here:</p>
|
||||||
Dual licensed under GPLv2 & MIT license<br/>
|
<input type="text" />
|
||||||
Source: <a href="https://github.com/faisalman/ua-parser-js">https://github.com/faisalman/ua-parser-js</a><br/>
|
</section>
|
||||||
Node.js package: <a href="https://npmjs.org/package/ua-parser-js">https://npmjs.org/package/ua-parser-js</a>
|
<footer>
|
||||||
</p>
|
<hr />
|
||||||
</footer>
|
<p>
|
||||||
<script>
|
<span class="ua">UA-Parser.js</span> © 2012 Faisalman. <br/>
|
||||||
var pre = document.getElementsByTagName('pre')[0];
|
Dual licensed under GPLv2 & MIT license<br/>
|
||||||
var sel = document.getElementsByTagName('select')[0];
|
Source: <a href="https://github.com/faisalman/ua-parser-js">https://github.com/faisalman/ua-parser-js</a><br/>
|
||||||
var txt = document.getElementsByTagName('input')[0];
|
Node.js package: <a href="https://npmjs.org/package/ua-parser-js">https://npmjs.org/package/ua-parser-js</a>
|
||||||
var parser = new UAParser();
|
</p>
|
||||||
var fill = function(el, prop){
|
</footer>
|
||||||
if(prop !== undefined){
|
<script>
|
||||||
el.innerHTML = prop;
|
var pre = document.getElementsByTagName('pre')[0];
|
||||||
el.style.color = "red";
|
var sel = document.getElementsByTagName('select')[0];
|
||||||
} else {
|
var txt = document.getElementsByTagName('input')[0];
|
||||||
el.innerHTML = "No data";
|
var parser = new UAParser();
|
||||||
el.style.color = "#aaa";
|
var fill = function(el, prop){
|
||||||
}
|
if(typeof prop === 'object'){
|
||||||
}
|
el.innerHTML = '';
|
||||||
for(var i = 0; i < uaExampleList.length; i++){
|
el.appendChild(prop);
|
||||||
var opt = document.createElement('option');
|
} else if(typeof prop === 'string'){
|
||||||
opt.innerHTML = uaExampleList[i];
|
el.innerHTML = prop;
|
||||||
sel.appendChild(opt);
|
el.style.color = "red";
|
||||||
}
|
} else {
|
||||||
var fillTable = function(uastring){
|
el.innerHTML = "No data";
|
||||||
parser.setUA(uastring);
|
el.style.color = "#aaa";
|
||||||
var browser = parser.getBrowser();
|
}
|
||||||
var engine = parser.getEngine();
|
};
|
||||||
var os = parser.getOS();
|
var imgMap = function(prop, arr){
|
||||||
var device = parser.getDevice();
|
var img = document.createElement('img');
|
||||||
var tbl = document.getElementsByTagName('td');
|
img.src = 'images/undefined.png';
|
||||||
fill(tbl[0], browser.name);
|
for(var i in arr){
|
||||||
fill(tbl[1], engine.name);
|
if(arr.hasOwnProperty(i)){
|
||||||
fill(tbl[2], os.name);
|
var isobj = typeof arr[i] === 'object';
|
||||||
fill(tbl[3], device.name);
|
var r = isobj ? new RegExp(arr[i][0], 'i') : new RegExp(arr[i], 'i');
|
||||||
fill(tbl[4], browser.version);
|
if(r.test(prop['name'])){
|
||||||
fill(tbl[5], engine.version);
|
img.src = 'images/'+(isobj?arr[i][1]:arr[i])+'.png';
|
||||||
fill(tbl[6], os.version);
|
return img;
|
||||||
fill(tbl[7], device.version);
|
} else if(prop['name'] !== undefined){
|
||||||
pre.innerHTML = 'Result for <span style="color:red">' + (uastring ? uastring.replace(/</g,'<') : 'your browser\'s user-agent string') + ' :</span>';
|
img.src = 'images/check.png';
|
||||||
}
|
}
|
||||||
fillTable();
|
}
|
||||||
sel.addEventListener('change', function(){
|
}
|
||||||
fillTable(sel.children[sel.selectedIndex].value);
|
return img;
|
||||||
});
|
};
|
||||||
txt.addEventListener('keydown', function(e){
|
for(var i = 0; i < uaExampleList.length; i++){
|
||||||
if(e.keyCode == 13){
|
var opt = document.createElement('option');
|
||||||
fillTable(this.value);
|
opt.innerHTML = uaExampleList[i];
|
||||||
return false;
|
sel.appendChild(opt);
|
||||||
}
|
}
|
||||||
});
|
var fillTable = function(uastring){
|
||||||
</script>
|
parser.setUA(uastring);
|
||||||
<script type="text/javascript">
|
var browser = parser.getBrowser();
|
||||||
var _gaq = _gaq || [];
|
var engine = parser.getEngine();
|
||||||
_gaq.push(['_setAccount', 'UA-3767301-5']);
|
var os = parser.getOS();
|
||||||
_gaq.push(['_trackPageview']);
|
var device = parser.getDevice();
|
||||||
(function() {
|
var tbl = document.getElementsByTagName('td');
|
||||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
var prop = [
|
||||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
imgMap(browser, ['ie', 'chrom', 'konqueror', 'safari', 'opera', 'firefox', ['fennec', 'firefox'], 'mozilla']),
|
||||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
imgMap(engine, [['trident', 'ie'], ['webkit', 'safari'], ['khtml', 'konqueror'], ['presto', 'opera'], ['gecko', 'mozilla']]),
|
||||||
})();
|
imgMap(os, ['meego', 'symbian', 'android', 'blackberry', 'bada', 'windows', 'chromium', 'mac', 'freebsd', 'bsd', 'ubuntu', 'gentoo', 'fedora', 'mandriva', 'redhat', 'suse', 'debian', 'slackware', 'arch', 'linux', 'solaris', ['ios', 'mac'], ['rim', 'blackberry']]),
|
||||||
</script>
|
imgMap(device, [['undefined', 'pc'], 'ipad', ['tablet', 'ipad'], ['playbook', 'ipad'], ['\\w+', 'phone']]),
|
||||||
</body>
|
browser.name, engine.name, os.name, device.name,
|
||||||
</html>
|
browser.version, engine.version, os.version, device.version];
|
||||||
|
for(var i = 0; i < prop.length; i++){
|
||||||
|
fill(tbl[i], prop[i]);
|
||||||
|
}
|
||||||
|
pre.innerHTML = 'Result for <span style="color:red">' + (uastring ? uastring.replace(/</g,'<') : 'your browser\'s user-agent string') + ' :</span>';
|
||||||
|
}
|
||||||
|
fillTable();
|
||||||
|
sel.addEventListener('change', function(){
|
||||||
|
fillTable(sel.children[sel.selectedIndex].value);
|
||||||
|
});
|
||||||
|
txt.addEventListener('keydown', function(e){
|
||||||
|
if(e.keyCode == 13){
|
||||||
|
fillTable(this.value);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var _gaq = _gaq || [];
|
||||||
|
_gaq.push(['_setAccount', 'UA-3767301-5']);
|
||||||
|
_gaq.push(['_trackPageview']);
|
||||||
|
(function() {
|
||||||
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||||
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||||
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||