https://github.com/ryanve/dime

Cross-browser JavaScript dimensions module
https://github.com/ryanve/dime

dimension dimensions dom

Last synced: 4 months ago
JSON representation

Cross-browser JavaScript dimensions module

• Host: GitHub
• URL: https://github.com/ryanve/dime
• Owner: ryanve
• Created: 2012-03-04T10:38:22.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2013-11-18T21:34:24.000Z (about 11 years ago)
• Last Synced: 2024-05-02T00:08:38.096Z (9 months ago)
• Topics: dimension, dimensions, dom
• Language: JavaScript
• Homepage: https:/npm.im/dime
• Size: 141 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [dime](../../)

#### cross-browser JavaScript [module](https://npmjs.org/package/dime) to measure dimensions

```bash

$ npm install dime

```

## API ([3.0](../../releases))

### Static methods

#### Fast simple top-level methods

```js

dime.width(object) // get width

dime.height(object) // get height

dime.width(element, px) // set width

dime.height(element, px) // set height

```

#### Measurable objects

- `window`

- DOM node: `document` or element

- object with `.width`/`.height` properties or methods

```js

dime.width(screen) // => screen.width

dime.width({width:10, height:10}) // => 10

```

### Chain methods

#### jQueryish methods for compatible libs (such as [ender](https://github.com/ender-js))

```js

.width() // get the width of the 1st elem in the set

.width(value) // set the width of all elems in the set

.height() // get the width of the 1st elem in the set

.height(value) // set the width of all elems in the set

```

### Integrated usage

```js

$(window).width()

$(document).width()

$(element).width()

$(element).width(100)

```

### Standalone usage

```js

dime.fn.width.call(stack)

dime.fn.width.call(stack, px)

```

#### Standalone examples

It is only sensible to use these for *setting* dimensions—the [statics](#static-methods) are faster for gets.

```js

dime.fn.width.call([document]) // same as dime.width(document)

dime.fn.width.call(document.querySelectorAll('.example'), 100)

```

## [Version](../../releases) notes

#### 3.x is leaner than previous releases

- 2.x device methods were removed because the native [`screen`](http://ryanve.com/lab/dimensions/#device) provides these.

- 2.x viewport methods were removed in favor of `dime.width(window)` although those methods 

are available in [verge](#related-modules).

- In 3.x `dime` is a plain object—not a wrapper function.

## Related modules

- [verge](https://github.com/ryanve/verge): viewport utilities

## Resources

- [Lab: dimensions](http://ryanve.com/lab/dimensions/)

## License: [MIT](http://en.wikipedia.org/wiki/MIT_License)

Copyright (C) 2012 by [Ryan Van Etten](https://github.com/ryanve)