{"id":22715,"date":"2018-09-19T16:15:53","date_gmt":"2018-09-19T13:15:53","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=22715"},"modified":"2018-09-19T15:58:32","modified_gmt":"2018-09-19T12:58:32","slug":"jquery-dimension-methods-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/","title":{"rendered":"jQuery Dimension Methods Example"},"content":{"rendered":"<p>Greetings readers, in this tutorial we will show how to use the jQuery library and the <strong>jQuery dimension methods<\/strong> to get the dimensions of an element\u2019s box.<\/p>\n<h2><a name=\"introduction\"><\/a>1. Introduction<\/h2>\n<p><strong>jQuery<\/strong> is nothing but a JavaScript library that comes with rich functionalities. It is small and faster than many JavaScript code written by an average web developer. By using jQuery developers can write less code and do more things, making web developer\u2019s tasks very easy. In simple word, jQuery is a collection of several useful methods, which can be used to carry out many common tasks in JavaScript. A couple of lines of jQuery code can do things which need too many JavaScript lines to do. The true power of jQuery comes from its CSS-like selector, which allows it to select any element from DOM and change, update or manipulate it. Developers can use jQuery to do cool animations like fade in or fade out. They can also change the CSS class of a component dynamically e.g. making a component active or inactive. I have used this technique to make <em>tabbed UI<\/em> in HTML. I can vouch for jQuery that once developers start using it, they will never go back to plain old JavaScript as <em>jQuery<\/em> is <em>clear<\/em>, <em>concise<\/em>, and <em>powerful<\/em>.<br \/>\n[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<div class=\"toc\">\n<h3>Table Of Contents<\/h3>\n<dl>\n<dt><a href=\"#introduction\">1. Introduction<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#jquery\">1.1 Why jQuery?<\/a><\/dt>\n<dt><a href=\"#jqueryDimensionMethods\">1.2 jQuery Dimension Methods<\/a><\/dt>\n<\/dl>\n<\/dd>\n<dt><a href=\"#example\">2. jQuery Dimension Methods Example<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#tools\">2.1 Tools Used<\/a><\/dt>\n<dt><a href=\"#structure\">2.2 Project Structure<\/a><\/dt>\n<dt><a href=\"#creation\">2.3 Project Creation<\/a><\/dt>\n<\/dl>\n<\/dd>\n<dt><a href=\"#application\">3. Application Building<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#loadTheLibrary\">3.1 Load the jQuery Library<\/a><\/dt>\n<dt><a href=\"#defineApplication\">3.2 Define the Application<\/a><\/dt>\n<dt><a href=\"#defineFunction\">3.3 Define a jQuery Function<\/a><\/dt>\n<dt><a href=\"#firstApplication\">3.4 First jQuery Application<\/a><\/dt>\n<\/dl>\n<\/dd>\n<dt><a href=\"#runApplication\">4. Run the Application<\/a><\/dt>\n<dt><a href=\"#demo\">5. Project Demo<\/a><\/dt>\n<dt><a href=\"#conclusion\">6. Conclusion<\/a><\/dt>\n<dt><a href=\"#projectDownload\">7. Download the Eclipse Project<\/a><\/dt>\n<\/dl>\n<\/div>\n<h3><a name=\"jquery\"><\/a>1.1 Why jQuery?<\/h3>\n<ul>\n<li>It helps in improving the application performance and increasing the developer\u2019s productivity<\/li>\n<li>It helps in developing the browser compatible web-page<\/li>\n<li>It helps in implementing the UI related critical functionality without writing the several lines of codes<\/li>\n<li>It is fast and extensible i.e. developers can use the jQuery library to implement the customized behavior<\/li>\n<li>It is simpler and easy to learn<\/li>\n<\/ul>\n<h3><a name=\"jqueryDimensionMethods\"><\/a>1.2 jQuery Dimension Methods<\/h3>\n<p>The jQuery library provides several dimension methods to get and set the CSS dimensions for the HTML elements. The following diagram illustrates the different jQuery dimension methods and how these methods are calculating the dimensions of an HTML element\u2019s box.<\/p>\n<figure id=\"attachment_22716\" aria-describedby=\"caption-attachment-22716\" style=\"width: 818px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dimensions_architecture.jpeg\"><img decoding=\"async\" class=\"wp-image-22716 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dimensions_architecture.jpeg\" alt=\"jQuery Dimension Methods - jQuery Dimensions\" width=\"818\" height=\"509\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dimensions_architecture.jpeg 818w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dimensions_architecture-300x187.jpeg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dimensions_architecture-768x478.jpeg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><\/a><figcaption id=\"caption-attachment-22716\" class=\"wp-caption-text\">Fig. 1: jQuery Dimensions<\/figcaption><\/figure>\n<h4>1.2.1 jQuery width() Method<\/h4>\n<p>The jQuery <code>width()<\/code> method is used to <span style=\"text-decoration: underline;\">set or get the width of an HTML element<\/span>. This width does not include the padding, border, and margin of an element. Over here represent the simple syntax to practice this method.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Snippet<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">$(selector).width(value);<\/pre>\n<p>Here, the <code>value<\/code> parameter is an optional argument that alters the width of the HTML element.<\/p>\n<h4>1.2.2 jQuery height() Method<\/h4>\n<p>The jQuery <code>height()<\/code> method is used to <span style=\"text-decoration: underline;\">set or get the height of an HTML element<\/span>. This height does not include the padding, border, and margin of an element. Over here represent the simple syntax to practice this method.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Snippet<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">$(selector).height(value);<\/pre>\n<p>Here, the <code>value<\/code> parameter is an optional argument that alters the height of the HTML element.<\/p>\n<h4>1.2.3 jQuery innerWidth() Method<\/h4>\n<p>The jQuery <code>innerWidth()<\/code> method is used to <span style=\"text-decoration: underline;\">returns the width of an HTML element<\/span>. This width includes the padding but not the border of an element. Over here represent the simple syntax to practice this method.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Snippet<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">$(selector).innerWidth();<\/pre>\n<h4>1.2.4 jQuery innerHeight() Method<\/h4>\n<p>The jQuery <code>innerHeight()<\/code> method is used to <span style=\"text-decoration: underline;\">returns the height of an HTML element<\/span>. This height includes the padding but not the border of an element. Over here represent the simple syntax to practice this method.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Snippet<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">$(selector).innerHeight();<\/pre>\n<h4>1.2.5 jQuery outerWidth() Method<\/h4>\n<p>The jQuery <code>outerWidth()<\/code> method is used to <span style=\"text-decoration: underline;\">returns the width of an HTML element<\/span>. This width includes the padding and the border of an element. Over here represent the simple syntax to practice this method.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Snippet<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">$(selector).outerWidth(boolean_value);<\/pre>\n<p>Here,<\/p>\n<ul>\n<li>The <code>boolean_value<\/code> parameter is an optional argument i.e.\n<ul>\n<li>If the parameter value is set to <code>true<\/code>, the method returns the width of the HTML element, including padding, margin, and border<\/li>\n<li>If the parameter value is blank, the method returns the width of the HTML element, including padding and border<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>1.2.6 jQuery outerHeight() Method<\/h4>\n<p>The jQuery <code>outerHeight()<\/code> method is used to <span style=\"text-decoration: underline;\">returns the height of an HTML element<\/span>. This height includes the padding and the border of an element. Over here represent the simple syntax to practice this method.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Snippet<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">$(selector).outerHeight(boolean_value);<\/pre>\n<p>Here,<\/p>\n<ul>\n<li>The <code>boolean_value<\/code> parameter is an optional argument i.e.\n<ul>\n<li>If the parameter value is set to <code>true<\/code>, the method returns the height of the HTML element, including padding, margin, and border<\/li>\n<li>If the parameter value is blank, the method returns the height of the HTML element, including padding and border<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Always <strong>remember<\/strong>, these methods return the <em>width<\/em> and <em>height<\/em> value as the unit-less pixel value (i.e. <code>300<\/code>).<\/p>\n<p>These new APIs make a developer life easier, really! But it would be difficult for a beginner to understand this without an example. Therefore, let us create a simple application using the jQuery library.<\/p>\n<h2><a name=\"example\"><\/a>2. jQuery Dimension Methods Example<\/h2>\n<p>Here is a systematic guide for implementing this tutorial using the jQuery library.<\/p>\n<h3><a name=\"tools\"><\/a>2.1 Tools Used<\/h3>\n<p>We are using Eclipse Kepler SR2, JDK 8 and Maven. Having said that, we have tested the code against JDK 1.7 and it works well.<\/p>\n<h3><a name=\"structure\"><\/a>2.2 Project Structure<\/h3>\n<p>Firstly, let us review the final project structure if you are confused about where you should create the corresponding files or folder later!<\/p>\n<figure id=\"attachment_22717\" aria-describedby=\"caption-attachment-22717\" style=\"width: 329px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_structure_guide_1.jpg\"><img decoding=\"async\" class=\"wp-image-22717 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_structure_guide_1.jpg\" alt=\"jQuery Dimension Methods - Application Project Structure\" width=\"329\" height=\"360\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_structure_guide_1.jpg 329w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_structure_guide_1-274x300.jpg 274w\" sizes=\"(max-width: 329px) 100vw, 329px\" \/><\/a><figcaption id=\"caption-attachment-22717\" class=\"wp-caption-text\">Fig. 2: Application Project Structure<\/figcaption><\/figure>\n<h3><a name=\"creation\"><\/a>2.3 Project Creation<\/h3>\n<p>This section will show on how to create a Java-based Maven project with Eclipse. In Eclipse Ide, go to <code>File -&gt; New -&gt; Maven Project<\/code>.<\/p>\n<figure id=\"attachment_22718\" aria-describedby=\"caption-attachment-22718\" style=\"width: 657px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_1.jpg\"><img decoding=\"async\" class=\"wp-image-22718 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_1.jpg\" alt=\"jQuery Dimension Methods - Create a Maven Project\" width=\"657\" height=\"690\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_1.jpg 657w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_1-286x300.jpg 286w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/a><figcaption id=\"caption-attachment-22718\" class=\"wp-caption-text\">Fig. 3: Create a Maven Project<\/figcaption><\/figure>\n<p>In the New Maven Project window, it will ask you to select project location. By default, &#8216;Use default workspace location&#8217; will be selected. Just click on next button to proceed.<\/p>\n<figure id=\"attachment_22719\" aria-describedby=\"caption-attachment-22719\" style=\"width: 598px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_2.jpg\"><img decoding=\"async\" class=\"wp-image-22719 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_2.jpg\" alt=\"jQuery Dimension Methods - Project Details\" width=\"598\" height=\"543\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_2.jpg 598w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_2-300x272.jpg 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/a><figcaption id=\"caption-attachment-22719\" class=\"wp-caption-text\">Fig. 4: Project Details<\/figcaption><\/figure>\n<p>Select the &#8216;Maven Web App&#8217; Archetype from the list of options and click next.<\/p>\n<figure id=\"attachment_22720\" aria-describedby=\"caption-attachment-22720\" style=\"width: 515px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_3.jpg\"><img decoding=\"async\" class=\"wp-image-22720 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_3.jpg\" alt=\"jQuery Dimension Methods - Archetype Selection\" width=\"515\" height=\"541\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_3.jpg 515w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_3-286x300.jpg 286w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/a><figcaption id=\"caption-attachment-22720\" class=\"wp-caption-text\">Fig. 5: Archetype Selection<\/figcaption><\/figure>\n<p>It will ask you to &#8216;Enter the group and the artifact id for the project&#8217;. We will input the details as shown in the below image. The version number will be by default: <code>0.0.1-SNAPSHOT<\/code>.<\/p>\n<figure id=\"attachment_22721\" aria-describedby=\"caption-attachment-22721\" style=\"width: 579px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_4.jpg\"><img decoding=\"async\" class=\"wp-image-22721 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_4.jpg\" alt=\"jQuery Dimension Methods - Archetype Parameters\" width=\"579\" height=\"528\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_4.jpg 579w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_guide_4-300x274.jpg 300w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/a><figcaption id=\"caption-attachment-22721\" class=\"wp-caption-text\">Fig. 6: Archetype Parameters<\/figcaption><\/figure>\n<p>Click on Finish and the creation of a maven project is completed. If you see, it has downloaded the maven dependencies and a <code>pom.xml<\/code> file will be created. It will have the following code:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>pom.xml<\/em><\/span><\/p>\n<pre class=\"brush:xml; wrap-lines:false;\">&lt;project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/xsd\/maven-4.0.0.xsd\"&gt;\r\n\t&lt;modelVersion&gt;4.0.0&lt;\/modelVersion&gt;\r\n\t&lt;groupId&gt;com.jquery&lt;\/groupId&gt;\r\n\t&lt;artifactId&gt;jQueryDimensionMethods&lt;\/artifactId&gt;\r\n\t&lt;version&gt;0.0.1-SNAPSHOT&lt;\/version&gt;\r\n\t&lt;packaging&gt;war&lt;\/packaging&gt;\r\n&lt;\/project&gt;\r\n<\/pre>\n<h2><a name=\"application\"><\/a>3. Application Building<\/h2>\n<p>Let us create an application to understand the basic building blocks of this tutorial.<\/p>\n<h3><a name=\"loadTheLibrary\"><\/a>3.1 Load the jQuery Library<\/h3>\n<p>Since it is a pure JavaScript framework, so developers should add its reference using the <code>&lt;script&gt;<\/code> tag.<\/p>\n<pre class=\"brush:js; wrap-lines:false;\">&lt;script type=\"text\/javascript\" src=\"resource\/js\/jquery-3.3.1.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Developers can either download the jQuery from the official website and the application will then directly load the jQuery library from the local drive or they can also include the direct CDN link under the <code>script<\/code> tag.<\/p>\n<h3><a name=\"defineApplication\"><\/a>3.2 Define the Application<\/h3>\n<p>Next, we will define the sample application using the HTML tags.<\/p>\n<pre class=\"brush:html; wrap-lines:false;\">&lt;!------ jQuery Dimension Methods Example ------&gt;\r\n&lt;div id=\"mybox\" class=\"mybox-panel\"&gt;\r\n\tLorem ipsum dolor sit amet, consectetur\r\n\tadipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.\r\n\tMauris magna metus, dapibus nec turpis vel, semper malesuada ante.\r\n\tVestibulum id metus ac nisl bibendum scelerisque non non purus.\r\n\tSuspendisse varius nibh non aliquet sagittis. In tincidunt orci sit\r\n\tamet elementum vestibulum. Vivamus fermentum in arcu in aliquam.\r\n\tQuisque aliquam porta odio in fringilla non purus nisld Dapibus nec\r\n\tturpis vel, semper malesuada ant.\r\n&lt;\/div&gt;\r\n&lt;div&gt;\u00a0&lt;\/div&gt;\r\n\t\t\t\t\r\n&lt;div class=\"three-inline-btns\"&gt;\r\n\t&lt;div class=\"inner\"&gt;\r\n\t\t&lt;button id=\"btn1\" type=\"submit\" class=\"btn btn-default\"&gt;Get Width and Height&lt;\/button&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"inner\"&gt;\r\n\t\t&lt;button id=\"btn2\" type=\"submit\" class=\"btn btn-default\"&gt;Get InnerWidth and InnerHeight&lt;\/button&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"inner\"&gt;\r\n\t\t&lt;button id=\"btn3\" type=\"submit\" class=\"btn btn-default\"&gt;Get OuterWidth and OuterHeight&lt;\/button&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div&gt;\u00a0&lt;\/div&gt;\r\n\r\n&lt;h5 id=\"myresult\"&gt;&lt;\/h5&gt;\r\n<\/pre>\n<h3><a name=\"defineFunction\"><\/a>3.3 Define a jQuery Function<\/h3>\n<p>In this step, we\u2019ll demonstrate the jQuery dimension methods that will append the results to the <code>myresult<\/code> id on a button click. Add the following code to the jQuery function.<\/p>\n<pre class=\"brush:js; wrap-lines:false;\">$(document).ready(function() {\r\n\t\/\/ Get Width and Height\r\n\t$(\"#btn1\").click(function() {\r\n\t\tvar width = $(\"#mybox\").width();\r\n\t\tvar height = $(\"#mybox\").height();\r\n\t\t$(\"#myresult\").html(\"Width= \" + width + \", \" + \"Height= \" + height);\r\n\t});\r\n\r\n\t\/\/ Get InnerWidth and InnerHeight\r\n\t$(\"#btn2\").click(function() {\r\n\t\tvar inner_width = $(\"#mybox\").innerWidth();\r\n\t\tvar inner_height = $(\"#mybox\").innerHeight();\r\n\t\t$(\"#myresult\").html(\"Inner Width= \" + inner_width + \", \" + \"Inner Height= \" + inner_height);\r\n\t});\r\n\r\n\t\/\/ Get OuterWidth and OuterHeight\r\n\t$(\"#btn3\").click(function() {\r\n\t\tvar outer_width = $(\"#mybox\").outerWidth();\r\n\t\tvar outer_height = $(\"#mybox\").outerHeight();\r\n\t\t$(\"#myresult\").html(\"Outer Width= \" + outer_width + \", \" + \"Outer Height= \" + outer_height);\r\n\t});\r\n});\r\n<\/pre>\n<h3><a name=\"firstApplication\"><\/a>3.4 First jQuery Application<\/h3>\n<p>Complete all the above steps and save the file. Let us see the sample code snippet.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.jsp<\/em><\/span><\/p>\n<pre class=\"brush: html; wrap-lines:false;\">&lt;%@ page language=\"java\" contentType=\"text\/html; charset=ISO-8859-1\" pageEncoding=\"ISO-8859-1\" %&gt;\r\n&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"&gt;\r\n&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t    &lt;title&gt;IndexPage&lt;\/title&gt;\r\n\t    &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=ISO-8859-1\"&gt;\r\n\t\t\r\n\t\t&lt;!-- Css files --&gt;\r\n\t    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\"&gt;\r\n\t    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"resource\/css\/mystyle.css\"&gt;\r\n\t\t\r\n\t\t&lt;!-- JavaScript files --&gt;\r\n\t    &lt;script type=\"text\/javascript\" src=\"resource\/js\/jquery-3.3.1.min.js\"&gt;&lt;\/script&gt;\r\n\t    &lt;script type=\"text\/javascript\" src=\"resource\/js\/mystyle.js\"&gt;&lt;\/script&gt;\t    \t   \r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n\t    &lt;div class=\"container\"&gt;\r\n\t        &lt;h2 align=\"center\" class=\"text-primary\"&gt;jQuery Dimension Methods Example&lt;\/h2&gt;&lt;hr \/&gt;\r\n\t        &lt;div&gt;\u00a0&lt;\/div&gt;\r\n\t\r\n\t        &lt;!------ jQuery Dimension Methods Example ------&gt;\r\n\t\t\t&lt;div id=\"mybox\" class=\"mybox-panel\"&gt;\r\n\t\t\t\tLorem ipsum dolor sit amet, consectetur\r\n\t\t\t\tadipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.\r\n\t\t\t\tMauris magna metus, dapibus nec turpis vel, semper malesuada ante.\r\n\t\t\t\tVestibulum id metus ac nisl bibendum scelerisque non non purus.\r\n\t\t\t\tSuspendisse varius nibh non aliquet sagittis. In tincidunt orci sit\r\n\t\t\t\tamet elementum vestibulum. Vivamus fermentum in arcu in aliquam.\r\n\t\t\t\tQuisque aliquam porta odio in fringilla non purus nisld Dapibus nec\r\n\t\t\t\tturpis vel, semper malesuada ant.\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div&gt;\u00a0&lt;\/div&gt;\r\n\t        \t\t        \r\n\t        &lt;div class=\"three-inline-btns\"&gt;\r\n\t            &lt;div class=\"inner\"&gt;\r\n\t                &lt;button id=\"btn1\" type=\"submit\" class=\"btn btn-default\"&gt;Get Width and Height&lt;\/button&gt;\r\n\t            &lt;\/div&gt;\r\n\t            &lt;div class=\"inner\"&gt;\r\n\t                &lt;button id=\"btn2\" type=\"submit\" class=\"btn btn-default\"&gt;Get InnerWidth and InnerHeight&lt;\/button&gt;\r\n\t            &lt;\/div&gt;\r\n\t            &lt;div class=\"inner\"&gt;\r\n\t                &lt;button id=\"btn3\" type=\"submit\" class=\"btn btn-default\"&gt;Get OuterWidth and OuterHeight&lt;\/button&gt;\r\n\t            &lt;\/div&gt;\r\n\t        &lt;\/div&gt;\r\n\t        &lt;div&gt;\u00a0&lt;\/div&gt;\r\n\t        \r\n\t        &lt;h5 id=\"myresult\"&gt;&lt;\/h5&gt;\r\n\t    &lt;\/div&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h2><a name=\"runApplication\"><\/a>4. Run the Application<\/h2>\n<p>As we are ready for all the changes, let us compile the project and deploy the application on the Tomcat7 server. To deploy the application on Tomat7, right-click on the project and navigate to <code>Run as -&gt; Run on Server<\/code>.<\/p>\n<figure id=\"attachment_22722\" aria-describedby=\"caption-attachment-22722\" style=\"width: 818px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_deploy_guide_1.jpg\"><img decoding=\"async\" class=\"wp-image-22722 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_deploy_guide_1.jpg\" alt=\"jQuery Dimension Methods - Deploy Application on Tomcat\" width=\"818\" height=\"369\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_deploy_guide_1.jpg 818w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_deploy_guide_1-300x135.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_deploy_guide_1-768x346.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><\/a><figcaption id=\"caption-attachment-22722\" class=\"wp-caption-text\">Fig. 7: How to Deploy Application on Tomcat<\/figcaption><\/figure>\n<p>Tomcat will deploy the application in its web-apps folder and shall start its execution to deploy the project so that we can go ahead and test it in the browser.<\/p>\n<h2><a name=\"demo\"><\/a>5. Project Demo<\/h2>\n<p>Open your favorite browser and hit the following URL to display the application\u2019s index page.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">http:\/\/localhost:8082\/jQueryDimensionMethods\/<\/pre>\n<p>Server name (localhost) and port (8082) may vary as per your Tomcat configuration.<\/p>\n<figure id=\"attachment_22723\" aria-describedby=\"caption-attachment-22723\" style=\"width: 818px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_demo_guide_1.jpg\"><img decoding=\"async\" class=\"wp-image-22723 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_demo_guide_1.jpg\" alt=\"jQuery Dimension Methods - Index page\" width=\"818\" height=\"294\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_demo_guide_1.jpg 818w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_demo_guide_1-300x108.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQuery_dm_project_demo_guide_1-768x276.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><\/a><figcaption id=\"caption-attachment-22723\" class=\"wp-caption-text\">Fig. 8: Index page<\/figcaption><\/figure>\n<p>Users can click buttons to display the result of the different jQuery dimension methods. That is all for this tutorial and I hope the article served you whatever you were looking for. Happy Learning and do not forget to share!<\/p>\n<h2><a name=\"conclusion\"><\/a>6. Conclusion<\/h2>\n<p>In this section, developers learned how to create a simple application with the jQuery library. Developers can download the sample application as an Eclipse project in the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2><a name=\"projectDownload\"><\/a>7. Download the Eclipse Project<\/h2>\n<p>This was an example of jQuery Dimension Methods for the beginners.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/09\/jQueryDimensionMethods.zip\" target=\"_blank\" rel=\"noopener\"><strong>jQueryDimensionMethods<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Greetings readers, in this tutorial we will show how to use the jQuery library and the jQuery dimension methods to get the dimensions of an element\u2019s box. 1. Introduction jQuery is nothing but a JavaScript library that comes with rich functionalities. It is small and faster than many JavaScript code written by an average web &hellip;<\/p>\n","protected":false},"author":2162,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[63],"class_list":["post-22715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-jquery-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery Dimension Methods Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about jQuery? Then check out our detailed example on jQuery Dimension Methods! You can also download our FREE jQuery Programming Cookbook!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Dimension Methods Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about jQuery? Then check out our detailed example on jQuery Dimension Methods! You can also download our FREE jQuery Programming Cookbook!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-19T13:15:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/\"},\"author\":{\"name\":\"Yatin\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367\"},\"headline\":\"jQuery Dimension Methods Example\",\"datePublished\":\"2018-09-19T13:15:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/\"},\"wordCount\":1413,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"keywords\":[\"JQuery\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/\",\"name\":\"jQuery Dimension Methods Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2018-09-19T13:15:53+00:00\",\"description\":\"Interested to learn more about jQuery? Then check out our detailed example on jQuery Dimension Methods! You can also download our FREE jQuery Programming Cookbook!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Dimension Methods Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367\",\"name\":\"Yatin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g\",\"caption\":\"Yatin\"},\"description\":\"The author is graduated in Electronics &amp; Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java\/J2EE technologies platform and novel UI technologies.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/yatin-batra\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Dimension Methods Example - Web Code Geeks - 2026","description":"Interested to learn more about jQuery? Then check out our detailed example on jQuery Dimension Methods! You can also download our FREE jQuery Programming Cookbook!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Dimension Methods Example - Web Code Geeks - 2026","og_description":"Interested to learn more about jQuery? Then check out our detailed example on jQuery Dimension Methods! You can also download our FREE jQuery Programming Cookbook!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-09-19T13:15:53+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Yatin","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Yatin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/"},"author":{"name":"Yatin","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367"},"headline":"jQuery Dimension Methods Example","datePublished":"2018-09-19T13:15:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/"},"wordCount":1413,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","keywords":["JQuery"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/","name":"jQuery Dimension Methods Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2018-09-19T13:15:53+00:00","description":"Interested to learn more about jQuery? Then check out our detailed example on jQuery Dimension Methods! You can also download our FREE jQuery Programming Cookbook!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-dimension-methods-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Dimension Methods Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367","name":"Yatin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g","caption":"Yatin"},"description":"The author is graduated in Electronics &amp; Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java\/J2EE technologies platform and novel UI technologies.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/yatin-batra\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/2162"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=22715"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22715\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=22715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=22715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=22715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}