Icontem

JS Measure: Measure page area width and height interactively

Recommend this page to a friend!
  Info   Screenshots Screenshots   View files View files (7)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2013-09-19 (3 years ago) RSS 2.0 feedNot enough user ratingsTotal: 143 All time: 315 This week: 13Up
Version License JavaScript version Categories
measurer 1.0MIT/X Consortium ...1.0Utilities and Tools
Description Author

This object can measure page area width and height interactively.

It lets the user define an area in the page dragging the mouse pointer.

The object renders the area outline as the mouse moves, showing the width and height of the area in pixels, as well the coordinates of the top-left corner of the area.

A bookmarklet is also available, so this object can be used as link placed for instance in the browser toolbar.

Innovation Award
JavaScript Programming Innovation award nominee
August 2013
Number 2


Prize: One downloadable e-book of choice by O'Reilly
Sometimes developers need to inspect the elements in the pages generated by their applications to check if they have the dimensions they expect, besides other types of page element details.

This object can assist developers in that task. It lets them point and click on the page to measure the areas that cover the elements they want to check.

Manuel Lemos
Picture of Mark Rolich
  Performance   Level  
Name: Mark Rolich <contact>
Classes: 13 packages by
Country: Armenia Armenia
Innovation award
Innovation award
Nominee: 6x

Winner: 1x

Details
Measurer.js
=================

Measurer.js is a Javascript package allowing 
to measure dimensions of the objects on html page

Demo is available at http://mark-rolich.github.com/Measurer.js

Measurer.js requires Event.js and Dragdrop.js packages, which can be acquired at the following links:

Event.js

* Github - https://github.com/mark-rolich/Event.js
* JS Classes - http://www.jsclasses.org/package/212-JavaScript-Handle-events-in-a-browser-independent-manner.html

Dragdrop.js

* Github - https://github.com/mark-rolich/Dragdrop.js
* JS Classes - http://www.jsclasses.org/package/215-JavaScript-Handle-drag-and-drop-events-of-page-elements.html

Measurer.js is available as a bookmarklet, 
please see bookmarklet.js and bookmarklet_ie.js provided with the package.

Browser Compatibility
--------------------

Currently tested in:

* IE 8
* Chrome 24
* Firefox 18

Bug tracker
-----------

Have a bug? Please create an issue here on GitHub!

https://github.com/mark-rolich/Measurer.js/issues

Copyright and License
---------------------

The MIT License (MIT)

Copyright (c) 2013 Mark Rolich

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
Screenshots  
  • Screenshot
  Files folder image Files  
File Role Description
Accessible without login Plain text file bookmarklet.js Aux. bookmarklet javascript code
Accessible without login Plain text file bookmarklet_ie.js Aux. bookmarklet javascript code for Internet Explorer
Accessible without login Plain text file Measurer.css Data example css styles
Accessible without login HTML file Measurer.html Output demo
Plain text file Measurer.js Class Main class
Accessible without login Plain text file mit-license.txt Lic. LICENSE
Accessible without login Plain text file README.md Data README

Downloadmeasurer-2013-09-19.zip 88KB
Downloadmeasurer-2013-09-19.tar.gz 83KB
Install with ComposerInstall with Composer
Needed packages  
Class DownloadWhy it is needed Dependency
Event Download .zip .tar.gz for cross-browser event handling Required
Drag and Drop Download .zip .tar.gz to enable drag-drop functionality Required
 Version Control Unique User Downloads Download Rankings  
 87%
Total:143
This week:0
All time:315
This week:13Up