Installation
CSS Selectors
Event Handling
DOM Manipulation
Utilities
Data Structures
AJAX APIs
Animation APIs
Widgets Creation
.dim( [ New_Dimension ] )
Gets the Dimension of an element. Dimension not necessarily equal to the style values width and height. Dimesnion also includes padding and border width of an element
Sets an element to a particular Dimension if the new dimension is specified.
Parameters
NameTypeDefaultPossibleDescription
New_DimensionJSONOptional{ wid : AA, ht : BB }, New Dimension in JSON. "wid" refers to width dimension, "ht" refers to height dimension
where AA, BB are pixel numbers or String which precedes by "+" or "-"

Ex 1 : { wid : 50 , ht : 50 }
Ex 2 : { wid : "+100", ht : "-50" } - current wid + 100, current ht - 50
Ex 3 : { wid : 100 } or { wid : "-200" } - Only Horiziontal Dimensioning
Ex 4 : { ht : 50 } or { ht : "+100" } - Only Vertical Dimensioning
Returns
TypeDescription
JSON{ wid : AA, ht : BB}, where AA and BB are Dimension of elements in pixel
Example 1
Find the Dimension div elements. click on the box divs to find it.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get("div").on("click", function() {
				
				// Get the dimension of clicked div
				var di = $.self().dim();
				alert("Dimension - wid : " + di.wid + " ht : " + di.ht);
				
			});
		});						
						
<body>
	
	<div id="box1">Click</div>
	
	<div id="box2">Click</div>
	
	<div id="box3">Click</div>

</body>
	div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
		border : 2px solid red;
	}
	
	#box1 {
		width : 100px;
		height : 100px;
	}
	
	#box2 {
		width : 50px;
		height : 200px;
	}
	
	#box3 {
		width : 300px;
		height : 100px;
	}
Result
Example 2
Set different dimensions for a div element.
JS HTML CSS 
		$.domLoaded(function() {
			
			$.get("#btn1").on("click", function() {			
				// Set Dimension
				$.get("#box").dim({wid : 400, ht : 200});				
			});
			
			$.get("#btn2").on("click", function() {			
				// Set Dimension
				$.get("#box").dim({wid : 50, ht : 50});			
			});	

			$.get("#btn3").on("click", function() {			
				// Set Dimension
				$.get("#box").dim({wid : 100, ht : 100});			
			});				
			
		});					
						
<body>
	
	<div id="box">Box</div>
		
	<br/>
	
	<input type="button" id="btn1" value="Set Dimension 400, 200" /> 
	<input type="button" id="btn2" value="Set Dimension 50,50" /> 
	<input type="button" id="btn3" value="Reset to 100, 100" /> 

</body>
	div {
		display : inline-block;
		padding : 10px;
		margin : 5px;
	}
	
	#box {
		width : 100px;
		height : 100px;
		border : 2px solid red;
	}
Result