Created
December 13, 2019 07:12
-
-
Save lexuschert/8dbb25af4a59f26599e4a7e60162a45f to your computer and use it in GitHub Desktop.
Get Client Rect Offset
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function getClientRectOffsetY(elem, part, offset) { | |
elem = ge(elem); | |
offset = offset || 0; | |
var ey = getXY(elem)[1], | |
eh = getSize(elem)[1], | |
w = window, de = document.documentElement, | |
ch = Math.max(intval(w.innerHeight), intval(de.clientHeight)), | |
fixed_head = ge('page_header_cont'), | |
hh = getSize(fixed_head)[1], | |
st = (de.scrollTop || bodyNode.scrollTop || window.scrollY || 0); | |
if (!part) { | |
if (ey < st + hh + offset) return (ey - st + hh - offset); | |
if (ey + eh > st + ch - offset) return (ey + eh - st - ch + offset); | |
} else { | |
if (ey + eh < st + hh + offset) return (ey + eh - st - hh - offset); | |
if (ey > st + ch - offset) return (ey - st - ch + offset); | |
} | |
return 0; | |
} | |
function getXYRect(obj, notBounding) { | |
var rect; | |
if (notBounding && getStyle(obj, 'display') == 'inline') { | |
var rects = obj.getClientRects(); | |
rect = rects && rects[0] || obj.getBoundingClientRect(); | |
} else { | |
rect = obj.getBoundingClientRect(); | |
} | |
return rect; | |
} | |
function getXY(obj, forFixed) { | |
obj = ge(obj); | |
if (!obj) return [0,0]; | |
var docElem, win, | |
rect = {top: 0, left: 0}, | |
doc = obj.ownerDocument; | |
if (!doc) { | |
return [0, 0]; | |
} | |
docElem = doc.documentElement; | |
if (boundingRectEnabled(obj)) { | |
rect = getXYRect(obj, true); | |
} | |
win = doc == doc.window ? doc : (doc.nodeType === 9 ? doc.defaultView || doc.parentWindow : false); | |
return [ | |
rect.left + (!forFixed ? win.pageXOffset || docElem.scrollLeft : 0) - (docElem.clientLeft || 0), | |
rect.top + (!forFixed ? win.pageYOffset || docElem.scrollTop : 0) - (docElem.clientTop || 0) | |
]; | |
} | |
function getSize(elem, withoutBounds, notBounding) { | |
elem = ge(elem); | |
var s = [0, 0], de = document.documentElement, rect; | |
if (withoutBounds && getStyle(elem, 'boxSizing') === 'border-box') { | |
withoutBounds = false; | |
} | |
if (elem == document) { | |
s = [Math.max( | |
de.clientWidth, | |
bodyNode.scrollWidth, de.scrollWidth, | |
bodyNode.offsetWidth, de.offsetWidth | |
), Math.max( | |
de.clientHeight, | |
bodyNode.scrollHeight, de.scrollHeight, | |
bodyNode.offsetHeight, de.offsetHeight | |
)]; | |
} else if (elem){ | |
function getWH() { | |
if (boundingRectEnabled(elem) && (rect = getXYRect(elem, notBounding)) && rect.width !== undefined) { | |
s = [rect.width, rect.height]; | |
} else { | |
s = [elem.offsetWidth, elem.offsetHeight]; | |
} | |
if (!withoutBounds) return; | |
var padding = 0, border = 0; | |
each(s, function(i, v) { | |
var which = i ? ['Top', 'Bottom'] : ['Left', 'Right']; | |
each(which, function(){ | |
s[i] -= parseFloat(getStyle(elem, 'padding' + this)) || 0; | |
s[i] -= parseFloat(getStyle(elem, 'border' + this + 'Width')) || 0; | |
}); | |
}); | |
} | |
if (!isVisible(elem)) { | |
var props = {position: 'absolute', visibility: 'hidden', display: 'block'}; | |
var old = {}, old_cssText = false; | |
if (elem.style.cssText.indexOf('!important') > -1) { | |
old_cssText = elem.style.cssText; | |
} | |
each(props, function(i, v) { | |
old[i] = elem.style[i]; | |
elem.style[i] = v; | |
}); | |
getWH(); | |
each(props, function(i, v) { | |
elem.style[i] = old[i]; | |
}); | |
if (old_cssText) { | |
elem.style.cssText = old_cssText; | |
} | |
} else getWH(); | |
} | |
return s; | |
} | |
function getW(el) { | |
return getSize(el)[0]; | |
} | |
function getH(el) { | |
return getSize(el)[1]; | |
} | |
function ge(el) { | |
return (typeof el == 'string' || typeof el == 'number') ? document.getElementById(el) : el; | |
} | |
function getStyle(elem, name, force) { | |
elem = ge(elem); | |
if (isArray(name)) { var res = {}; each(name, function(i,v){res[v] = getStyle(elem, v);}); return res; } | |
if (!elem) return ''; | |
if (force === undefined) { | |
force = true; | |
} | |
if (!force && name == 'opacity' && browser.msie) { | |
var filter = elem.style['filter']; | |
return filter ? (filter.indexOf('opacity=') >= 0 ? | |
(parseFloat(filter.match(/opacity=([^)]*)/)[1] ) / 100) + '' : '1') : ''; | |
} | |
if (!force && elem.style && (elem.style[name] || name == 'height')) { | |
return elem.style[name]; | |
} | |
var ret, defaultView = document.defaultView || window; | |
if (defaultView.getComputedStyle) { | |
name = name.replace(/([A-Z])/g, '-$1').toLowerCase(); | |
var computedStyle = defaultView.getComputedStyle(elem, null); | |
if (computedStyle) { | |
ret = computedStyle.getPropertyValue(name); | |
} | |
} else if (elem.currentStyle) { | |
if (name == 'opacity' && browser.msie) { | |
var filter = elem.currentStyle['filter']; | |
return filter && filter.indexOf('opacity=') >= 0 ? | |
(parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100) + '' : '1'; | |
} | |
var camelCase = name.replace(/\-(\w)/g, function(all, letter){ | |
return letter.toUpperCase(); | |
}); | |
ret = elem.currentStyle[name] || elem.currentStyle[camelCase]; | |
//dummy fix for ie | |
if (ret == 'auto') { | |
ret = 0; | |
} | |
ret = (ret + '').split(' '); | |
each(ret, function(i,v) { | |
if (!/^\d+(px)?$/i.test(v) && /^\d/.test(v)) { | |
var style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left; | |
elem.runtimeStyle.left = elem.currentStyle.left; | |
style.left = v || 0; | |
ret[i] = style.pixelLeft + 'px'; | |
style.left = left; | |
elem.runtimeStyle.left = rsLeft; | |
} | |
}); | |
ret = ret.join(' '); | |
} | |
if (force && (name == 'width' || name == 'height')) { | |
var ret2 = getSize(elem, true)[({'width': 0, 'height': 1})[name]]; | |
ret = (intval(ret) ? Math.max(floatval(ret), ret2) : ret2) + 'px'; | |
} | |
return ret; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment