JQuery Browser Size Detector
1 post
Page 1 of 1
Quick Profile
Information
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am View Full Profile
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>You do not have the required permissions to view the files attached to this post.
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023