Code2care : TechZone Apps & Tutorials

Get screen width and height dynamically using jquery

This is a simple tutorial of how to get screen width and height of your browser window using jquery. As you resize your browser window the values of the width and height of the frame is displayed.

This can be quite handy when your testing your responsive design of your website. You can view this page on various devices to get the height and width.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js" >
</script>
<style>
#display {
		width: auto;
		height:22px;
		background-color: #ccc;
		color: #222;
		margin-left: 5px;
		font-size:20px;
		text-align: center;
	}

</style>
</head>
<body>
<script>
$("#display").html("<b>Width</b> : " + 
       $(window).width() + ",<b>Height : </b>" +
       $(window).height());

$(window).resize(function() {
        $("#display\").html("<b>Width</b> : " +
	    $(window).width() + ",<b>Height : </b>" +
	    $(window).height());
});
	</script>
<div id="display"></div>
</body>
</html>

In the below gif you can see how the output of the above code looks on firefox browser. This code works well on all browsers that support jquery.

get_browser_width_height_jquery


View Demo : Demo








Top




Posts related to jquery.


1. jQuery : Move to top of the page

2. Make div element draggable using jQuery

3. Get screen width and height dynamically using jquery


Code2care : Lines of Code for Change
Code2care is an initiative to publish and share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities.





Android app on Google Play    








Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-17