root / docs / www / colonyscout / internal / jeditable / js / jquery.dimensions.js @ f59acf11
History | View | Annotate | Download (21.6 KB)
| 1 |
/* Copyright (c) 2007 Paul Bakaus (paul.bakaus@googlemail.com) and Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
|
|---|---|
| 2 |
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
| 3 |
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
| 4 |
*
|
| 5 |
* $LastChangedDate$
|
| 6 |
* $Rev$
|
| 7 |
*
|
| 8 |
* Version: 1.0.1
|
| 9 |
*/
|
| 10 |
|
| 11 |
(function($){ |
| 12 |
|
| 13 |
// store a copy of the core height and width methods
|
| 14 |
var height = $.fn.height, |
| 15 |
width = $.fn.width;
|
| 16 |
|
| 17 |
$.fn.extend({
|
| 18 |
/**
|
| 19 |
* If used on document, returns the document's height (innerHeight).
|
| 20 |
* If used on window, returns the viewport's (window) height.
|
| 21 |
* See core docs on height() to see what happens when used on an element.
|
| 22 |
*
|
| 23 |
* @example $("#testdiv").height()
|
| 24 |
* @result 200
|
| 25 |
*
|
| 26 |
* @example $(document).height()
|
| 27 |
* @result 800
|
| 28 |
*
|
| 29 |
* @example $(window).height()
|
| 30 |
* @result 400
|
| 31 |
*
|
| 32 |
* @name height
|
| 33 |
* @type Number
|
| 34 |
* @cat Plugins/Dimensions
|
| 35 |
*/
|
| 36 |
height: function() { |
| 37 |
if (!this[0]) error(); |
| 38 |
if ( this[0] == window ) |
| 39 |
if ( ($.browser.mozilla || $.browser.opera) && $(document).width() > self.innerWidth) |
| 40 |
// mozilla and opera both return width + scrollbar width
|
| 41 |
return self.innerHeight - getScrollbarWidth();
|
| 42 |
else
|
| 43 |
return self.innerHeight ||
|
| 44 |
$.boxModel && document.documentElement.clientHeight ||
|
| 45 |
document.body.clientHeight; |
| 46 |
|
| 47 |
if ( this[0] == document ) |
| 48 |
return Math.max( document.body.scrollHeight, document.body.offsetHeight );
|
| 49 |
|
| 50 |
return height.apply(this, arguments); |
| 51 |
}, |
| 52 |
|
| 53 |
/**
|
| 54 |
* If used on document, returns the document's width (innerWidth).
|
| 55 |
* If used on window, returns the viewport's (window) width.
|
| 56 |
* See core docs on width() to see what happens when used on an element.
|
| 57 |
*
|
| 58 |
* @example $("#testdiv").width()
|
| 59 |
* @result 200
|
| 60 |
*
|
| 61 |
* @example $(document).width()
|
| 62 |
* @result 800
|
| 63 |
*
|
| 64 |
* @example $(window).width()
|
| 65 |
* @result 400
|
| 66 |
*
|
| 67 |
* @name width
|
| 68 |
* @type Number
|
| 69 |
* @cat Plugins/Dimensions
|
| 70 |
*/
|
| 71 |
width: function() { |
| 72 |
if (!this[0]) error(); |
| 73 |
if ( this[0] == window ) |
| 74 |
if (($.browser.mozilla || $.browser.opera) && $(document).height() > self.innerHeight) |
| 75 |
// mozilla and opera both return width + scrollbar width
|
| 76 |
return self.innerWidth - getScrollbarWidth();
|
| 77 |
else
|
| 78 |
return self.innerWidth ||
|
| 79 |
$.boxModel && document.documentElement.clientWidth ||
|
| 80 |
document.body.clientWidth; |
| 81 |
|
| 82 |
if ( this[0] == document ) |
| 83 |
if ($.browser.mozilla) { |
| 84 |
// mozilla reports scrollWidth and offsetWidth as the same
|
| 85 |
var scrollLeft = self.pageXOffset;
|
| 86 |
self.scrollTo(99999999, self.pageYOffset);
|
| 87 |
var scrollWidth = self.pageXOffset;
|
| 88 |
self.scrollTo(scrollLeft, self.pageYOffset); |
| 89 |
return document.body.offsetWidth + scrollWidth;
|
| 90 |
} |
| 91 |
else
|
| 92 |
return Math.max( document.body.scrollWidth, document.body.offsetWidth );
|
| 93 |
|
| 94 |
return width.apply(this, arguments); |
| 95 |
}, |
| 96 |
|
| 97 |
/**
|
| 98 |
* Gets the inner height (excludes the border and includes the padding) for the first matched element.
|
| 99 |
* If used on document, returns the document's height (innerHeight).
|
| 100 |
* If used on window, returns the viewport's (window) height.
|
| 101 |
*
|
| 102 |
* @example $("#testdiv").innerHeight()
|
| 103 |
* @result 210
|
| 104 |
*
|
| 105 |
* @name innerHeight
|
| 106 |
* @type Number
|
| 107 |
* @cat Plugins/Dimensions
|
| 108 |
*/
|
| 109 |
innerHeight: function() { |
| 110 |
if (!this[0]) error(); |
| 111 |
return this[0] == window || this[0] == document ? |
| 112 |
this.height() :
|
| 113 |
this.is(':visible') ? |
| 114 |
this[0].offsetHeight - num(this, 'borderTopWidth') - num(this, 'borderBottomWidth') : |
| 115 |
this.height() + num(this, 'paddingTop') + num(this, 'paddingBottom'); |
| 116 |
}, |
| 117 |
|
| 118 |
/**
|
| 119 |
* Gets the inner width (excludes the border and includes the padding) for the first matched element.
|
| 120 |
* If used on document, returns the document's width (innerWidth).
|
| 121 |
* If used on window, returns the viewport's (window) width.
|
| 122 |
*
|
| 123 |
* @example $("#testdiv").innerWidth()
|
| 124 |
* @result 210
|
| 125 |
*
|
| 126 |
* @name innerWidth
|
| 127 |
* @type Number
|
| 128 |
* @cat Plugins/Dimensions
|
| 129 |
*/
|
| 130 |
innerWidth: function() { |
| 131 |
if (!this[0]) error(); |
| 132 |
return this[0] == window || this[0] == document ? |
| 133 |
this.width() :
|
| 134 |
this.is(':visible') ? |
| 135 |
this[0].offsetWidth - num(this, 'borderLeftWidth') - num(this, 'borderRightWidth') : |
| 136 |
this.width() + num(this, 'paddingLeft') + num(this, 'paddingRight'); |
| 137 |
}, |
| 138 |
|
| 139 |
/**
|
| 140 |
* Gets the outer height (includes the border and padding) for the first matched element.
|
| 141 |
* If used on document, returns the document's height (innerHeight).
|
| 142 |
* If used on window, returns the viewport's (window) height.
|
| 143 |
*
|
| 144 |
* @example $("#testdiv").outerHeight()
|
| 145 |
* @result 220
|
| 146 |
*
|
| 147 |
* @name outerHeight
|
| 148 |
* @type Number
|
| 149 |
* @cat Plugins/Dimensions
|
| 150 |
*/
|
| 151 |
outerHeight: function() { |
| 152 |
if (!this[0]) error(); |
| 153 |
return this[0] == window || this[0] == document ? |
| 154 |
this.height() :
|
| 155 |
this.is(':visible') ? |
| 156 |
this[0].offsetHeight : |
| 157 |
this.height() + num(this,'borderTopWidth') + num(this, 'borderBottomWidth') + num(this, 'paddingTop') + num(this, 'paddingBottom'); |
| 158 |
}, |
| 159 |
|
| 160 |
/**
|
| 161 |
* Gets the outer width (including the border and padding) for the first matched element.
|
| 162 |
* If used on document, returns the document's width (innerWidth).
|
| 163 |
* If used on window, returns the viewport's (window) width.
|
| 164 |
*
|
| 165 |
* @example $("#testdiv").outerHeight()
|
| 166 |
* @result 1000
|
| 167 |
*
|
| 168 |
* @name outerHeight
|
| 169 |
* @type Number
|
| 170 |
* @cat Plugins/Dimensions
|
| 171 |
*/
|
| 172 |
outerWidth: function() { |
| 173 |
if (!this[0]) error(); |
| 174 |
return this[0] == window || this[0] == document ? |
| 175 |
this.width() :
|
| 176 |
this.is(':visible') ? |
| 177 |
this[0].offsetWidth : |
| 178 |
this.width() + num(this, 'borderLeftWidth') + num(this, 'borderRightWidth') + num(this, 'paddingLeft') + num(this, 'paddingRight'); |
| 179 |
}, |
| 180 |
|
| 181 |
/**
|
| 182 |
* Gets how many pixels the user has scrolled to the right (scrollLeft).
|
| 183 |
* Works on containers with overflow: auto and window/document.
|
| 184 |
*
|
| 185 |
* @example $(window).scrollLeft()
|
| 186 |
* @result 100
|
| 187 |
*
|
| 188 |
* @example $(document).scrollLeft()
|
| 189 |
* @result 100
|
| 190 |
*
|
| 191 |
* @example $("#testdiv").scrollLeft()
|
| 192 |
* @result 100
|
| 193 |
*
|
| 194 |
* @name scrollLeft
|
| 195 |
* @type Number
|
| 196 |
* @cat Plugins/Dimensions
|
| 197 |
*/
|
| 198 |
/**
|
| 199 |
* Sets the scrollLeft property for each element and continues the chain.
|
| 200 |
* Works on containers with overflow: auto and window/document.
|
| 201 |
*
|
| 202 |
* @example $(window).scrollLeft(100).scrollLeft()
|
| 203 |
* @result 100
|
| 204 |
*
|
| 205 |
* @example $(document).scrollLeft(100).scrollLeft()
|
| 206 |
* @result 100
|
| 207 |
*
|
| 208 |
* @example $("#testdiv").scrollLeft(100).scrollLeft()
|
| 209 |
* @result 100
|
| 210 |
*
|
| 211 |
* @name scrollLeft
|
| 212 |
* @param Number value A positive number representing the desired scrollLeft.
|
| 213 |
* @type jQuery
|
| 214 |
* @cat Plugins/Dimensions
|
| 215 |
*/
|
| 216 |
scrollLeft: function(val) { |
| 217 |
if (!this[0]) error(); |
| 218 |
if ( val != undefined ) |
| 219 |
// set the scroll left
|
| 220 |
return this.each(function() { |
| 221 |
if (this == window || this == document) |
| 222 |
window.scrollTo( val, $(window).scrollTop() );
|
| 223 |
else
|
| 224 |
this.scrollLeft = val;
|
| 225 |
}); |
| 226 |
|
| 227 |
// return the scroll left offest in pixels
|
| 228 |
if ( this[0] == window || this[0] == document ) |
| 229 |
return self.pageXOffset ||
|
| 230 |
$.boxModel && document.documentElement.scrollLeft ||
|
| 231 |
document.body.scrollLeft; |
| 232 |
|
| 233 |
return this[0].scrollLeft; |
| 234 |
}, |
| 235 |
|
| 236 |
/**
|
| 237 |
* Gets how many pixels the user has scrolled to the bottom (scrollTop).
|
| 238 |
* Works on containers with overflow: auto and window/document.
|
| 239 |
*
|
| 240 |
* @example $(window).scrollTop()
|
| 241 |
* @result 100
|
| 242 |
*
|
| 243 |
* @example $(document).scrollTop()
|
| 244 |
* @result 100
|
| 245 |
*
|
| 246 |
* @example $("#testdiv").scrollTop()
|
| 247 |
* @result 100
|
| 248 |
*
|
| 249 |
* @name scrollTop
|
| 250 |
* @type Number
|
| 251 |
* @cat Plugins/Dimensions
|
| 252 |
*/
|
| 253 |
/**
|
| 254 |
* Sets the scrollTop property for each element and continues the chain.
|
| 255 |
* Works on containers with overflow: auto and window/document.
|
| 256 |
*
|
| 257 |
* @example $(window).scrollTop(100).scrollTop()
|
| 258 |
* @result 100
|
| 259 |
*
|
| 260 |
* @example $(document).scrollTop(100).scrollTop()
|
| 261 |
* @result 100
|
| 262 |
*
|
| 263 |
* @example $("#testdiv").scrollTop(100).scrollTop()
|
| 264 |
* @result 100
|
| 265 |
*
|
| 266 |
* @name scrollTop
|
| 267 |
* @param Number value A positive number representing the desired scrollTop.
|
| 268 |
* @type jQuery
|
| 269 |
* @cat Plugins/Dimensions
|
| 270 |
*/
|
| 271 |
scrollTop: function(val) { |
| 272 |
if (!this[0]) error(); |
| 273 |
if ( val != undefined ) |
| 274 |
// set the scroll top
|
| 275 |
return this.each(function() { |
| 276 |
if (this == window || this == document) |
| 277 |
window.scrollTo( $(window).scrollLeft(), val );
|
| 278 |
else
|
| 279 |
this.scrollTop = val;
|
| 280 |
}); |
| 281 |
|
| 282 |
// return the scroll top offset in pixels
|
| 283 |
if ( this[0] == window || this[0] == document ) |
| 284 |
return self.pageYOffset ||
|
| 285 |
$.boxModel && document.documentElement.scrollTop ||
|
| 286 |
document.body.scrollTop; |
| 287 |
|
| 288 |
return this[0].scrollTop; |
| 289 |
}, |
| 290 |
|
| 291 |
/**
|
| 292 |
* Gets the top and left positioned offset in pixels.
|
| 293 |
* The positioned offset is the offset between a positioned
|
| 294 |
* parent and the element itself.
|
| 295 |
*
|
| 296 |
* For accurate calculations make sure to use pixel values for margins, borders and padding.
|
| 297 |
*
|
| 298 |
* @example $("#testdiv").position()
|
| 299 |
* @result { top: 100, left: 100 }
|
| 300 |
*
|
| 301 |
* @example var position = {};
|
| 302 |
* $("#testdiv").position(position)
|
| 303 |
* @result position = { top: 100, left: 100 }
|
| 304 |
*
|
| 305 |
* @name position
|
| 306 |
* @param Object returnObject Optional An object to store the return value in, so as not to break the chain. If passed in the
|
| 307 |
* chain will not be broken and the result will be assigned to this object.
|
| 308 |
* @type Object
|
| 309 |
* @cat Plugins/Dimensions
|
| 310 |
*/
|
| 311 |
position: function(returnObject) { |
| 312 |
return this.offset({ margin: false, scroll: false, relativeTo: this.offsetParent() }, returnObject); |
| 313 |
}, |
| 314 |
|
| 315 |
/**
|
| 316 |
* Gets the location of the element in pixels from the top left corner of the viewport.
|
| 317 |
* The offset method takes an optional map of key value pairs to configure the way
|
| 318 |
* the offset is calculated. Here are the different options.
|
| 319 |
*
|
| 320 |
* (Boolean) margin - Should the margin of the element be included in the calculations? True by default.
|
| 321 |
* (Boolean) border - Should the border of the element be included in the calculations? False by default.
|
| 322 |
* (Boolean) padding - Should the padding of the element be included in the calculations? False by default.
|
| 323 |
* (Boolean) scroll - Should the scroll offsets of the parent elements be included in the calculations? True by default.
|
| 324 |
* When true it adds the total scroll offsets of all parents to the total offset and also adds two
|
| 325 |
* properties to the returned object, scrollTop and scrollLeft.
|
| 326 |
* (Boolean) lite - When true it will use the offsetLite method instead of the full-blown, slower offset method. False by default.
|
| 327 |
* Only use this when margins, borders and padding calculations don't matter.
|
| 328 |
* (HTML Element) relativeTo - This should be a parent of the element and should have position (like absolute or relative).
|
| 329 |
* It will retreive the offset relative to this parent element. By default it is the body element.
|
| 330 |
*
|
| 331 |
* Also an object can be passed as the second paramater to
|
| 332 |
* catch the value of the return and continue the chain.
|
| 333 |
*
|
| 334 |
* For accurate calculations make sure to use pixel values for margins, borders and padding.
|
| 335 |
*
|
| 336 |
* Known issues:
|
| 337 |
* - Issue: A div positioned relative or static without any content before it and its parent will report an offsetTop of 0 in Safari
|
| 338 |
* Workaround: Place content before the relative div ... and set height and width to 0 and overflow to hidden
|
| 339 |
*
|
| 340 |
* @example $("#testdiv").offset()
|
| 341 |
* @result { top: 100, left: 100, scrollTop: 10, scrollLeft: 10 }
|
| 342 |
*
|
| 343 |
* @example $("#testdiv").offset({ scroll: false })
|
| 344 |
* @result { top: 90, left: 90 }
|
| 345 |
*
|
| 346 |
* @example var offset = {}
|
| 347 |
* $("#testdiv").offset({ scroll: false }, offset)
|
| 348 |
* @result offset = { top: 90, left: 90 }
|
| 349 |
*
|
| 350 |
* @name offset
|
| 351 |
* @param Map options Optional settings to configure the way the offset is calculated.
|
| 352 |
* @param Object returnObject An object to store the return value in, so as not to break the chain. If passed in the
|
| 353 |
* chain will not be broken and the result will be assigned to this object.
|
| 354 |
* @type Object
|
| 355 |
* @cat Plugins/Dimensions
|
| 356 |
*/
|
| 357 |
offset: function(options, returnObject) { |
| 358 |
if (!this[0]) error(); |
| 359 |
var x = 0, y = 0, sl = 0, st = 0, |
| 360 |
elem = this[0], parent = this[0], op, parPos, elemPos = $.css(elem, 'position'), |
| 361 |
mo = $.browser.mozilla, ie = $.browser.msie, sf = $.browser.safari, oa = $.browser.opera, |
| 362 |
absparent = false, relparent = false, |
| 363 |
options = $.extend({ margin: true, border: false, padding: false, scroll: true, lite: false, relativeTo: document.body }, options || {}); |
| 364 |
|
| 365 |
// Use offsetLite if lite option is true
|
| 366 |
if (options.lite) return this.offsetLite(options, returnObject); |
| 367 |
// Get the HTMLElement if relativeTo is a jquery collection
|
| 368 |
if (options.relativeTo.jquery) options.relativeTo = options.relativeTo[0]; |
| 369 |
|
| 370 |
if (elem.tagName == 'BODY') { |
| 371 |
// Safari is the only one to get offsetLeft and offsetTop properties of the body "correct"
|
| 372 |
// Except they all mess up when the body is positioned absolute or relative
|
| 373 |
x = elem.offsetLeft; |
| 374 |
y = elem.offsetTop; |
| 375 |
// Mozilla ignores margin and subtracts border from body element
|
| 376 |
if (mo) {
|
| 377 |
x += num(elem, 'marginLeft') + (num(elem, 'borderLeftWidth')*2); |
| 378 |
y += num(elem, 'marginTop') + (num(elem, 'borderTopWidth') *2); |
| 379 |
} else
|
| 380 |
// Opera ignores margin
|
| 381 |
if (oa) {
|
| 382 |
x += num(elem, 'marginLeft');
|
| 383 |
y += num(elem, 'marginTop');
|
| 384 |
} else
|
| 385 |
// IE does not add the border in Standards Mode
|
| 386 |
if (ie && jQuery.boxModel) {
|
| 387 |
x += num(elem, 'borderLeftWidth');
|
| 388 |
y += num(elem, 'borderTopWidth');
|
| 389 |
} |
| 390 |
} else {
|
| 391 |
do {
|
| 392 |
parPos = $.css(parent, 'position'); |
| 393 |
|
| 394 |
x += parent.offsetLeft; |
| 395 |
y += parent.offsetTop; |
| 396 |
|
| 397 |
// Mozilla and IE do not add the border
|
| 398 |
if (mo || ie) {
|
| 399 |
// add borders to offset
|
| 400 |
x += num(parent, 'borderLeftWidth');
|
| 401 |
y += num(parent, 'borderTopWidth');
|
| 402 |
|
| 403 |
// Mozilla does not include the border on body if an element isn't positioned absolute and is without an absolute parent
|
| 404 |
if (mo && parPos == 'absolute') absparent = true; |
| 405 |
// IE does not include the border on the body if an element is position static and without an absolute or relative parent
|
| 406 |
if (ie && parPos == 'relative') relparent = true; |
| 407 |
} |
| 408 |
|
| 409 |
op = parent.offsetParent || document.body; |
| 410 |
if (options.scroll || mo) {
|
| 411 |
do {
|
| 412 |
if (options.scroll) {
|
| 413 |
// get scroll offsets
|
| 414 |
sl += parent.scrollLeft; |
| 415 |
st += parent.scrollTop; |
| 416 |
} |
| 417 |
|
| 418 |
// Opera sometimes incorrectly reports scroll offset for elements with display set to table-row or inline
|
| 419 |
if (oa && ($.css(parent, 'display') || '').match(/table-row|inline/)) { |
| 420 |
sl = sl - ((parent.scrollLeft == parent.offsetLeft) ? parent.scrollLeft : 0);
|
| 421 |
st = st - ((parent.scrollTop == parent.offsetTop) ? parent.scrollTop : 0);
|
| 422 |
} |
| 423 |
|
| 424 |
// Mozilla does not add the border for a parent that has overflow set to anything but visible
|
| 425 |
if (mo && parent != elem && $.css(parent, 'overflow') != 'visible') { |
| 426 |
x += num(parent, 'borderLeftWidth');
|
| 427 |
y += num(parent, 'borderTopWidth');
|
| 428 |
} |
| 429 |
|
| 430 |
parent = parent.parentNode; |
| 431 |
} while (parent != op);
|
| 432 |
} |
| 433 |
parent = op; |
| 434 |
|
| 435 |
// exit the loop if we are at the relativeTo option but not if it is the body or html tag
|
| 436 |
if (parent == options.relativeTo && !(parent.tagName == 'BODY' || parent.tagName == 'HTML')) { |
| 437 |
// Mozilla does not add the border for a parent that has overflow set to anything but visible
|
| 438 |
if (mo && parent != elem && $.css(parent, 'overflow') != 'visible') { |
| 439 |
x += num(parent, 'borderLeftWidth');
|
| 440 |
y += num(parent, 'borderTopWidth');
|
| 441 |
} |
| 442 |
// Safari and opera includes border on positioned parents
|
| 443 |
if (($.browser.safari || $.browser.opera) && $.css(op, 'position') != 'static') { |
| 444 |
x -= num(op, 'borderLeftWidth');
|
| 445 |
y -= num(op, 'borderTopWidth');
|
| 446 |
} |
| 447 |
break;
|
| 448 |
} |
| 449 |
if (parent.tagName == 'BODY' || parent.tagName == 'HTML') { |
| 450 |
// Safari and IE Standards Mode doesn't add the body margin for elments positioned with static or relative
|
| 451 |
if ((sf || (ie && $.boxModel)) && elemPos != 'absolute' && elemPos != 'fixed') { |
| 452 |
x += num(parent, 'marginLeft');
|
| 453 |
y += num(parent, 'marginTop');
|
| 454 |
} |
| 455 |
// Mozilla does not include the border on body if an element isn't positioned absolute and is without an absolute parent
|
| 456 |
// IE does not include the border on the body if an element is positioned static and without an absolute or relative parent
|
| 457 |
if ( (mo && !absparent && elemPos != 'fixed') || |
| 458 |
(ie && elemPos == 'static' && !relparent) ) {
|
| 459 |
x += num(parent, 'borderLeftWidth');
|
| 460 |
y += num(parent, 'borderTopWidth');
|
| 461 |
} |
| 462 |
break; // Exit the loop |
| 463 |
} |
| 464 |
} while (parent);
|
| 465 |
} |
| 466 |
|
| 467 |
var returnValue = handleOffsetReturn(elem, options, x, y, sl, st);
|
| 468 |
|
| 469 |
if (returnObject) { $.extend(returnObject, returnValue); return this; } |
| 470 |
else { return returnValue; } |
| 471 |
}, |
| 472 |
|
| 473 |
/**
|
| 474 |
* Gets the location of the element in pixels from the top left corner of the viewport.
|
| 475 |
* This method is much faster than offset but not as accurate when borders and margins are
|
| 476 |
* on the element and/or its parents. This method can be invoked
|
| 477 |
* by setting the lite option to true in the offset method.
|
| 478 |
* The offsetLite method takes an optional map of key value pairs to configure the way
|
| 479 |
* the offset is calculated. Here are the different options.
|
| 480 |
*
|
| 481 |
* (Boolean) margin - Should the margin of the element be included in the calculations? True by default.
|
| 482 |
* (Boolean) border - Should the border of the element be included in the calculations? False by default.
|
| 483 |
* (Boolean) padding - Should the padding of the element be included in the calcuations? False by default.
|
| 484 |
* (Boolean) scroll - Sould the scroll offsets of the parent elements be included int he calculations? True by default.
|
| 485 |
* When true it adds the total scroll offsets of all parents to the total offset and also adds two
|
| 486 |
* properties to the returned object, scrollTop and scrollLeft.
|
| 487 |
* (HTML Element) relativeTo - This should be a parent of the element and should have position (like absolute or relative).
|
| 488 |
* It will retreive the offset relative to this parent element. By default it is the body element.
|
| 489 |
*
|
| 490 |
* @name offsetLite
|
| 491 |
* @param Map options Optional settings to configure the way the offset is calculated.
|
| 492 |
* @param Object returnObject An object to store the return value in, so as not to break the chain. If passed in the
|
| 493 |
* chain will not be broken and the result will be assigned to this object.
|
| 494 |
* @type Object
|
| 495 |
* @cat Plugins/Dimensions
|
| 496 |
*/
|
| 497 |
offsetLite: function(options, returnObject) { |
| 498 |
if (!this[0]) error(); |
| 499 |
var x = 0, y = 0, sl = 0, st = 0, parent = this[0], offsetParent, |
| 500 |
options = $.extend({ margin: true, border: false, padding: false, scroll: true, relativeTo: document.body }, options || {}); |
| 501 |
|
| 502 |
// Get the HTMLElement if relativeTo is a jquery collection
|
| 503 |
if (options.relativeTo.jquery) options.relativeTo = options.relativeTo[0]; |
| 504 |
|
| 505 |
do {
|
| 506 |
x += parent.offsetLeft; |
| 507 |
y += parent.offsetTop; |
| 508 |
|
| 509 |
offsetParent = parent.offsetParent || document.body; |
| 510 |
if (options.scroll) {
|
| 511 |
// get scroll offsets
|
| 512 |
do {
|
| 513 |
sl += parent.scrollLeft; |
| 514 |
st += parent.scrollTop; |
| 515 |
parent = parent.parentNode; |
| 516 |
} while(parent != offsetParent);
|
| 517 |
} |
| 518 |
parent = offsetParent; |
| 519 |
} while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML' && parent != options.relativeTo); |
| 520 |
|
| 521 |
var returnValue = handleOffsetReturn(this[0], options, x, y, sl, st); |
| 522 |
|
| 523 |
if (returnObject) { $.extend(returnObject, returnValue); return this; } |
| 524 |
else { return returnValue; } |
| 525 |
}, |
| 526 |
|
| 527 |
/**
|
| 528 |
* Returns a jQuery collection with the positioned parent of
|
| 529 |
* the first matched element. This is the first parent of
|
| 530 |
* the element that has position (as in relative or absolute).
|
| 531 |
*
|
| 532 |
* @name offsetParent
|
| 533 |
* @type jQuery
|
| 534 |
* @cat Plugins/Dimensions
|
| 535 |
*/
|
| 536 |
offsetParent: function() { |
| 537 |
if (!this[0]) error(); |
| 538 |
var offsetParent = this[0].offsetParent; |
| 539 |
while ( offsetParent && (offsetParent.tagName != 'BODY' && $.css(offsetParent, 'position') == 'static') ) |
| 540 |
offsetParent = offsetParent.offsetParent; |
| 541 |
return $(offsetParent); |
| 542 |
} |
| 543 |
}); |
| 544 |
|
| 545 |
/**
|
| 546 |
* Throws an error message when no elements are in the jQuery collection
|
| 547 |
* @private
|
| 548 |
*/
|
| 549 |
var error = function() { |
| 550 |
throw "Dimensions: jQuery collection is empty"; |
| 551 |
}; |
| 552 |
|
| 553 |
/**
|
| 554 |
* Handles converting a CSS Style into an Integer.
|
| 555 |
* @private
|
| 556 |
*/
|
| 557 |
var num = function(el, prop) { |
| 558 |
return parseInt($.css(el.jquery?el[0]:el,prop))||0; |
| 559 |
}; |
| 560 |
|
| 561 |
/**
|
| 562 |
* Handles the return value of the offset and offsetLite methods.
|
| 563 |
* @private
|
| 564 |
*/
|
| 565 |
var handleOffsetReturn = function(elem, options, x, y, sl, st) { |
| 566 |
if ( !options.margin ) {
|
| 567 |
x -= num(elem, 'marginLeft');
|
| 568 |
y -= num(elem, 'marginTop');
|
| 569 |
} |
| 570 |
|
| 571 |
// Safari and Opera do not add the border for the element
|
| 572 |
if ( options.border && ($.browser.safari || $.browser.opera) ) { |
| 573 |
x += num(elem, 'borderLeftWidth');
|
| 574 |
y += num(elem, 'borderTopWidth');
|
| 575 |
} else if ( !options.border && !($.browser.safari || $.browser.opera) ) { |
| 576 |
x -= num(elem, 'borderLeftWidth');
|
| 577 |
y -= num(elem, 'borderTopWidth');
|
| 578 |
} |
| 579 |
|
| 580 |
if ( options.padding ) {
|
| 581 |
x += num(elem, 'paddingLeft');
|
| 582 |
y += num(elem, 'paddingTop');
|
| 583 |
} |
| 584 |
|
| 585 |
// do not include scroll offset on the element ... opera sometimes reports scroll offset as actual offset
|
| 586 |
if ( options.scroll && ($.browser.opera && elem.offsetLeft != elem.scrollLeft && elem.offsetTop != elem.scrollLeft) ) { |
| 587 |
sl -= elem.scrollLeft; |
| 588 |
st -= elem.scrollTop; |
| 589 |
} |
| 590 |
|
| 591 |
return options.scroll ? { top: y - st, left: x - sl, scrollTop: st, scrollLeft: sl } |
| 592 |
: { top: y, left: x };
|
| 593 |
}; |
| 594 |
|
| 595 |
/**
|
| 596 |
* Gets the width of the OS scrollbar
|
| 597 |
* @private
|
| 598 |
*/
|
| 599 |
var scrollbarWidth = 0; |
| 600 |
var getScrollbarWidth = function() { |
| 601 |
if (!scrollbarWidth) {
|
| 602 |
var testEl = $('<div>') |
| 603 |
.css({
|
| 604 |
width: 100, |
| 605 |
height: 100, |
| 606 |
overflow: 'auto', |
| 607 |
position: 'absolute', |
| 608 |
top: -1000, |
| 609 |
left: -1000 |
| 610 |
}) |
| 611 |
.appendTo('body');
|
| 612 |
scrollbarWidth = 100 - testEl
|
| 613 |
.append('<div>')
|
| 614 |
.find('div')
|
| 615 |
.css({
|
| 616 |
width: '100%', |
| 617 |
height: 200 |
| 618 |
}) |
| 619 |
.width(); |
| 620 |
testEl.remove(); |
| 621 |
} |
| 622 |
return scrollbarWidth;
|
| 623 |
}; |
| 624 |
|
| 625 |
})(jQuery); |