Make width and height more jQuery-compatible and add inner and outer width and height #412

wants to merge 2 commits into


None yet
5 participants

jtward commented Feb 28, 2012

Made width and height getters, and inner and outer width and height equivalent to their jQuery counterparts when called on window, document or a descendant of document.
Calling any of these functions on elements that are not window, document or a descendant of document returns zero because it is not possible to guarantee a correct pixel value (jQuery v1.7.1 parses the raw style value, which could be in any unit of measurement).

ryanve commented Mar 4, 2012

jQuery(window).width() uses document.documentElement.clientWidth
jQuery(window).height() uses document.documentElement.clientHeight

jQuery(document).width() uses the max of 5 values. For Zepto, these 2 should do it:

Math.max(document.documentElement.offsetWidth, document.documentElement.scrollWidth)

See this test page and also dime.

jtward commented Mar 5, 2012

@ryanve: Thanks for the info. I've not changed Zepto's behaviour when given the window or document.
I could incorporate your suggestions, or you could open a separate pull request; I'm not sure which is preferable.

ryanve commented Mar 9, 2012

@jtward Cool / yea not sure either. I guess I'll do it in a separate one.


madrobby commented Mar 20, 2012

This adds a lot of code—a more elegant way to deal with this would be to use box-sizing: border-box on the affected elements. If compatibility with existing plugins and so on is required, I suggest that we move this code into a plugin and deal with it similar to the way we have a simple and a more powerful implementation of data(), which can be used as required.


Something weird is up with how Zepto calculates height, for sure. These values are nothing like jQuery’s values.

@jtward Does your pull request address the discrepancy revealed in those jsFiddles?

I've noticed that Zepto height calculations include padding. It is using el.getBoundingClientRect(), which includes padding, margin and border. To match jQuery, this should be el.getBoundingClientRect() - padding - margin - border.


madrobby commented Sep 13, 2013

I'm still standing with my suggestion to provide a plugin for greater jQuery compatibility if it is required. Otherwise, use box-sizing.

madrobby closed this Sep 13, 2013

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