<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery NiceScroll Browser Detection</title>
<style type="text/css">
.testok {
	background-color: #71FF71;
}
.testko {
	background-color: #FF6C6C;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.divs {
	padding-top: 4px;
}
.num {
	font-size: 10px;
	color: #525252;
	vertical-align: super;
}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>

<script>
  var nice = false;

  $(function() {
    nice = $("html").niceScroll();
  });
  
  var obj = window;
  
  console.log(obj.length);
  console.log("selector" in obj);
  
</script>

<script>
  
  function toCell(px,py,ok) {
    $("#tab1").find('tr').eq(py).find('td').eq(px).addClass((ok)?'testok':'testko');
  };
  
  $(window).load(function() {
    $("#div1").html($("#div1").html()+' '+nice.version);
	$("#div2").html($("#div2").html()+' '+navigator.userAgent);

	toCell(1,1,nice.detected.ismozilla);
	
	toCell(2,1,(nice.detected.iswebkit));
	
	toCell(3,1,nice.detected.isie);
	toCell(3,2,nice.detected.isie10);
	toCell(3,3,nice.detected.isie9);
	toCell(3,4,nice.detected.isie8);
	toCell(3,5,nice.detected.isie7);
	toCell(3,6,nice.detected.isieold);

  toCell(7,1,nice.detected.isie11);
  toCell(7,2,nice.detected.ismsedge);
  
	toCell(4,1,nice.detected.isopera);
  toCell(4,2,nice.detected.isopera12);
  toCell(4,3,nice.detected.isoperamini);
	
	toCell(5,1,nice.detected.isios);
	toCell(5,2,nice.detected.isios4);
  toCell(5,3,nice.detected.isios8);
  toCell(5,4,nice.detected.isios10);

  toCell(6,1,nice.detected.ischrome);
	toCell(6,2,nice.detected.ischrome22);
  toCell(6,3,nice.detected.ischrome26);

	
	toCell(0,8,nice.detected.cantouch);
	toCell(3,8,nice.detected.hasmstouch);
  toCell(7,8,nice.detected.hasw3ctouch);

	toCell(1,10,nice.detected.hastransform);
	toCell(1,11,nice.detected.hastranslate3d);
	toCell(2,10,nice.detected.hastransition);
	toCell(2,11,!!nice.detected.transitionend);
	toCell(3,10,nice.hasanimationframe);
	toCell(3,11,nice.hascancelanimationframe);
  toCell(4,10,nice.detected.hasMutationObserver);

	toCell(1,12,nice.detected.hasmousecapture);
	toCell(2,12,((nice.detected.cursorgrabvalue!='')&&(nice.detected.cursorgrabvalue.substr(0,3)!='url')));
	toCell(3,12,nice.detected.haspointerlock);

	toCell(1,14,!nice.detected.cantouch);  
	toCell(2,14,!nice.detected.cantouch);  
	toCell(3,14,nice.detected.cantouch||nice.istouchcapable||nice.hasmstouch||nice.detected.hasw3ctouch);
  //toCell(4,14,nice.detected.isie9mobile);  
	
  });
  
</script>

</head>

<body>
<p>CHECK YOU BROWSER PAGE</p>
<div id="div1">NiceScroll version:</div>
<div id="div2">You browser user agent:</div>
<table border="0" cellpadding="6" cellspacing="2" id="tab1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">Browser class</td>
    <td bgcolor="#E0E0E9">Mozilla</td>
    <td bgcolor="#E0E0E9">WebKit</td>
    <td bgcolor="#E0E0E9">IE</td>
    <td bgcolor="#E0E0E9">Opera</td>
    <td bgcolor="#E0E0E9">iOS <span class="num">(7)</span></td>
		<td bgcolor="#E0E0E9">Chrome</td>
    <td bgcolor="#E0E0E9">IE11+</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">Families</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">IE10+</td>
    <td bgcolor="#E0E0E9">Opera&nbsp;12</td>
    <td bgcolor="#E0E0E9">iOS4- <span class="num">(6)</span></td>
		<td bgcolor="#E0E0E9">Chrome 22+</td>
    <td bgcolor="#E0E0E9">MSEdge</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">IE9+</td>
    <td bgcolor="#E0E0E9">Opera&nbsp;Mini</td>
    <td bgcolor="#E0E0E9">iOS8</td>
		<td bgcolor="#E0E0E9">Chrome 26+</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">IE8</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">iOS10</td>
		<td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">IE7</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
		<td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">IE6- <span class="num">(1)</span></td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
		<td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
		<td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#E0E0E9">
    <td>Touch</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>MSPointer</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
		<td>&nbsp;</td>
    <td>Pointer (W3C)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
		<td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">Browser capabilities</td>
    <td bgcolor="#E0E0E9">Transform <span class="num">(2)</span></td>
    <td bgcolor="#E0E0E9">Transition <span class="num">(4)</span></td>
    <td bgcolor="#E0E0E9">AnimationFrame <span class="num">(5)</span></td>
    <td bgcolor="#E0E0E9">MutationObserver</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
		<td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">translate3d <span class="num">(3)</span></td>
    <td bgcolor="#E0E0E9">transitionEnd</td>
    <td bgcolor="#E0E0E9">cancelAnimationFrame</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
		<td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">setCapture</td>
    <td bgcolor="#E0E0E9">cursor:grab</td>
    <td bgcolor="#E0E0E9">Pointer Lock API</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
		<td bgcolor="#E0E0E9">&nbsp;</td>
    <td bgcolor="#E0E0E9">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
		<td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#E0E0E9">
    <td>Input</td>
    <td>Keyboard</td>
    <td>Mouse</td>
    <td>Touch/Pen</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
		<td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>  
</table>
<p>&nbsp; </p>

<p>(1) position:fixed not supported, scrollbar for page and zoom features disabled<br />
  (2) hardware scroll for wrapped div<br />
(3) hardware scroll preferable for mobile devices<br />
(4) transition (animation) used for scroll content (hw full implementation)<br />
(5) more smooth native scroll and cpu saving<br />
(6) some problem with zoom feature for browser limitation<br />
(7) use native scrollbar for page<br />
</p>
<p>&nbsp; </p>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-26840957-1']);
  _gaq.push(['_setDomainName', '.areaaperta.com']);
  _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>
