Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
# This file only contains additions to Zepto to add lesser-used functions
# from jQuery that we do actually need.
if this.Zepto
do ($ = Zepto) ->
# innerHeight & outerHeight are needed by <a plugin we use>
# outerHeight is documented at
# The below code based upon by pamelafox.
ioDim = (elem, Dimension, dimension, includeBorder, includeMargin) ->
if elem
# "Note that .height() will always return the content height,
# regardless of the value of the CSS box-sizing property."
# --
size = elem[dimension]()
# Thus, `size` is now our contentHeight; no matter our box-sizing
# mode, we need to add padding and border width to our size.
sides =
width: ["left", "right"]
height: ["top", "bottom"]
sides[dimension].forEach (side) ->
size += parseInt(elem.css("padding-#{side}"), 10)
size += parseInt(elem.css("border-#{side}-width"), 10) if includeBorder
size += parseInt(elem.css("margin-#{side}"), 10) if includeMargin
["width", "height"].forEach (dimension) ->
Dimension = dimension.replace(/./, (m) ->
$.fn["inner" + Dimension] ||= (includeMargin) ->
ioDim(this, Dimension, dimension, false, includeMargin)
$.fn["outer" + Dimension] ||= (includeMargin) ->
ioDim(this, Dimension, dimension, true, includeMargin)
# .detach() is like .remove() but it keeps data & events intact;
# it lets you move something in the dom.
# On someone indicates that this is
# basically a .clone(true) follewed by a .remove.
$.fn.detach ||= (selector) ->
set = this
if selector?
set = set.filter selector
cloned = set.clone(true)
return cloned
# More missing functions could be added here.

Thanks for sharing this. I just compiled to javascript and put just the width and height methods here

I also included some changes to utilise currying - not sure how to do this in coffeescript or I'd make a pull request. Anyway, take a look at my code if you like the idea

Hi, I noted an issue with the border.
Currently, the code adds the width of the border if the flag "includeBorder" is set. However this is done automatically by Zepto's width() or height() functions. So it adds extra width/height to the actual size.

For example, if my element is 100px wide, and it has a 5px wide border, the actual size is 110px, but your plugin returns 120px.

Instead, you should subtract the width of the border if the flag is NOT set.

Please let me know what you think about this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment