jQuery- Show The Height And Width Of The Browser Viewport in Real-Time
Strange. I looked around everywhere for this code, and couldn’t find it anymore online. I simply wanted jQuery code that would show the height and width of the browser viewport in “real-time” I found plenty of code samples that would show the viewport size on page load/refresh, but nothing that would update live, as I was reducing/expanding the browser size. So I decided to write my own code, and it turned it to be a lot easier than anticipated.
Demo
Simply change the size of your browser and the values (height and width) below should automatically update.
Width in pixels:
Height in pixels:
Code
All you need to do is copy/paste the code and it should work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function ()
{
$(window).resize(function()
{
var show_width = $(window).width();
document.getElementById("output_width").value=show_width.toString();
var show_height = $(window).height();
document.getElementById("output_height").value=show_height.toString();
});
});
</script>
<h3>Width:</h3>
<input type="input" id="output_width" value="" name="width" />
<h3>Height:</h3>
<input type="input" id="output_height" value="" name="height" /> |
So, what do you think? Does it work?
Does anyone know of a more efficient way of getting this result? If so, please let me know.



brightcherry.co.uk
In the true spirit of jQuery, wouldn’t be easier to use
$(“#output_width”).val($(window).width().toString());
instead of
var show_width = $(window).width();
document.getElementById(“output_width”).value=show_width.toString();
Yup, you’re right
Your way is actually better.
Many thanks.