jquery.placement is a jQuery plugin providing an easy way of getting all of an elements layout information.
jquery.placement is available via bower:
Install via command line:
# run this command in your public html folder
bower install jquery.placementInstall via bower.json (recommended)
{
"dependencies": {
"jquery.placement": "*" // add jquery.placement under "dependencies"
}
}# run this in the same directory as your bower.json file
bower installA couple of example usages (more documentation soon):
<html>
<!-- imaginary view port is 1000px X 1000px -->
<body>
<div id="someElement" style="position: absolute; top: 10; left: 20; width: 100px; height: 100px;"></div>
</body>
<script>
var placement;
placement = $('#someElement').placement();
placement === {
width: 100, // width of the element
height: 100, // height of element
top: 10, // top side distance from top of view port
left: 20, // left side distance from left of view port
right: 120, // right side distance from left of view port
leftOffset: 980, // left side distance from right of view port
rightOffset: 880, // right side distance from right of view port
};
// It is also possible to only grab what you want (lesser computationally intensive)
placement = $('#someElement').placement({ props: [ 'width', 'height', 'rightOffset' ] });
placement === {
width: 100, // width of the element
height: 100, // height of element
rightOffset: 880, // right side distance from right of view port
};
// support for relative position (not document offset) is not yet supported (upcomming):
placement = $('#someElement').placement({ context: 'relative' });
</script>
</html>- Clone the repo from GitHub:
git clone https://github.com/reflectiveSingleton/jquery.placement.git
cd jquery.placement- Acquire build dependencies:
Make sure you have node.js installed in your environment. jquery.placement additionally requires gulp plus several bower and NPM dependencies when building from source...to install those run:
# install gulp (javascript task runner, http://gulpjs.com/)
npm install -g gulp # you may need to run this under sudo
# install bower (package manager, http://bower.io/)
npm install -g bower # you may need to run this under sudo
# download dependencies from npm (https://www.npmjs.com/) and bower (http://bower.io/)
npm install && bower install- Run a gulp task to build/test/etc:
# build everything (output in /dist) and run tests
gulp
# build everything (output in /dist)
gulp buildMIT license - http://www.opensource.org/licenses/mit-license.php