JQuery Browser Size Detector
Posted: Mon Nov 18, 2013 1:59 pm
See it in action on CodePen - http://codepen.io/mikethedj4/pen/prsjo
This script detects the dimensions of the browser's size both onload, and resize. I've added comments into the script as well to better understand what does what. If you need more help please revert to the JQuery API Documentation associated with the element selector you're having trouble with, or would like to learn more of.
If you're looking for a Chrome extension similar to this I'd recommend giving Window Resizer a try
In essence we're using $(window).width() to detect the browser's width, and $(window).height() to detect the browsers height. By passing both as .toString() as the specified $(element).text().
Enjoy!
Screenshot: Full Code:
This script detects the dimensions of the browser's size both onload, and resize. I've added comments into the script as well to better understand what does what. If you need more help please revert to the JQuery API Documentation associated with the element selector you're having trouble with, or would like to learn more of.
If you're looking for a Chrome extension similar to this I'd recommend giving Window Resizer a try
In essence we're using $(window).width() to detect the browser's width, and $(window).height() to detect the browsers height. By passing both as .toString() as the specified $(element).text().
Enjoy!
Screenshot: Full Code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>JQuery Browser Size Detector</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type='text/css'>
/* Body + Text Color */
body { background:#ccc; color:#000; }
#ssize { position:absolute; top:0; left:0; width:100%; }
</style>
<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.
$('#browser_width').text($(window).width().toString());
$('#browser_height').text($(window).height().toString());
});
});
</script>
</head>
<body>
<!-- Display Size -->
<div id="ssize">
<center>
<h1>Width: <span id="browser_width"></span>px</h1>
<h1>Height: <span id="browser_height"></span>px</h1>
</center>
</div>
</body>
</html>