Skip to main content

Bug Tracker

Side navigation

#3895 closed enhancement (fixed)

Opened January 16, 2009 06:24PM UTC

Closed February 16, 2009 03:53PM UTC

Last modified March 14, 2012 01:17PM UTC

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

Reported by: matheusalmeida Owned by: john
Priority: minor Milestone: 1.3.2
Component: selector Version: 1.3.1
Keywords: visible Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (2)

Changed January 25, 2009 08:43PM UTC by simba.zhang comment:1

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)||0:0);

y += el.offsetTop + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderTopWidth)||0:0);

el = el.offsetParent;

}

el = e;

while (el && el.tagName && el.tagName.toLowerCase() != 'body')

{

x -= el.scrollLeft||0;

y -= el.scrollTop||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

*

*

  • 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)||0:0);

y += el.offsetTop + (el.currentStyle && !jQuery.browser.opera ?parseInt(el.currentStyle.borderTopWidth)||0:0);

el = el.offsetParent;

}

el = e;

while (el && el.tagName && el.tagName.toLowerCase() != 'body')

{

x -= el.scrollLeft||0;

y -= el.scrollTop||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 || 0;

y += el.offsetTop || 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.offsetWidth||0,

hb:el.offsetHeight||0

};

},

getClient : function(e)

{

var h, w, de;

if (e) {

w = e.clientWidth;

h = e.clientHeight;

} else {

de = document.documentElement;

w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;

h = window.innerHeight || 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.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;

ih = self.innerHeight||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)||0,

r: parseInt(r)||0,

b: parseInt(b)||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)||0,

r: parseInt(r)||0,

b: parseInt(b)||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)||0,

r: parseInt(r)||0,

b: parseInt(b)||0,

l: parseInt(l)||0

};

else

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

},

getPointer : function(event)

{

var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)) || 0;

var y = event.pageY || (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 + "')";

});

}

};

Changed February 16, 2009 03:53PM UTC by john comment:2

milestone: 1.3.11.3.2
resolution: → fixed
status: newclosed
version: 1.2.61.3.1

Fixed in SVN rev [6210].