jqDim

Provide the traditional dimension methods as jQuery Slim.

It is suggested to use it with Vanilla JS, Bliss, or Cash.

Remarks: jQuery's implementation on dimension APIs is very nice!

Options

jQuery 3.5.1 (default)

• jqDim.reliableTrDimensionsVer = 1

jQuery 3.6.0 ~ 3.7.1 (see jquery/jquery#5270)

• jqDim.reliableTrDimensionsVer = 2

Usage

<script src="https://cdn.jsdelivr.net/gh/cyfung1031/jqDim@3.7.1/release/jqDim-3.7.1.min.js"></script>


<a href="javascript:void(0);" onclick="ShowElementDimensions();">Show element dimensions</a>
<div id="divTestArea1" style="height: 100px; width: 400px; padding: 20px; margin: 3px; border: 1px solid silver; background-color: #eee;"></div>

<script type="text/javascript">
function ShowElementDimensions()
{
  
    let elm = document.querySelector("#divTestArea1")
	var result = "";

    let dim = window.jqDim(elm)
	
	result += "Dimensions of div: " + dim.width() + "x" + dim.height() + "</br>";
	result += "Inner dimensions of div: " + dim.innerWidth() + "x" + dim.innerHeight() + "</br>";	
	result += "Outer dimensions of div: " + dim.outerWidth() + "x" + dim.outerHeight() + "</br>";	
	result += "Outer dimensions of div (with margin): " + dim.outerWidth(true) + "x" + dim.outerHeight(true) + "</br>";	
	
	(elm).innerHTML=result;
    
}
</script>

File Size Reference

Size	jDim 3.6.0	Bliss	Cash 8.1.0	jQuery Slim 3.6.0
Unminified	27.1 KB	21.1 KB	36.5 KB	229 KB
Minified	5.97 KB	10.7 KB	16 KB	70.6 KB
Minified & Gzipped	2.59 KB	3 KB	6 KB	24.4 KB

Size	jDim + Bliss	jDim + Cash	jQuery Slim 3.6.0
Unminified	48.2 KB	57.6 KB	229 KB
Minified	16.7 KB	22 KB	70.6 KB
Minified & Gzipped	5.59 KB	8.59 KB	24.4 KB

• jqDim is minified by Andrew Chilton's JavaScript Minifier

jqDim(element)'s methods [GET]

• .offset()
• .position()
• .scrollTop()
• .scrollLeft()
• .width()
• .height()
• .innerWidth()
• .innerHeight()
• .outerWidth()
• .outerHeight()
• .outerWidth(true)
• .outerHeight(true)

Browser Support

15+ ✔	51+✔	45+✔	✖	38+✔	10+ ✔

Fix for Dimension Calculation in 3.7.1

License

This project is released under MIT License

• https://raw.githubusercontent.com/cyfung1031/jqDim/main/LICENSE

Most source codes come from jQuery Slim v3.7.1

jQuery JavaScript Library v3.7.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector

https://jquery.com/

Copyright OpenJS Foundation and other contributors

Released under the MIT license

https://jquery.org/license

Date: 2021-03-02T17:08Z