• Stars
    star
    174
  • Rank 219,104 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 12 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

📐 Measure elements

getSize

Get the size of elements. Used in Masonry, Isotope, & Flickity.

var size = getSize( elem );
// elem can be an element
var size = getSize( document.querySelector('.selector') )
// elem can be a selector string
var size = getSize('.selector')

Returns an object with:

  • width, height
  • innerWidth, innerHeight
  • outerWidth, outerHeight
  • paddingLeft, paddingTop, paddingRight, paddingBottom
  • marginLeft, marginTop, marginRight, marginBottom
  • borderLeftWidth, borderTopWidth, borderRightWidth, borderBottomWidth
  • isBorderBox

Browser support: Chrome 51+, Firefox 50+, Edge 12+, Safari 10+,

Install

npm: npm install get-size

Yarn: yarn add get-size

MIT License

getSize is released under the MIT License. Have at it.

More Repositories

1

masonry

🏩 Cascading grid layout plugin
HTML
16,283
star
2

imagesloaded

📷 JavaScript is all like "You images done yet or what?"
JavaScript
8,878
star
3

draggabilly

👇 Make that shiz draggable
JavaScript
3,856
star
4

3dtransforms

📦 Introduction to CSS 3D transforms
CSS
1,011
star
5

classie

🎩 class helper functions
JavaScript
869
star
6

close-pixelate

Pixelate an image with <canvas> a la Chuck Close
JavaScript
725
star
7

colcade

Lightweight masonry layout
HTML
488
star
8

vanilla-masonry

[deprecated] Masonry layouts without any frameworks
JavaScript
327
star
9

practical-ui-physics

Learn basic physics for UI
JavaScript
324
star
10

breathing-halftone

Images go whoa with lots of floaty dots
JavaScript
254
star
11

windex

Pretty up your localhost. No more 1996 jank.
CSS
184
star
12

arpeggiator

Web audio arpeggiator
JavaScript
176
star
13

CSS3.tmbundle

TextMate bundle for new CSS3 properties. Includes vendor specific properties and HTML5 elements
108
star
14

jquery-bridget

🌉 bridget makes jQuery plugins
JavaScript
108
star
15

zui-site-riot

Tutorial for zoom-scrolling on 2011.beercamp.com
JavaScript
54
star
16

eventie

event binding helper
JavaScript
54
star
17

doc-ready

lets get this party started... on document ready
JavaScript
49
star
18

sticky-titles

iOS/Android-like fixied titles that scroll sorta
JavaScript
33
star
19

jumbyl

Post to Tumblr from the command line
JavaScript
31
star
20

neo-vision

Chrome extension that syntax-highlights source code files with customizable themes
JavaScript
30
star
21

matches-selector

👗 matchesSelector helper
JavaScript
29
star
22

v3.desandro.com

All about me! In orange!
JavaScript
20
star
23

dotfiles

Personalized settings for Terminal, Git, TextMate, etc.
Shell
20
star
24

masonry-docs

📝 Documentation for Masonry
Handlebars
20
star
25

textmate-bundles

My modifications to TextMate's bundles
HTML
19
star
26

v2.desandro.com

My personal site. Runs on Stacey CMS
PHP
18
star
27

curtis-css-typeface

type made with CSS shapes
CSS
18
star
28

transitn

JS utility class for CSS transitions
JavaScript
17
star
29

get-style-property

quick & dirty CSS property testing
JavaScript
16
star
30

welovemariokart

JavaScript
14
star
31

dropshado.ws

👻 blog about front-end development minutiae
JavaScript
13
star
32

smallblog

🐭 I don't know how to put this in words but this is me trying
CSS
9
star
33

ani-halftone

Animated halftones
JavaScript
9
star
34

typekit-table

Sort and filter high-quality fonts from Typekit
JavaScript
8
star
35

requirejs-bower-homework

Help me figure out this RequireJS business
JavaScript
7
star
36

jtetypes

Try out fonts by James T. Edmondson
JavaScript
7
star
37

lists

📜 of lists
7
star
38

motion-emotion

Presentation on CSS transitions and transforms
6
star
39

demo

Demos, tests, and misfit fun things
JavaScript
6
star
40

organize-bower-sources

Get Bower dependency source files, in order, listed by file extension.
JavaScript
5
star
41

nclud-v3-talk

Presentation outline for talk about nclud.com v3
JavaScript
5
star
42

issues-agreement

Help me dev you
5
star
43

touchy-feely-dev

Outline for presentation at Future Insights Live 2012
CSS
4
star
44

mcgilldesandro.com

I'm getting hitched. This is the website.
JavaScript
4
star
45

dotvim

Vim config
Vim Script
4
star
46

make-julesmarie-cry

A sadistic bookmarklet for "Click here" links
JavaScript
4
star
47

mobile-safari-machete

"Mobile Safari: Bring your machete" presentation from Front Trends 2012
JavaScript
4
star
48

prefs

Personal preferences
3
star
49

blahble

A boring Tumblr theme
HTML
3
star
50

open-source-aint-free

Talk for Valio Con 2012
JavaScript
3
star
51

concatminify.com

Help newbie devs learn concat & minify
CSS
3
star
52

bower-introduction

Notes for presentation
2
star
53

masonry-v2-3-shim

Maintain backwards compatibility using Masonry v3 with code for Masonry v2.
JavaScript
2
star
54

v4.desandro.com

Personal site
Handlebars
1
star
55

button-group

JavaScript
1
star