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.
When I first got to the page both the Width & Height was blank. It wasn’t until I resized the browser, did it show the browser size. Is there a way to show the measurements when you first load the page?
function doSize(){
$(‘#output_width’).val($(window).width().toString());
$(‘#output_height’).val($(window).height().toString());
}
$(document).ready(doSize);
$(window).resize(doSize);
lol, I was going to build it up in a module format so you can plug in other panels etc for dynamic resizing / css effects etc, but this’ll do the job.
Hi! This was just what I was looking for! I’m very new to jQuery, and was wondering, if I know the browser width, how do I put that value into my CSS?
This is what I want to do: When onload and on resize to have the browser width assigned to a certain div. Then I want to have the body width calculated (which will be the sum of the total of divs, it’s a horizontal website) and assigned in my CSS. I hope this is understandable! Any help or direction where to start would be greatly appreciated!
Martine