I have a script that's able to determine the height and width of my browser window. However, I am facing a challenge in creating a way for these dimensions to count up from zero to their current values upon loading. The desired functionality would be similar to what is shown here: http://jsfiddle.net/YWn9t/, but with the target numbers being the aforementioned dimensions. Is there a more concise way to achieve this than what is presented in the jsfiddle?
HTML:
<div>
<span></span>
<span></span>
</div>
CSS:
body {text-align: center;}
div {border: 2px solid #000; display: inline-block; padding: 5px 20px; vertical-align: middle;}
span:first-of-type:after {content: "|"; margin: 0 10px;}
jQuery:
$(document).ready(function (e) {
showViewportSize();
});
$(window).resize(function (e) {
showViewportSize();
});
function showViewportSize() {
var the_width = $(window).width();
var the_height = $(window).height();
$('span:first-of-type').text(the_width);
$('span:last-of-type').text(the_height);
}