jQuery plugin providing an easy way of getting all of an elements layout information.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
source
spec
.gitignore
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

jquery.placement

Build Status Bower version

jquery.placement is a jQuery plugin providing an easy way of getting all of an elements layout information.

Downloading jquery.placement.js

jquery.placement is available via bower:

Install via command line:

# run this command in your public html folder
bower install jquery.placement

Install via bower.json (recommended)

{
  "dependencies": {
    "jquery.placement": "*" // add jquery.placement under "dependencies"
  }
}
# run this in the same directory as your bower.json file
bower install

Using jquery.placement

A 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>

Building jquery.placement from source and running tests

  1. Clone the repo from GitHub:
git clone https://github.com/reflectiveSingleton/jquery.placement.git
cd jquery.placement
  1. 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
  1. Run a gulp task to build/test/etc:
# build everything (output in /dist) and run tests
gulp

# build everything (output in /dist)
gulp build

License

MIT license - http://www.opensource.org/licenses/mit-license.php

Analytics