How To Detect Real Time Browser Size In JQuery

This JQuery script detects the dimensions of browser's size onload and resize...

Add these in your head :
<meta name='viewport' content='initial-scale=1.0'> <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>  <script type='text/javascript'> $(function() { // Declare the load n resize on event handlers $(window).on('load resize', function() { // Show/Detect browser size on specified elements. $('#width').text($(window).width().toString()); $('#height').text($(window).height().toString()); }); }); </script> <br>

Add the styles(not so important) :
<style type='text/css'> /* Body + Text Color */ body { background:#ccc; color:#000; } #detectsize { position:absolute; top:0; left:0; width:100%; } </style>

Add these to your body :

<div id="detectsize"> <center> <h1> Width: <span id="width"></span>px</h1> <h1> Height: <span id="height"></span>px</h1> </center> </div>

Now just save the document and run in your browser :)

All the credits goes to Michael(mikethedj4)