Using offsetWidth for jQuery selectors (especifically the :visible selector)

[matheusalmeida]

As discussed at the jQuery Development group: ​http://groups.google.com/group/jquery-dev/browse_thread/thread/e18b399b36d03f4f

A simpler and more officient way to determine if a element is visible at the document is to test its offsetWidth or offsetHeight parameter values.

It discards the parents verification and treat as hidden not just the elements with display:none or visibility:hidden but also those that has zero-valued width or height.

[simba.zhang]

I've had a similar problem with version 1.3.1 ！

It was found in UI/Effects/Transfer. When target element with display:none ,the function offset() return zero-valued top and left.

I've had found a temporary way to solve the problem.

/ jQuery.iUtil = {

getPosition : function(e) {

var x = 0; var y = 0; var es = e.style; if (jQuery(e).css('display') == 'none') {

var oldVisibility = es.visibility; var oldPosition = es.position; es.visibility = 'hidden'; es.display = 'block'; es.position = 'absolute';

} var el = e; while (el){

x += el.offsetLeft + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderLeftWidth)y += el.offsetTop + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderTopWidth)

0:0);

0:0);

el = el.offsetParent;

} el = e; while (el && el.tagName && el.tagName.toLowerCase() != 'body') {

x -= el.scrollLefty -= el.scrollTop

0;

0;

el = el.parentNode;

} if (oldVisibility) {

es.display = 'none'; es.position = oldPosition; es.visibility = oldVisibility;

} return {x:x, y:y};

},

..... };

These codes from ​http://interface.eyecon.ro ,It might be helpful to settle this matter finally.

Complete

/

• Interface Elements for jQuery
• utility function *
• ​http://interface.eyecon.ro *
• Copyright (c) 2006 Stefan Petre
• Dual licensed under the MIT (MIT-LICENSE.txt)
• and GPL (GPL-LICENSE.txt) licenses. * * */

jQuery.iUtil = {

getPosition : function(e) {

var x = 0; var y = 0; var es = e.style; if (jQuery(e).css('display') == 'none') {

var oldVisibility = es.visibility; var oldPosition = es.position; es.visibility = 'hidden'; es.display = 'block'; es.position = 'absolute';

} var el = e; while (el){

x += el.offsetLeft + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderLeftWidth)y += el.offsetTop + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderTopWidth)

0:0);

0:0);

el = el.offsetParent;

} el = e; while (el && el.tagName && el.tagName.toLowerCase() != 'body') {

x -= el.scrollLefty -= el.scrollTop

0;

0;

el = el.parentNode;

} if (oldVisibility) {

es.display = 'none'; es.position = oldPosition; es.visibility = oldVisibility;

} return {x:x, y:y};

}, getPositionLite : function(el) {

var x = 0, y = 0; while(el) {

x += el.offsetLeft y += el.offsetTop

0;

0;

el = el.offsetParent;

} return {x:x, y:y};

}, getSize : function(e) {

var w = jQuery.css(e,'width'); var h = jQuery.css(e,'height'); var wb = 0; var hb = 0; var es = e.style; if (jQuery(e).css('display') != 'none') {

wb = e.offsetWidth; hb = e.offsetHeight;

} else {

var oldVisibility = es.visibility; var oldPosition = es.position; es.visibility = 'hidden'; es.display = 'block'; es.position = 'absolute'; wb = e.offsetWidth; hb = e.offsetHeight; es.display = 'none'; es.position = oldPosition; es.visibility = oldVisibility;

} return {w:w, h:h, wb:wb, hb:hb};

}, getSizeLite : function(el) {

return {

wb:el.offsetWidthhb:el.offsetHeight

0,

0

};

}, getClient : function(e) {

var h, w, de; if (e) {

w = e.clientWidth; h = e.clientHeight;

} else {

de = document.documentElement;

w = window.innerWidth h = window.innerHeight

self.innerWidth	(de&&de.clientWidth)	document.body.clientWidth;
self.innerHeight	(de&&de.clientHeight)	document.body.clientHeight;

} return {w:w,h:h};

}, getScroll : function (e) {

var t, l, w, h, iw, ih; if (e && e.nodeName.toLowerCase() != 'body') {

t = e.scrollTop; l = e.scrollLeft; w = e.scrollWidth; h = e.scrollHeight; iw = 0; ih = 0;

} else {

if (document.documentElement && document.documentElement.scrollTop) {

t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; w = document.documentElement.scrollWidth; h = document.documentElement.scrollHeight;

} else if (document.body) {

t = document.body.scrollTop; l = document.body.scrollLeft; w = document.body.scrollWidth; h = document.body.scrollHeight;

}

iw = self.innerWidthih = self.innerHeight

document.documentElement.clientWidth	document.body.clientWidth	0;
document.documentElement.clientHeight	document.body.clientHeight	0;

} return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };

}, getMargins : function(e, toInteger) {

var el = jQuery(e);

var t = el.css('marginTop') var r = el.css('marginRight') var b = el.css('marginBottom') var l = el.css('marginLeft')

;

;

;

;

if (toInteger)

return {

t: parseInt(t)r: parseInt(r)b: parseInt(b)

0,

0,

0,

l: parseInt(l)

};

else

return {t: t, r: r, b: b, l: l};

}, getPadding : function(e, toInteger) {

var el = jQuery(e);

var t = el.css('paddingTop') var r = el.css('paddingRight') var b = el.css('paddingBottom') var l = el.css('paddingLeft')

;

;

;

;

if (toInteger)

return {

t: parseInt(t)r: parseInt(r)b: parseInt(b)

0,

0,

0,

l: parseInt(l)

};

else

return {t: t, r: r, b: b, l: l};

}, getBorder : function(e, toInteger) {

var el = jQuery(e);

var t = el.css('borderTopWidth') var r = el.css('borderRightWidth') var b = el.css('borderBottomWidth') var l = el.css('borderLeftWidth')

;

;

;

;

if (toInteger)

return {

t: parseInt(t)r: parseInt(r)b: parseInt(b)l: parseInt(l)

0,

0,

0,

0

};

else

return {t: t, r: r, b: b, l: l};

}, getPointer : function(event) {

var x = event.pageX var y = event.pageY

(event.clientX + (document.documentElement.scrollLeft	document.body.scrollLeft))	0;
(event.clientY + (document.documentElement.scrollTop	document.body.scrollTop))	0;

return {x:x, y:y};

}, traverseDOM : function(nodeEl, func) {

func(nodeEl); nodeEl = nodeEl.firstChild; while(nodeEl){

jQuery.iUtil.traverseDOM(nodeEl, func); nodeEl = nodeEl.nextSibling;

}

}, purgeEvents : function(nodeEl) {

jQuery.iUtil.traverseDOM(

nodeEl, function(el) {

for(var attr in el){

if(typeof el[attr] === 'function') {

el[attr] = null;

}

}

}

);

}, centerEl : function(el, axis) {

var clientScroll = jQuery.iUtil.getScroll(); var windowSize = jQuery.iUtil.getSize(el);

if (!axis

axis == 'vertically')

jQuery(el).css(

{

top: clientScroll.t + ((Math.max(clientScroll.h,clientScroll.ih) - clientScroll.t - windowSize.hb)/2) + 'px'

}

);

if (!axis

axis == 'horizontally')

jQuery(el).css(

{

left: clientScroll.l + ((Math.max(clientScroll.w,clientScroll.iw) - clientScroll.l - windowSize.wb)/2) + 'px'

}

);

}, fixPNG : function (el, emptyGIF) {

var images = jQuery('img[@src*="png"]', el

document), png;

images.each( function() {

png = this.src; this.src = emptyGIF; this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + png + "')";

});

}

};

[john]

Fixed in SVN rev [6210].