Get Screen Height and Width using jQuery

Get Screen Height and Width using jQuery

This post will help you get screen height and width using jQuery.

jQuery has made programmers life a lot easier as their small functions do wonders, which, in case of JavaScript , in the past, required to write a lot of code to accomplish such tasks. Below are the code to get height and width of a document body or an entire window:

 

$(window).width();        // Returns height of a window or browser viewport
$(window).height();      // Returns height of a window or browser viewport
$(document).width();    // Returns width of a HTML document
$(document).height();  // Returns height of a HTML document

Sample code to get Height of Document, Window and a Paragraph:

<body>

<button id=”dheight”>Get Document Height</button>
<button id=”wheight”>Get Window Height</button>
<button id=”pheight”>Get Paragraph Height</button>
 
<p>
Get Screen Height and Width using jQuery. Sample paragraph to test height
</p>

<script> function showHeight(ele, h) {

$(“div”).text(“The height for the ” + ele + ” is ” + h + “px.”);
}

$(“#pheight”).click(function () {
showHeight(“paragraph”, $(“p”).height());
});

$(“#dheight”).click(function () {
showHeight(“document”, $(document).height());
});

$(“#wheight”).click(function () {
showHeight(“window”, $(window).height());
});
</script>
</body>

“I am PHP Freelancer having more than 7 years of experience, if you want to do any project with me then you can contact me.”

Be Social, Share!